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/hooks/useAuth.tsx | 75 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 src/hooks/useAuth.tsx (limited to 'src/hooks') diff --git a/src/hooks/useAuth.tsx b/src/hooks/useAuth.tsx new file mode 100644 index 0000000..4f76593 --- /dev/null +++ b/src/hooks/useAuth.tsx @@ -0,0 +1,75 @@ +import React, { useState, useEffect, useContext, createContext } from 'react'; +import { User } from 'which-types'; +import { post, get } from '../requests'; + + +interface ContextType { + user: User | null, + setUser: (user: User) => void; + login: (username: string, password: string, remember?: boolean) => Promise; + logout: () => void; + isAuthenticated: () => boolean; +} + +const authContext = createContext({ + user: null, + setUser: () => {}, + login: async () => false, + logout: () => {}, + isAuthenticated: () => false +}); + +const useProvideAuth = () => { + const [user, setUser] = useState(null); + + 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(null); + localStorage.removeItem('userId'); + localStorage.removeItem('token'); + // navigate('auth'); + }; + + const isAuthenticated = () => Boolean(user); + + useEffect(() => { + if (localStorage.getItem('shouldClear')) { + localStorage.clear(); + } + const userId = localStorage.getItem('userId'); + if (userId) { + get(`/users/${userId}`).then(response => { + setUser(response.data); + }); + } + }, []); + + return { user, setUser, login, logout, isAuthenticated }; +}; + +export const AuthProvider: React.FC = ({ children }) => { + const auth = useProvideAuth(); + const { Provider } = authContext; + return {children} +}; + +export const useAuth = () => { + return useContext(authContext); +} + -- 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/hooks/useNavigate.tsx | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 src/hooks/useNavigate.tsx (limited to 'src/hooks') diff --git a/src/hooks/useNavigate.tsx b/src/hooks/useNavigate.tsx new file mode 100644 index 0000000..0650f55 --- /dev/null +++ b/src/hooks/useNavigate.tsx @@ -0,0 +1,42 @@ +import React, { useState, useContext, createContext } from 'react'; +import { User } from 'which-types'; + +export interface Page { + prefix: string; + id?: string; +} + +interface ContextType { + page: Page; + setPage: (page: Page) => void; + navigate: (prefix: string, id?: string) => void; +} + +const landingPage = { prefix: 'feed' }; + +const context = createContext({ + page: landingPage, + setPage: () => {}, + navigate: () => {} +}); + +const useProvideNavigation = () => { + const [page, setPage] = useState(landingPage); + + const navigate = (prefix: string, id?: string): void => { + setPage({ prefix, id }); + }; + + return { page, setPage, navigate }; +}; + +export const NavigationProvider: React.FC = ({ children }) => { + const navigation = useProvideNavigation(); + const { Provider } = context; + return {children}; +}; + +export const useNavigate = () => { + return useContext(context); +} + -- cgit v1.2.3 From 5ccb1ec0be71ed4efb22b4942d70d9132415f69e Mon Sep 17 00:00:00 2001 From: eug-vs Date: Tue, 30 Jun 2020 00:43:48 +0300 Subject: style: fix some eslint errors --- src/hooks/useAuth.tsx | 12 ++++++++---- src/hooks/useNavigate.tsx | 3 +-- 2 files changed, 9 insertions(+), 6 deletions(-) (limited to 'src/hooks') diff --git a/src/hooks/useAuth.tsx b/src/hooks/useAuth.tsx index 4f76593..00d0c7c 100644 --- a/src/hooks/useAuth.tsx +++ b/src/hooks/useAuth.tsx @@ -1,4 +1,6 @@ -import React, { useState, useEffect, useContext, createContext } from 'react'; +import React, { + useState, useEffect, useContext, createContext +} from 'react'; import { User } from 'which-types'; import { post, get } from '../requests'; @@ -60,16 +62,18 @@ const useProvideAuth = () => { } }, []); - return { user, setUser, login, logout, isAuthenticated }; + return { + user, setUser, login, logout, isAuthenticated + }; }; export const AuthProvider: React.FC = ({ children }) => { const auth = useProvideAuth(); const { Provider } = authContext; - return {children} + return {children}; }; export const useAuth = () => { return useContext(authContext); -} +}; diff --git a/src/hooks/useNavigate.tsx b/src/hooks/useNavigate.tsx index 0650f55..9513f13 100644 --- a/src/hooks/useNavigate.tsx +++ b/src/hooks/useNavigate.tsx @@ -1,5 +1,4 @@ import React, { useState, useContext, createContext } from 'react'; -import { User } from 'which-types'; export interface Page { prefix: string; @@ -38,5 +37,5 @@ export const NavigationProvider: React.FC = ({ children }) => { export const useNavigate = () => { return useContext(context); -} +}; -- cgit v1.2.3 From b31ed66aafbe1d5dbe70d0cdfd70864204510d81 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Tue, 30 Jun 2020 01:27:39 +0300 Subject: fix: re-implement navigation logic --- src/hooks/useAuth.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'src/hooks') diff --git a/src/hooks/useAuth.tsx b/src/hooks/useAuth.tsx index 00d0c7c..de64c46 100644 --- a/src/hooks/useAuth.tsx +++ b/src/hooks/useAuth.tsx @@ -33,7 +33,6 @@ const useProvideAuth = () => { 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'); @@ -45,7 +44,6 @@ const useProvideAuth = () => { setUser(null); localStorage.removeItem('userId'); localStorage.removeItem('token'); - // navigate('auth'); }; const isAuthenticated = () => Boolean(user); -- cgit v1.2.3 From e170d04d5d2c8c86d2683f3accb4feb2d94c881a Mon Sep 17 00:00:00 2001 From: eug-vs Date: Tue, 30 Jun 2020 01:34:51 +0300 Subject: style: fix linting errors --- src/hooks/useAuth.tsx | 4 ++-- src/hooks/useNavigate.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'src/hooks') diff --git a/src/hooks/useAuth.tsx b/src/hooks/useAuth.tsx index de64c46..55e142c 100644 --- a/src/hooks/useAuth.tsx +++ b/src/hooks/useAuth.tsx @@ -24,7 +24,7 @@ const authContext = createContext({ const useProvideAuth = () => { const [user, setUser] = useState(null); - const login = (username: string, password: string, remember = true): Promise => { + const login: ContextType['login'] = (username, password, remember = true) => { return post('/authentication', { strategy: 'local', username, @@ -71,7 +71,7 @@ export const AuthProvider: React.FC = ({ children }) => { return {children}; }; -export const useAuth = () => { +export const useAuth = (): ContextType => { return useContext(authContext); }; diff --git a/src/hooks/useNavigate.tsx b/src/hooks/useNavigate.tsx index 9513f13..befc529 100644 --- a/src/hooks/useNavigate.tsx +++ b/src/hooks/useNavigate.tsx @@ -22,7 +22,7 @@ const context = createContext({ const useProvideNavigation = () => { const [page, setPage] = useState(landingPage); - const navigate = (prefix: string, id?: string): void => { + const navigate: ContextType['navigate'] = (prefix, id?) => { setPage({ prefix, id }); }; @@ -35,7 +35,7 @@ export const NavigationProvider: React.FC = ({ children }) => { return {children}; }; -export const useNavigate = () => { +export const useNavigate = (): ContextType => { return useContext(context); }; -- cgit v1.2.3