Merge pull request #101 from ivanms1/refactors

Refactors

client/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@apollo/client": "3.3.11",
     "@hookform/error-message": "0.0.5",
+    "@hookform/resolvers": "^1.3.5",
     "@popperjs/core": "^2.9.1",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
@@ -28,7 +29,8 @@
     "react-transition-group": "^4.4.1",
     "react-waypoint": "^9.0.3",
     "reactjs-popup": "^2.0.3",
-    "styled-components": "^5.1.1"
+    "styled-components": "^5.1.1",
+    "yup": "^0.32.9"
   },
   "scripts": {
     "start": "react-scripts start",

client/src/App.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import './App.css';
-import Routes from './Routes/Routes';
 import { BrowserRouter } from 'react-router-dom';
 import { Toaster } from 'react-hot-toast';
 
 import Globalstyles from './styles/Globalstyles';
+import Layout from './components/Layout';
 
 function App() {
   return (
     <BrowserRouter>
       <Globalstyles />
-      <Routes />
+      <Layout />
       <Toaster position='bottom-center' />
     </BrowserRouter>
   );

client/src/Context/AppContext.js

@@ -1,6 +1,6 @@
 import React, { createContext, useState, useMemo, useEffect } from 'react';
 
-import useCurrentUser from '../components/useCurrentUser/useCurrentUser';
+import useCurrentUser from '../components/useCurrentUser';
 
 export const Context = createContext();
 

client/src/Routes/PrivateRoute.js

@@ -3,22 +3,22 @@ import { Route, Redirect } from 'react-router-dom';
 
 import { Context } from '../Context/AppContext';
 
-import useCurrentUser from '../components/useCurrentUser/useCurrentUser';
+import useCurrentUser from '../components/useCurrentUser';
 
 function PrivateRoutes({ path, isForAdmin, children, ...props }) {
   const { isAuthenticated } = useContext(Context);
 
   const { currentUser, loading } = useCurrentUser();
 
   if ((!isAuthenticated || !currentUser) && !loading) {
-    return <Redirect to='/signin' />;
+    return <Redirect to='/login' />;
   }
 
   if (isForAdmin && currentUser?.role === 'USER') {
     return <Redirect to='/' />;
   }
 
-  if (path === '/register' || path === '/signin') {
+  if (path === '/register' || path === '/login') {
     return <Redirect to='/' />;
   }
 

client/src/Routes/Routes.js → client/src/Routes/index.js

@@ -4,22 +4,20 @@ import { Switch } from 'react-router-dom';
 import PublicRoute from './PublicRoute';
 import PrivateRoute from './PrivateRoute';
 
-import Loader from '../components/Loader/Loader';
+import Loader from '../components/Loader';
 
-const Home = lazy(() => import('../pages/Home/Home'));
-const Register = lazy(() => import('../pages/Register/Register'));
-const Contact = lazy(() => import('../pages/Contact/Contact'));
-const SignIn = lazy(() => import('../pages/SignIn/Signin'));
-const Logout = lazy(() => import('../pages/Logout/Logout'));
-const Submitproject = lazy(() => import('../pages/SubmitYourProject/Submit'));
-const Weekly = lazy(() => import('../pages/WeeklyProjects/Weekly'));
-const Favorites = lazy(() => import('../pages/Favorites/Favorites'));
-const Error = lazy(() => import('../pages/Error/error'));
-const Admin = lazy(() => import('../pages/Admin/Admin'));
-const Edit = lazy(() => import('../pages/Edit/Edit'));
-const CardDetails = lazy(() =>
-  import('../components/Cardv2/CardDetails/CardDetails')
-);
+const Home = lazy(() => import('../pages/Home'));
+const MyProjects = lazy(() => import('../pages/MyProjects'));
+const Register = lazy(() => import('../pages/Register'));
+const Contact = lazy(() => import('../pages/Contact'));
+const Login = lazy(() => import('../pages/Login'));
+const Logout = lazy(() => import('../pages/Logout'));
+const Submitproject = lazy(() => import('../pages/SubmitProject'));
+const Favorites = lazy(() => import('../pages/Favorites'));
+const Error = lazy(() => import('../pages/Error'));
+const Admin = lazy(() => import('../pages/Admin'));
+const Edit = lazy(() => import('../pages/Edit'));
+const CardDetails = lazy(() => import('../components/Cardv2/CardDetails'));
 
 function Routes() {
   return (
@@ -34,8 +32,8 @@ function Routes() {
         <PublicRoute path='/register'>
           <Register />
         </PublicRoute>
-        <PublicRoute path='/signin'>
-          <SignIn />
+        <PublicRoute path='/login'>
+          <Login />
         </PublicRoute>
         <PrivateRoute isForAdmin='true' path='/admin'>
           <Admin />
@@ -49,8 +47,8 @@ function Routes() {
         <PrivateRoute path='/submit'>
           <Submitproject />
         </PrivateRoute>
-        <PrivateRoute path='/weekly'>
-          <Weekly />
+        <PrivateRoute path='/myprojects'>
+          <MyProjects />
         </PrivateRoute>
         <PrivateRoute path='/favorites'>
           <Favorites />

client/src/components/Button/Button.js → client/src/components/Button/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Loader from '../Loader/Loader';
+import Loader from '../Loader';
 
 import { CustomButton } from './style';
 

client/src/components/Cardv2/CardDetails/CardDetails.js → client/src/components/Cardv2/CardDetails/index.js

@@ -4,12 +4,12 @@ import { loader } from 'graphql.macro';
 import { useQuery, useMutation } from '@apollo/client';
 import Zoom from 'react-medium-image-zoom';
 
-import Button from '../../Button/Button';
-import Header from '../../Header/Header';
-import Loader from '../../Loader/Loader';
-import PopupModal from '../../PopupModal/PopupModal';
+import Button from '../../Button';
 
-import useCurrentUser from '../../useCurrentUser/useCurrentUser';
+import Loader from '../../Loader';
+import PopupModal from '../../PopupModal';
+
+import useCurrentUser from '../../useCurrentUser';
 
 import { getCurrentDate } from '../../..//helpers/dateConverter';
 
@@ -19,7 +19,6 @@ import { ReactComponent as Email } from '../../../assets/email.svg';
 import { ReactComponent as Web } from '../../../assets/web.svg';
 
 import {
-  Main,
   HomeLink,
   Container,
   BackButton,
@@ -113,8 +112,7 @@ function CardDetails() {
   };
 
   return (
-    <Main>
-      <Header />
+    <>
       <Container>
         {project && (
           <>
@@ -249,7 +247,7 @@ function CardDetails() {
           editUserProject(project?.id);
         }}
       />
-    </Main>
+    </>
   );
 }
 

client/src/components/Cardv2/CardDetails/style.js

@@ -6,12 +6,6 @@ const colors = {
   red: ' rgba(237, 44, 73, 0.7)',
 };
 
-export const Main = styled.div`
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-`;
-
 export const HomeLink = styled(Link)`
   text-decoration: none;
   color: #000;
@@ -77,12 +71,11 @@ export const ImgContainerOuter = styled.figure`
   justify-content: center;
   align-items: center;
   overflow: hidden;
-  border: 7px solid ${({ status }) => (status ? colors.green : colors.red)};
-
   img {
     display: block;
     width: 100%;
     height: auto;
+    border: 7px solid ${({ status }) => (status ? colors.green : colors.red)};
   }
 `;
 

client/src/components/Cardv2/Cardtwo.js → client/src/components/Cardv2/index.js

@@ -3,15 +3,20 @@ import toast from 'react-hot-toast';
 import { useMutation, gql } from '@apollo/client';
 import { loader } from 'graphql.macro';
 
-import useCurrentUser from '../useCurrentUser/useCurrentUser';
+import useCurrentUser from '../useCurrentUser';
 
 import { getCurrentDate } from '../../helpers/dateConverter';
 
 import { ReactComponent as Star } from './../../assets/Star.svg';
 import { ReactComponent as StarFill } from './../../assets/Star-Fill.svg';
 import { ReactComponent as Spinner } from './../../assets/spinner.svg';
 
-import { Main, CardContainerInner, ProjectDetails, ViewDetails } from './style';
+import {
+  Container,
+  CardContainerInner,
+  ProjectDetails,
+  ViewDetails,
+} from './style';
 
 const MUTATION_REACT_TO_PROJECT = loader('./mutationReactToProject.graphql');
 const MUTATION_FAVORITE_PROJECT = loader('./mutationFavoriteProject.graphql');
@@ -28,7 +33,7 @@ const getActionFavorite = (project, currentUser) => {
     : 'FAVORITE';
 };
 
-function Cardtwo({ project, children }) {
+function Cardtwo({ project }) {
   const [imgLoaded, setImgLoaded] = useState(true);
 
   const { currentUser } = useCurrentUser();
@@ -128,7 +133,7 @@ function Cardtwo({ project, children }) {
   };
 
   return (
-    <Main>
+    <Container>
       <button onClick={reactToProject} className='starContainer'>
         {getActionLikes(project, currentUser) === 'LIKE' ? (
           <Star />
@@ -172,8 +177,7 @@ function Cardtwo({ project, children }) {
           {getCurrentDate(project.createdAt)}
         </span>
       </ProjectDetails>
-      {children}
-    </Main>
+    </Container>
   );
 }
 

client/src/components/Cardv2/style.js

@@ -6,7 +6,7 @@ const colors = {
   red: ' rgba(237, 44, 73, 0.7)',
 };
 
-export const Main = styled.div`
+export const Container = styled.div`
   border-radius: 5px;
   margin-bottom: 25px;
   margin: 12px;

client/src/components/Footer/Footer.js → client/src/components/Footer/index.js

@@ -68,7 +68,7 @@ function Footer() {
             </li>
 
             <li style={{ order: '4' }}>
-              <StyledLink activeClassName='current' to='/signin'>
+              <StyledLink activeClassName='current' to='/login'>
                 Sign in
               </StyledLink>
             </li>

client/src/components/Form/ProjectForm.js

@@ -8,16 +8,16 @@ import { Link } from 'react-router-dom';
 import { useMutation } from '@apollo/client';
 import { loader } from 'graphql.macro';
 
-import PopupModal from '../PopupModal/PopupModal';
-import { Dropzone } from '../DropZone/Dropzone';
-import SelectTags from './SelectTags/SelectTags';
-import Button from '../Button/Button';
-import Active from '../Active/Active';
-import Spinner from '../../components/Spinner/Spinner';
+import PopupModal from '../PopupModal';
+import { Dropzone } from '../DropZone';
+import SelectTags from './SelectTags';
+import Button from '../Button';
+import Active from '../Active';
+import Spinner from '../Spinner';
 
-import useCurrentUser from '../useCurrentUser/useCurrentUser';
+import useCurrentUser from '../useCurrentUser';
 
-import { options } from './SelectOptions/options';
+import { options } from './SelectOptions';
 import { getCurrentDate } from '../../helpers/dateConverter';
 
 import Rick from '../../assets/rick.png';
@@ -31,7 +31,7 @@ import {
   TextArea,
   ErrorText,
   CustomSubmitCss,
-} from '../../pages/SubmitYourProject/style';
+} from '../../pages/SubmitProject/style';
 import {
   CardOuter,
   CardInner,

client/src/components/Header/Header.js → client/src/components/Header/index.js

@@ -3,14 +3,14 @@ import Popup from 'reactjs-popup';
 import { useHistory } from 'react-router-dom';
 import { useApolloClient } from '@apollo/client';
 
-import Popper from '../Popper/Popper';
-import MobileMenu from '../MobileMenu/Mobilemenu';
-import BurgerIcon from '../BurgerIcon/BurgerIcon';
-import PopupModal from '../PopupModal/PopupModal';
+import Popper from '../Popper';
+import MobileMenu from '../MobileMenu';
+import BurgerIcon from '../BurgerIcon';
+import PopupModal from '../PopupModal';
 
 import { Context } from '../../Context/AppContext';
 
-import useCurrentUser from '../useCurrentUser/useCurrentUser';
+import useCurrentUser from '../useCurrentUser';
 
 import { ReactComponent as Cog } from '../../assets/cog.svg';
 import { ReactComponent as Bell } from '../../assets/bell.svg';
@@ -59,8 +59,8 @@ function Header() {
         exact: true,
       },
       {
-        title: 'Weekly',
-        to: `/weekly`,
+        title: 'My Projects',
+        to: `/myprojects`,
         exact: true,
       },
       {
@@ -93,8 +93,8 @@ function Header() {
         exact: true,
       },
       {
-        title: 'Sign in',
-        to: `/signin`,
+        title: 'Login',
+        to: `/login`,
         exact: true,
       },
     ],
@@ -217,10 +217,11 @@ function Header() {
         onRequestClose={() => setModalIsOpen(false)}
         shouldCloseOnOverlayClick={false}
         onClick={() => {
-          client.cache.reset();
           localStorage.setItem('userToken', '');
+          history.push('/login');
+          client.cache.reset();
           setIsAuthenticated(false);
-          history.push('/signin');
+          setModalIsOpen(false);
         }}
       />
     </Container>

client/src/components/Header/style.js

@@ -8,6 +8,7 @@ export const Container = styled.div`
   border-bottom: 1px solid #e6e6e6;
   align-items: center;
   padding-right: 20px;
+  background-color: #fff;
 `;
 
 export const Nav = styled.nav`

client/src/components/Layout/index.js

@@ -0,0 +1,15 @@
+import Routes from '../../Routes';
+import Header from '../Header';
+
+import { Main } from './style';
+
+function Layout() {
+  return (
+    <Main>
+      <Header />
+      <Routes />
+    </Main>
+  );
+}
+
+export default Layout;