From 1f646377c35b65b97d6eeebb1e88f6d8307e1ef0 Mon Sep 17 00:00:00 2001 From: eug-vs 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(); const [page, setPage] = useState({ 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 => { - 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 ( @@ -98,14 +63,12 @@ const App: React.FC = () => {
{ page.prefix === 'profile' && ( ) } - { page.prefix === 'feed' && } - { page.prefix === 'auth' && } + { page.prefix === 'feed' && } + { page.prefix === 'auth' && }
-- cgit v1.2.3 From aa63dea15c71ab014b4b57010574c7abf1f9628b Mon Sep 17 00:00:00 2001 From: eug-vs 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({ 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 ( -
+
{ page.prefix === 'profile' && ( { ); }; -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render( , document.getElementById('root')); -- cgit v1.2.3 From 1499c0126d1a7a2377b0267b761479100c636ee9 Mon Sep 17 00:00:00 2001 From: eug-vs 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({ 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 ( - - -
-
- { page.prefix === 'profile' && ( - - ) } - { page.prefix === 'feed' && } - { page.prefix === 'auth' && } -
- - - + + + + +
+ + + + + ); }; -ReactDOM.render( , document.getElementById('root')); +ReactDOM.render(, document.getElementById('root')); -- cgit v1.2.3