added homepage, fortune of the day, ability to respond friend request…

…s and other small tweaks

package.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "apollo-link-context": "^1.0.20",
     "draft-js": "^0.11.6",
     "draftjs-to-html": "^0.9.1",
     "graphql": "^15.3.0",
@@ -17,6 +18,7 @@
     "react-dom": "^16.13.1",
     "react-draft-wysiwyg": "^1.14.5",
     "react-icons": "^3.10.0",
+    "react-loading-skeleton": "^2.1.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "styled-components": "^5.1.1"
@@ -27,7 +29,6 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "proxy": "http://localhost:4000",
   "eslintConfig": {
     "extends": "react-app"
   },

src/App.js

@@ -1,29 +1,25 @@
 import React, { useState, useEffect } from 'react'
 import './styles/App.css'
-import { Wrapper, Container } from './styles/layout'
+import { Container } from './styles/layout'
 
-import { Switch, Route } from 'react-router-dom'
+import { Switch, Route, Redirect, useLocation } from 'react-router-dom'
 
+import PrivateRoutes from './PrivateRoutes'
 import Login from './components/auth/Login'
-import Navbar from './components/Navbar'
-import Footer from './components/Footer'
-import Home from './pages/Home'
-import Profile from './pages/Profile'
-import Scraps from './pages/Scraps'
-import Photos from './pages/Photos'
-import Photo from './components/Photo'
-import Communities from './pages/Communities'
-import Error404 from './pages/404Error'
 import Notification from './components/utils/Notification'
 
 import { useApolloClient, useLazyQuery } from '@apollo/client'
 import { FIND_USER } from './services/queries'
 
-import ResponsiveLayout from './components/ResponsiveLayout'
+import LoginLoading from './components/utils/LoginLoading'
 
 const App = () => {
+    const location = useLocation()
     const [ token, setToken ] = useState(null)
-    const [ findUser, { error, loading, data } ] = useLazyQuery(FIND_USER)
+    const [ redirectRoute, setRedirectRoute ] = useState("/")
+    const [ findUser, { error, loading, data } ] = useLazyQuery(FIND_USER, {
+        pollInterval: 120000
+    })
 
     const client = useApolloClient()
     const logout = () => {
@@ -47,71 +43,38 @@ const App = () => {
         }
     }, [token, findUser])
 
-    if (!(token && data)) return (
-        <Login setToken={ setToken } findUser={ findUser } />
-    )
+    useEffect(() => {
+        if (location.pathname !== '/login') {
+            setRedirectRoute(location.pathname)
+        }
+    }, [])
+
+    if (loading) return <LoginLoading />
 
     if (error) return (
         <Container>
             <Notification />
         </Container>
     )
 
-    if (loading) return (
-        <div style={{ textAlign: 'center' }}>Loading...</div>
-    )
-
-    const routes = [
-        { path: "/", name: "Home", Component: Home },
-        { path: "/perfil/:userId", name: "Perfil", Component: Profile },
-        { path: "/perfil/:userId/scraps", name: "Scraps", Component: Scraps },
-        { path: "/perfil/:userId/fotos", name: "Fotos", Component: Photos },
-        { path: "/perfil/:userId/fotos/:photoId", name: "Foto", Component: Photo },
-        { path: "/comunidades", name: "Comunidades", Component: Communities },
-    ]
-
     return (
-        <Wrapper>
-            <Navbar loggedUser={ data.findUser } logout={ logout } />
-            <Container main>
-                <Switch>
-                    {
-                        routes.map(({ path, Component }, key) => (
-                            <Route exact path={ path } key={ key } component={props => {
-                                const crumbs = routes
-                                    .filter(({ path }) => props.match.path.includes(path))
-                                    .map(({ path, ...rest }) => ({
-                                        path: Object.keys(props.match.params).length
-                                            ? Object.keys(props.match.params).reduce(
-                                                (path, param) => path.replace(
-                                                    `:${param}`, props.match.params[param]
-                                                ), path)
-                                            : path,
-                                        ...rest
-                                    }));
-
-                                return (
-                                    <ResponsiveLayout
-                                        breakpoint={ 676 }
-                                        renderDesktop={ () => (
-                                            <Component {...props} loggedUser={ data.findUser } crumbs={ crumbs } />
-                                        ) }
-                                        renderMobile={ () => (
-                                            <h1>Mobile view!</h1>
-                                        ) }
-                                    />
-                                )
-                            }} />
-                        ))
+        <div>
+            <Switch>
+                <Route exact path="/login">
+                    { !(token && data)
+                        ? <Login setToken={ setToken } findUser={ findUser } loading={ loading } />
+                        : <Redirect to={ redirectRoute } />
                     }
-                    <Route path="*">
-                        <Error404 />
-                    </Route>
-                </Switch>
-            </Container>
-            <Footer />
-        </Wrapper>
-    );
+                </Route>
+                <Route path="*">
+                    { token && data
+                        ? <PrivateRoutes data={ data } logout={ logout } />
+                        : <Redirect to="/login" />
+                    }
+                </Route>
+            </Switch>
+        </div>
+    )
 }
 
 export default App;