From 1f646377c35b65b97d6eeebb1e88f6d8307e1ef0 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Mon, 29 Jun 2020 23:59:15 +0300
Subject: feat!: create useAuth hook

---
 src/index.tsx | 45 ++++-----------------------------------------
 1 file changed, 4 insertions(+), 41 deletions(-)

(limited to 'src/index.tsx')

diff --git a/src/index.tsx b/src/index.tsx
index 02f7969..f9114c3 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -17,6 +17,7 @@ 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';
 
 
 const theme = createMuiTheme({
@@ -37,9 +38,9 @@ const useStyles = makeStyles({
 });
 
 const App: React.FC = () => {
-  const [user, setUser] = React.useState<User | undefined>();
   const [page, setPage] = useState<Page>({ prefix: 'feed', id: '' });
   const classes = useStyles();
+  const user = { _id: '', avatarUrl: '' };
 
   const navigate = (prefix: string, id?: string): void => {
     if (prefix === 'profile' && !id && !user) {
@@ -55,42 +56,6 @@ const App: React.FC = () => {
     }
   };
 
-  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 />
@@ -98,14 +63,12 @@ const App: React.FC = () => {
       <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} /> }
+        { page.prefix === 'feed' && <FeedPage navigate={navigate} /> }
+        { page.prefix === 'auth' && <AuthPage /> }
       </div>
       <ScrollTopArrow />
     </ThemeProvider>
-- 
cgit v1.2.3


From aa63dea15c71ab014b4b57010574c7abf1f9628b Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Tue, 30 Jun 2020 00:08:42 +0300
Subject: feat: useAuth in header

---
 src/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/index.tsx')

diff --git a/src/index.tsx b/src/index.tsx
index f9114c3..a82a28b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -40,7 +40,7 @@ const useStyles = makeStyles({
 const App: React.FC = () => {
   const [page, setPage] = useState<Page>({ prefix: 'feed', id: '' });
   const classes = useStyles();
-  const user = { _id: '', avatarUrl: '' };
+  const { user } = useAuth();
 
   const navigate = (prefix: string, id?: string): void => {
     if (prefix === 'profile' && !id && !user) {
@@ -59,7 +59,7 @@ const App: React.FC = () => {
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
-      <Header navigate={navigate} userImage={user?.avatarUrl} />
+      <Header navigate={navigate} />
       <div className={classes.root}>
         { page.prefix === 'profile' && (
           <ProfilePage
@@ -76,5 +76,5 @@ const App: React.FC = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<AuthProvider> <App /> </AuthProvider>, document.getElementById('root'));
 
-- 
cgit v1.2.3


From 1499c0126d1a7a2377b0267b761479100c636ee9 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Tue, 30 Jun 2020 00:41:09 +0300
Subject: feat!: create useNavigate hook

---
 src/index.tsx | 71 ++++++++++++++---------------------------------------------
 1 file changed, 16 insertions(+), 55 deletions(-)

(limited to 'src/index.tsx')

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'));
 
-- 
cgit v1.2.3

