Merge pull request #54 from which-ecosystem/hooks

Use hooks logic

1 files changed, 15 insertions, 91 deletions

diff --git a/src/index.tsx b/src/index.tsx
index 02f7969..180f80c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,22 +1,15 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom';
-import {
-  createMuiTheme,
-  ThemeProvider,
-  makeStyles
-} from '@material-ui/core/styles';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import { CssBaseline } from '@material-ui/core';
 import teal from '@material-ui/core/colors/teal';
 import 'typeface-roboto';
 
-import { User } from 'which-types';
 import Header from './components/Header/Header';
-import ProfilePage from './pages/ProfilePage/ProfilePage';
-import FeedPage from './pages/FeedPage/FeedPage';
-import AuthPage from './pages/AuthPage/AuthPage';
-import { Page } from './types';
-import { get, post } from './requests';
 import ScrollTopArrow from './components/ScrollTopArrow/ScrollTopArrow';
+import Page from './pages/Page';
+import { AuthProvider } from './hooks/useAuth';
+import { NavigationProvider } from './hooks/useNavigate';
 
 
 const theme = createMuiTheme({
@@ -28,88 +21,19 @@ const theme = createMuiTheme({
   }
 });
 
-const useStyles = makeStyles({
-  root: {
-    width: theme.spacing(75),
-    marginTop: theme.spacing(15),
-    margin: '0 auto'
-  }
-});
 
 const App: React.FC = () => {
-  const [user, setUser] = React.useState<User | undefined>();
-  const [page, setPage] = useState<Page>({ prefix: 'feed', id: '' });
-  const classes = useStyles();
-
-  const navigate = (prefix: string, id?: string): void => {
-    if (prefix === 'profile' && !id && !user) {
-      setPage({
-        prefix: 'auth',
-        id: ''
-      });
-    } else {
-      setPage({
-        prefix,
-        id: (id || user?._id || '')
-      });
-    }
-  };
-
-  const logIn = (username: string, password: string, remember = true): Promise<boolean> => {
-    return post('/authentication', {
-      strategy: 'local',
-      username,
-      password
-    }).then(response => {
-      const me = response.data.user;
-      const token = response.data.accessToken;
-      setUser(me);
-      navigate('profile', me._id);
-      localStorage.setItem('userId', me._id);
-      localStorage.setItem('token', token);
-      if (!remember) localStorage.setItem('shouldClear', 'true');
-      return true;
-    }).catch(() => false);
-  };
-
-  const logOut = () => {
-    setUser(undefined);
-    localStorage.removeItem('userId');
-    localStorage.removeItem('token');
-    navigate('auth');
-  };
-
-  useEffect(() => {
-    if (localStorage.getItem('shouldClear')) {
-      localStorage.clear();
-    }
-    const userId = localStorage.getItem('userId');
-    if (userId) {
-      get(`/users/${userId}`).then(response => {
-        setUser(response.data);
-      });
-    }
-  }, []);
-
   return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <Header navigate={navigate} userImage={user?.avatarUrl} />
-      <div className={classes.root}>
-        { page.prefix === 'profile' && (
-          <ProfilePage
-            logOut={logOut}
-            id={page.id}
-            navigate={navigate}
-            setUser={setUser}
-          />
-        ) }
-        { page.prefix === 'feed' && <FeedPage navigate={navigate} user={user} /> }
-        { page.prefix === 'auth' && <AuthPage logIn={logIn} /> }
-      </div>
-      <ScrollTopArrow />
-    </ThemeProvider>
-
+    <NavigationProvider>
+      <AuthProvider>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <Header />
+          <Page />
+          <ScrollTopArrow />
+        </ThemeProvider>
+      </AuthProvider>
+    </NavigationProvider>
   );
 };