diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx index b1ca351..5434079 100644 --- a/src/pages/Dashboard/index.tsx +++ b/src/pages/Dashboard/index.tsx @@ -8,7 +8,15 @@ import api from '../../services/api'; import logoImage from '../../assets/logo.svg'; import loadingImage from '../../assets/loading.svg'; -import { Title, Form, Badges, Error, LoadingIcon, Center } from './styles'; +import { + Title, + RepositoryName, + Form, + Badges, + Error, + LoadingIcon, + Center, +} from './styles'; interface Badge { name: string; @@ -18,7 +26,17 @@ interface Badge { const Dashboard: React.FC = () => { const [text, setText] = useState(''); - const [badges, setBadges] = useState([]); + const [prevRepoName, setPrevRepoName] = useState( + localStorage.getItem('@GithubBadges:Repo'), + ); + const [badges, setBadges] = useState(() => { + const hasBadges = JSON.parse(localStorage.getItem('@GithubBadges:Badges')!); + + if (hasBadges && hasBadges.length > 0) { + return hasBadges; + } + return []; + }); const [inputError, setInputError] = useState(''); const [loading, setLoading] = useState(false); @@ -44,6 +62,9 @@ const Dashboard: React.FC = () => { const response = generateBadges(`${username}/${repository}`); setBadges(response); + localStorage.setItem('@GithubBadges:Badges', JSON.stringify(response)); + localStorage.setItem('@GithubBadges:Repo', `${username}/${repository}`); + setPrevRepoName(`${username}/${repository}`); setText(''); setInputError(''); } catch (err) { @@ -76,6 +97,8 @@ const Dashboard: React.FC = () => { {inputError && {inputError}} + {prevRepoName} +
diff --git a/src/pages/Dashboard/styles.ts b/src/pages/Dashboard/styles.ts index ab38c85..3a38c32 100644 --- a/src/pages/Dashboard/styles.ts +++ b/src/pages/Dashboard/styles.ts @@ -14,6 +14,15 @@ export const Title = styled.h1` margin-top: 80px; `; +export const RepositoryName = styled.h1` + font-size: 32px; + color: #3a3a3a; + max-width: 735px; + line-height: 56px; + + margin-top: 40px; +`; + export const Form = styled.form` margin-top: 40px; max-width: 700px;