feat!: create useNavigate hook

1 files changed, 16 insertions, 55 deletions

diff --git a/src/index.tsx b/src/index.tsx
index a82a28b..180f80c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,23 +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 { useAuth, AuthProvider } from './hooks/useAuth';
+import Page from './pages/Page';
+import { AuthProvider } from './hooks/useAuth';
+import { NavigationProvider } from './hooks/useNavigate';
 
 
 const theme = createMuiTheme({
@@ -29,52 +21,21 @@ const theme = createMuiTheme({
   }
 });
 
-const useStyles = makeStyles({
-  root: {
-    width: theme.spacing(75),
-    marginTop: theme.spacing(15),
-    margin: '0 auto'
-  }
-});
 
 const App: React.FC = () => {
-  const [page, setPage] = useState<Page>({ prefix: 'feed', id: '' });
-  const classes = useStyles();
-  const { user } = useAuth();
-
-  const navigate = (prefix: string, id?: string): void => {
-    if (prefix === 'profile' && !id && !user) {
-      setPage({
-        prefix: 'auth',
-        id: ''
-      });
-    } else {
-      setPage({
-        prefix,
-        id: (id || user?._id || '')
-      });
-    }
-  };
-
   return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <Header navigate={navigate} />
-      <div className={classes.root}>
-        { page.prefix === 'profile' && (
-          <ProfilePage
-            id={page.id}
-            navigate={navigate}
-          />
-        ) }
-        { page.prefix === 'feed' && <FeedPage navigate={navigate} /> }
-        { page.prefix === 'auth' && <AuthPage /> }
-      </div>
-      <ScrollTopArrow />
-    </ThemeProvider>
-
+    <NavigationProvider>
+      <AuthProvider>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          <Header />
+          <Page />
+          <ScrollTopArrow />
+        </ThemeProvider>
+      </AuthProvider>
+    </NavigationProvider>
   );
 };
 
-ReactDOM.render(<AuthProvider> <App /> </AuthProvider>, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById('root'));