Merge pull request #17 from Rawallon/master

Fix: Theme change not being applied at real time
helenapaixao · May 17, 2021 · 2135adf · 2135adf
2 parents 1b25679 + e90af2c
commit 2135adf
Show file tree

Hide file tree

Showing 15 changed files with 15,042 additions and 184 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "react-scripts": "3.4.1",
     "react-spring": "^8.0.27",
     "react-switch": "^5.0.1",
+    "react-transition-group": "^4.4.1",
     "styled-components": "^5.1.1",
     "typescript": "~3.7.2",
     "uuidv4": "^6.1.1"
@@ -47,6 +48,7 @@
   "devDependencies": {
     "@types/react-lottie": "^1.2.5",
     "@types/react-router-dom": "^5.1.5",
+    "@types/react-transition-group": "^4.4.1",
     "@types/styled-components": "^5.1.1",
     "@typescript-eslint/eslint-plugin": "^2.30.0",
     "@typescript-eslint/parser": "^2.30.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -4,14 +4,21 @@ import { ThemeProvider, DefaultTheme } from 'styled-components';
 import usePeristedState from './utils/usePersistedState';
 import Routes from './routes';
 import GlobalStyle from './styles/global';
+
 import light from './styles/themes/light';
+import dark from './styles/themes/dark';
 
 const App: React.FC = () => {
-  const [theme] = usePeristedState<DefaultTheme>('theme', light);
+  const [theme, setTheme] = usePeristedState<DefaultTheme>('theme', light);
+
+  const toggleTheme = () => {
+    setTheme(theme.title === 'light' ? dark : light);
+  };
+
   return (
     <ThemeProvider theme={theme}>
       <BrowserRouter>
-        <Routes />
+        <Routes toggleTheme={toggleTheme} />
         <GlobalStyle />
       </BrowserRouter>
     </ThemeProvider>

diff --git a/src/assets/logo.svg b/src/assets/logo.svg
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -5,6 +5,7 @@ import { shade } from 'polished';
 
 import { ThemeContext } from 'styled-components';
 import * as S from './styles';
+import { Logo } from '../Logo';
 
 interface HeaderProps {
   isLink?: string;
@@ -16,7 +17,9 @@ const Header: React.FC<HeaderProps> = ({ isLink, toggleTheme }) => {
   return (
     <S.Container>
       <S.LogoContainer>
-        <S.LogoImage />
+        <S.LogoImage>
+          <Logo isDark={title === 'dark'} />
+        </S.LogoImage>
         <h1>vagasExplorer</h1>
       </S.LogoContainer>
       <Switch

diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts
@@ -19,11 +19,7 @@ export const LogoContainer = styled.div`
   }
 `;
 
-export const LogoImage = styled.img.attrs({
-  src: require('../../assets/logo.svg'),
-  alt: 'Vagas Explorer',
-})`
-  height: 60px;
+export const LogoImage = styled.div`
   margin-right: 10px;
 `;
 

diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -10,7 +10,7 @@ interface LayoutProps {
 
 const Layout: React.FC<LayoutProps> = ({ children, isContentFull }) => {
   return (
-    <S.Container isContentFull={isContentFull}>
+    <S.Container isContentFull={isContentFull} className="page">
       {children}
       <Footer />
     </S.Container>

diff --git a/src/components/Logo/index.tsx b/src/components/Logo/index.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+export const Logo: React.FC<any> = ({ isDark }) =>
+  isDark === false ? (
+    <svg
+      height="60"
+      viewBox="0 0 512.002 512.002"
+      width="60"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="#3a3a3a"
+    >
+      <path d="m418.635 119.367c-36.288-36.287-82.568-58.943-132.634-65.425v-23.942c0-16.542-13.458-30-30-30s-30 13.458-30 30v23.953c-34.188 4.464-66.902 16.539-95.942 35.583-4.618 3.028-5.907 9.228-2.878 13.846 3.028 4.618 9.227 5.906 13.846 2.878 28.793-18.882 61.547-30.263 95.691-33.381.16-.011.32-.023.478-.042 6.228-.554 12.501-.837 18.805-.837 115.794 0 210 94.206 210 210s-94.206 210-210 210-210-94.206-210-210c0-41.035 11.848-80.794 34.264-114.981 3.028-4.619 1.739-10.818-2.879-13.846-4.619-3.027-10.817-1.739-13.846 2.879-24.558 37.454-37.538 81.006-37.538 125.948 0 61.435 23.924 119.193 67.365 162.635 43.441 43.441 101.199 67.365 162.634 67.365s119.193-23.924 162.634-67.365c43.442-43.441 67.366-101.2 67.366-162.635s-23.924-119.191-67.366-162.633zm-172.635-67.141v-22.226c0-5.514 4.486-10 10-10s10 4.486 10 10v22.228c-3.322-.141-6.655-.226-10-.226-3.342 0-6.675.081-10 .224z" />
+      <path d="m256 472.002c104.767 0 190-85.233 190-190s-85.233-190-190-190c-104.766 0-190 85.234-190 190s85.234 190 190 190zm0-360.001c93.739 0 170 76.262 170 170s-76.262 170-170 170-170-76.262-170-170c.001-93.738 76.263-170 170-170z" />
+      <path d="m137.559 292.002h83.691l8.734 13.197c.741 1.12 1.7 2.079 2.82 2.82l13.197 8.735v83.691c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10v-70.455l71.362 47.232c1.687 1.116 3.606 1.661 5.517 1.661 2.581 0 5.142-.997 7.074-2.929 3.361-3.362 3.892-8.626 1.268-12.59l-47.232-71.362h70.455c5.522 0 10-4.477 10-10s-4.478-10-10-10h-83.692l-8.734-13.197c-.741-1.12-1.7-2.079-2.819-2.82l-13.197-8.735v-83.691c0-5.523-4.478-10-10-10-5.523 0-10 4.477-10 10v70.454l-71.362-47.232c-3.965-2.624-9.229-2.094-12.591 1.268s-3.892 8.626-1.268 12.59l47.232 71.363h-70.454c-5.523 0-10 4.477-10 10s4.476 10 9.999 10zm128.904-20.462 40.955 61.879-61.879-40.955-40.955-61.879z" />
+      <path d="m100.44 136.438c2.4 0 4.808-.859 6.724-2.601l.005-.005c4.086-3.715 4.385-10.037.67-14.124-3.713-4.086-10.042-4.386-14.128-.67-4.086 3.715-4.388 10.04-.673 14.126 1.974 2.172 4.683 3.274 7.402 3.274z" />
+    </svg>
+  ) : (
+    <svg
+      height="60"
+      viewBox="0 0 512.002 512.002"
+      width="60"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="white"
+    >
+      <path d="m418.635 119.367c-36.288-36.287-82.568-58.943-132.634-65.425v-23.942c0-16.542-13.458-30-30-30s-30 13.458-30 30v23.953c-34.188 4.464-66.902 16.539-95.942 35.583-4.618 3.028-5.907 9.228-2.878 13.846 3.028 4.618 9.227 5.906 13.846 2.878 28.793-18.882 61.547-30.263 95.691-33.381.16-.011.32-.023.478-.042 6.228-.554 12.501-.837 18.805-.837 115.794 0 210 94.206 210 210s-94.206 210-210 210-210-94.206-210-210c0-41.035 11.848-80.794 34.264-114.981 3.028-4.619 1.739-10.818-2.879-13.846-4.619-3.027-10.817-1.739-13.846 2.879-24.558 37.454-37.538 81.006-37.538 125.948 0 61.435 23.924 119.193 67.365 162.635 43.441 43.441 101.199 67.365 162.634 67.365s119.193-23.924 162.634-67.365c43.442-43.441 67.366-101.2 67.366-162.635s-23.924-119.191-67.366-162.633zm-172.635-67.141v-22.226c0-5.514 4.486-10 10-10s10 4.486 10 10v22.228c-3.322-.141-6.655-.226-10-.226-3.342 0-6.675.081-10 .224z" />
+      <path d="m256 472.002c104.767 0 190-85.233 190-190s-85.233-190-190-190c-104.766 0-190 85.234-190 190s85.234 190 190 190zm0-360.001c93.739 0 170 76.262 170 170s-76.262 170-170 170-170-76.262-170-170c.001-93.738 76.263-170 170-170z" />
+      <path d="m137.559 292.002h83.691l8.734 13.197c.741 1.12 1.7 2.079 2.82 2.82l13.197 8.735v83.691c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10v-70.455l71.362 47.232c1.687 1.116 3.606 1.661 5.517 1.661 2.581 0 5.142-.997 7.074-2.929 3.361-3.362 3.892-8.626 1.268-12.59l-47.232-71.362h70.455c5.522 0 10-4.477 10-10s-4.478-10-10-10h-83.692l-8.734-13.197c-.741-1.12-1.7-2.079-2.819-2.82l-13.197-8.735v-83.691c0-5.523-4.478-10-10-10-5.523 0-10 4.477-10 10v70.454l-71.362-47.232c-3.965-2.624-9.229-2.094-12.591 1.268s-3.892 8.626-1.268 12.59l47.232 71.363h-70.454c-5.523 0-10 4.477-10 10s4.476 10 9.999 10zm128.904-20.462 40.955 61.879-61.879-40.955-40.955-61.879z" />
+      <path d="m100.44 136.438c2.4 0 4.808-.859 6.724-2.601l.005-.005c4.086-3.715 4.385-10.037.67-14.124-3.713-4.086-10.042-4.386-14.128-.67-4.086 3.715-4.388 10.04-.673 14.126 1.974 2.172 4.683 3.274 7.402 3.274z" />
+    </svg>
+  );
diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
@@ -1,25 +1,74 @@
 import React from 'react';
 import { FiChevronRight } from 'react-icons/fi';
-import {  DefaultTheme } from 'styled-components';
-
 
 import Layout from '../../components/Layout';
 import Header from '../../components/Header';
-import usePeristedState from '../../utils/usePersistedState';
-
-import light from '../../styles/themes/light';
-import dark from '../../styles/themes/dark';
-
 
 import * as S from './styles';
+import { ToggleTheme } from '../../utils/ToggleThemeInterface';
 
-const Dashboard: React.FC = () => {
-  const [theme, setTheme] = usePeristedState<DefaultTheme>('theme', light);
-
-  const toggleTheme = () => {
-    setTheme(theme.title === 'light' ? dark : light);
-  };
+const reposData = [
+  {
+    link: '/repository/backend-br/vagas',
+    imageUrl: 'https://avatars1.githubusercontent.com/u/30732658?v=4',
+    name: ' backend-br',
+    desc: 'Espaço para divulgação de vagas para backenders',
+  },
+  {
+    link: '/repository/frontendbr/vagas',
+    imageUrl: 'https://avatars1.githubusercontent.com/u/16963863?v=4',
+    name: ' frontendbr',
+    desc: 'Espaço para divulgação de vagas para front-enders.',
+  },
+  {
+    link: '/repository/vuejs-br/vagas',
+    imageUrl:
+      'https://avatars2.githubusercontent.com/u/13300590?v=4.githubusercontent.com/u/16963863?v=4',
+    name: ' vuejs-br',
+    desc: 'Espaço para divulgação de vagas relacionadas com Vue.js',
+  },
+  {
+    link: '/repository/androiddevbr/vagas',
+    imageUrl: 'https://avatars1.githubusercontent.com/u/13825651?v=4',
+    name: ' androiddevbr',
+    desc: 'Mural de vagas para desenvolvedor Android.',
+  },
+  {
+    link: '/repository/react-brasil/vagas',
+    imageUrl: 'https://avatars2.githubusercontent.com/u/16929016?s=500&v=4',
+    name: ' React Brasil',
+    desc: 'Espaço para divulgação de vagas relacionadas com React',
+  },
+  {
+    link: '/repository/qa-brasil/vagas',
+    imageUrl: 'https://avatars0.githubusercontent.com/u/59667653?s=200&v=4',
+    name: ' QA Brasil ',
+    desc: 'Espaço para divulgação de vagas para Analistas de testes',
+  },
+  {
+    link: '/repository/phpdevbr/vagas',
+    imageUrl:
+      'https://avatars0.githubusercontent.com/u/21205969?v=3&u=811926aba01e8a43d7a8ffda50b7b66a57ccdd0a',
+    name: ' phpdevbr',
+    desc: 'Espaço para divulgação de vagas para desenvolvedores PHP.',
+  },
+  {
+    link: '/repository/flutterbr/vagas',
+    imageUrl:
+      'https://github.com/Flutter-Brazil/brand/raw/master/src/jpg/banner.jpeg',
+    name: ' flutterbr',
+    desc: ' Espaço para divulgação de vagas relacionadas com Flutter e Dart',
+  },
+  {
+    link: '/repository/uxbrasil/vagas',
+    imageUrl:
+      'https://user-images.githubusercontent.com/3299130/48214486-2fed0800-e367-11e8-8274-6858c79ab7b4.png',
+    name: ' uxbrasil',
+    desc: ' Espaço para divulgação de vagas para designers UI e pesquisadores UX.',
+  },
+];
 
+const Dashboard: React.FC<ToggleTheme> = ({ toggleTheme }) => {
   return (
     <Layout isContentFull>
       <Header isLink="/" toggleTheme={toggleTheme} />
@@ -28,132 +77,16 @@ const Dashboard: React.FC = () => {
         <h1>Principais repositórios de vagas</h1>
 
         <S.Content>
-          <S.RepositoryItem
-            key="backend-br/vagas"
-            to="/repository/backend-br/vagas"
-          >
-            <img
-              src="https://avatars1.githubusercontent.com/u/30732658?v=4"
-              alt="backend-br"
-            />
-            <div>
-              <strong>backend-br</strong>
-              <p>Espaço para divulgação de vagas para backenders</p>
-            </div>
-            <FiChevronRight size={20} />
-          </S.RepositoryItem>
-          <S.RepositoryItem
-            key="frontendbr/vagas"
-            to="/repository/frontendbr/vagas"
-          >
-            <img
-              src="https://avatars1.githubusercontent.com/u/16963863?v=4"
-              alt="frontendbr"
-            />
-            <div>
-              <strong>frontendbr</strong>
-              <p>Espaço para divulgação de vagas para front-enders.</p>
-            </div>
-            <FiChevronRight size={20} />
-          </S.RepositoryItem>
-          <S.RepositoryItem
-            key="vuejs-br/vagas"
-            to="/repository/vuejs-br/vagas"
-          >
-            <img
-              src="https://avatars2.githubusercontent.com/u/13300590?v=4.githubusercontent.com/u/16963863?v=4"
-              alt="vuejs-br"
-            />
-            <div>
-              <strong>vuejs-br</strong>
-              <p>Espaço para divulgação de vagas relacionadas com Vue.js</p>
-            </div>
-            <FiChevronRight size={20} />
-          </S.RepositoryItem>
-          <S.RepositoryItem
-            key="androiddevbr/vagas"
-            to="/repository/androiddevbr/vagas"
-          >
-            <img
-              src="https://avatars1.githubusercontent.com/u/13825651?v=4"
-              alt="androiddevbr-br"
-            />
-            <div>
-              <strong>androiddevbr</strong>
-              <p>Mural de vagas para desenvolvedor Android.</p>
-            </div>
-            <FiChevronRight size={20} />
-          </S.RepositoryItem>
-          <S.RepositoryItem
-            key="react-brasil/vagas"
-            to="/repository/react-brasil/vagas"
-          >
-            <img
-              src="https://avatars2.githubusercontent.com/u/16929016?s=500&v=4"
-              alt="React Brasil"
-            />
-            <div>
-              <strong>React Brasil</strong>
-              <p>Espaço para divulgação de vagas relacionadas com React</p>
-            </div>
-            <FiChevronRight size={20} />
-          </S.RepositoryItem>
-          <S.RepositoryItem
-            key="qa-brasil/vagas"
-            to="/repository/qa-brasil/vagas"
-          >
-            <img
-              src="https://avatars0.githubusercontent.com/u/59667653?s=200&v=4"
-              alt="@qa-brasil"
-            />
-            <div>
-              <strong>QA Brasil </strong>
-              <p>Espaço para divulgação de vagas para Analistas de testes</p>
-            </div>
-            <FiChevronRight size={20} />
-          </S.RepositoryItem>
-          <S.RepositoryItem
-            key="phpdevbr/vagas"
-            to="/repository/phpdevbr/vagas"
-          >
-            <img
-              src="https://avatars0.githubusercontent.com/u/21205969?v=3&u=811926aba01e8a43d7a8ffda50b7b66a57ccdd0a"
-              alt="@qa-brasil"
-            />
-            <div>
-              <strong>phpdevbr</strong>
-              <p>Espaço para divulgação de vagas para desenvolvedores PHP.</p>
-            </div>
-            <FiChevronRight size={20} />
-          </S.RepositoryItem>
-          <S.RepositoryItem
-            key="flutterbr/vagas"
-            to="/repository/flutterbr/vagas"
-          >
-            <img
-              src="https://github.com/Flutter-Brazil/brand/raw/master/src/jpg/banner.jpeg"
-              alt="@flutter-Brazil"
-            />
-            <div>
-              <strong>flutterbr</strong>
-              <p>Espaço para divulgação de vagas relacionadas com Flutter e Dart</p>
-            </div>
-            <FiChevronRight size={20} />
-          </S.RepositoryItem>
-          <S.RepositoryItem
-            key="uxbrasil/vagas"
-            to="/repository/uxbrasil/vagas"
-          >
-            <img
-              src="https://user-images.githubusercontent.com/3299130/48214486-2fed0800-e367-11e8-8274-6858c79ab7b4.png"
-              alt="@uxbrasil"
-            />
-            <div>
-              <strong>uxbrasil</strong>
-              <p>Espaço para divulgação de vagas para designers UI e pesquisadores UX.</p>
-            </div>
-            <FiChevronRight size={20} />
-          </S.RepositoryItem>
+          {reposData.map((repo) => (
+            <S.RepositoryItem key={repo.link} to={repo.link}>
+              <img src={repo.imageUrl} alt={repo.name} />
+              <div>
+                <strong>{repo.name}</strong>
+                <p>{repo.desc}</p>
+              </div>
+              <FiChevronRight size={20} />
+            </S.RepositoryItem>
+          ))}
         </S.Content>
       </S.Repositories>
     </Layout>

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -1,23 +1,14 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { DefaultTheme } from 'styled-components';
-import usePeristedState from '../../utils/usePersistedState';
 
+import { ToggleTheme } from '../../utils/ToggleThemeInterface';
 import Layout from '../../components/Layout';
 import Header from '../../components/Header';
 import Animation from '../../components/Animation';
 
-import light from '../../styles/themes/light';
-import dark from '../../styles/themes/dark';
-
 import * as S from './styles';
 
-const Home: React.FC = () => {
-  const [theme, setTheme] = usePeristedState<DefaultTheme>('theme', light);
-
-  const toggleTheme = () => {
-    setTheme(theme.title === 'light' ? dark : light);
-  };
+const Home: React.FC<ToggleTheme> = ({ toggleTheme }) => {
   return (
     <Layout>
       <Header toggleTheme={toggleTheme} />