From 700b332bbd8a9ae3236243fc9de3941e51cdae1a Mon Sep 17 00:00:00 2001 From: Michael Caxias Date: Mon, 6 Mar 2023 19:56:11 -0300 Subject: [PATCH 1/2] fix: check if user is logged in validation --- src/App.jsx | 26 +++++++---- src/components/Header/Header.jsx | 35 ++++++++------- src/components/LoginButton/LoginButton.jsx | 7 +-- src/context/PrivateRoute.jsx | 2 +- src/context/Provider.jsx | 34 +++++++++------ src/index.js | 12 +++-- src/wrapper/LoginWrap.jsx | 51 ++++++++++++++++++++++ 7 files changed, 116 insertions(+), 51 deletions(-) create mode 100644 src/wrapper/LoginWrap.jsx diff --git a/src/App.jsx b/src/App.jsx index 3c4cd70..9602a58 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -8,20 +8,30 @@ import Home from './pages/Home/Home'; import PrivacyPolicy from './pages/PrivacyPolicy/PrivacyPolicy'; import TermsAndConditions from './pages/TermsAndConditions/TermsAndConditions'; import PrivateRoute from './context/PrivateRoute'; +import LoginWrap from './wrapper/LoginWrap'; import './App.scss'; export default function App() { return ( - - } /> - } /> - } /> - } /> - } /> - } /> - + + + } /> + + + + } + /> + } /> + } /> + } /> + } /> + + ); } diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index f395228..fe185b4 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -11,7 +11,7 @@ import { useNavigate } from 'react-router'; import './Header.scss'; const Header = () => { - const { userImage, userName, userEmail, isSignedIn } = useContext(MyContext); + const { userInfo, isSignedIn } = useContext(MyContext); const [open, setOpen] = React.useState(false); const navigate = useNavigate(); @@ -30,30 +30,33 @@ const Header = () => { onClick={() => navigate('/')} tabIndex={0} role="link" - aria-label="Voltar para página inicial" + aria-label="Voltar para página inicial" > - +

Trybe Scheduler

-
+
{isSignedIn ? ( <> -
-
-

{userName}

-
{userEmail}
-
+
+
+

{userInfo.name}

+
{userInfo.email}
+
- -
+ +
) : ( -
navigate('/login')}> +
navigate('/login')} + >

Entrar

diff --git a/src/components/LoginButton/LoginButton.jsx b/src/components/LoginButton/LoginButton.jsx index 081b890..7f9c01c 100644 --- a/src/components/LoginButton/LoginButton.jsx +++ b/src/components/LoginButton/LoginButton.jsx @@ -13,7 +13,7 @@ import './LoginButton.scss'; const SCOPES = 'https://www.googleapis.com/auth/calendar https://www.googleapis.com/auth/userinfo.profile'; export default function LoginButton() { - const { setUserImage, setUserName, setUserEmail, changeSignedInState, setAccessToken } = useContext(MyContext); + const { changeSignedInState, setAccessToken, setUserInfo } = useContext(MyContext); const navigate = useNavigate(); const login = useGoogleLogin({ @@ -31,10 +31,7 @@ export default function LoginButton() { }; const updateUserInfo = (userInfo) => { - const { picture, name, email } = userInfo; - setUserImage(picture); - setUserName(name); - setUserEmail(email); + setUserInfo(userInfo); }; const requestUserInfo = async (response) => { diff --git a/src/context/PrivateRoute.jsx b/src/context/PrivateRoute.jsx index ef5af54..a3b2fdb 100644 --- a/src/context/PrivateRoute.jsx +++ b/src/context/PrivateRoute.jsx @@ -12,7 +12,7 @@ const PrivateRoute = ({ children }) => { function validateWorkflow() { if (!isSignedIn) { - return ; + return ; } return children; } diff --git a/src/context/Provider.jsx b/src/context/Provider.jsx index 795600b..49abdf6 100644 --- a/src/context/Provider.jsx +++ b/src/context/Provider.jsx @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import React, { useState, createContext, useRef, useMemo } from 'react'; +import React, { useState, createContext, useRef, useMemo, useEffect } from 'react'; import usePersistedState from '../hooks/usePersistedState'; const blankImage = 'https://i.imgur.com/qEgz28w.png'; @@ -16,26 +16,19 @@ export function Provider({ children }) { const [scheduleValue, changeScheduleValue] = useState(''); const [links, setLinks] = useState([]); - const [userImage, setUserImage] = usePersistedState('userImage', blankImage); - const [userName, setUserName] = usePersistedState('userName', 'Carregando...'); - const [userEmail, setUserEmail] = usePersistedState('userEmail', 'Carregando...'); + const [userInfo, setUserInfo] = useState({ picture: blankImage, name: 'Carregando...', email: 'Carregando...' }); - const [loading, setLoading] = useState(false); + const [loading, setLoading] = useState(true); const scheduleElementRef = useRef(null); - const context = useMemo(() => ({ + const context = useMemo( + () => ({ minutes, isSignedIn, colorId, scheduleValue, setMinutes, - setUserImage, - setUserName, - setUserEmail, - userImage, - userName, - userEmail, changeSignedInState, setColorId, changeScheduleValue, @@ -45,8 +38,21 @@ export function Provider({ children }) { loading, setLoading, accessToken, - setAccessToken - }), [accessToken, minutes, isSignedIn, colorId, scheduleValue, userImage, userName, userEmail, links, loading]); + setAccessToken, + userInfo, + setUserInfo, + }), + [ + accessToken, + minutes, + isSignedIn, + colorId, + scheduleValue, + links, + loading, + userInfo, + ] + ); return ( diff --git a/src/index.js b/src/index.js index 033cacb..773cacb 100644 --- a/src/index.js +++ b/src/index.js @@ -8,11 +8,9 @@ const { REACT_APP_CLIENT_ID } = process.env; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - - - - - - - + + + + + ); diff --git a/src/wrapper/LoginWrap.jsx b/src/wrapper/LoginWrap.jsx new file mode 100644 index 0000000..aa1022c --- /dev/null +++ b/src/wrapper/LoginWrap.jsx @@ -0,0 +1,51 @@ +import React, { useContext, useEffect } from 'react'; +import PropTypes from 'prop-types'; +import axios from 'axios'; +import { MyContext } from '../context/Provider'; +import { useNavigate } from 'react-router'; +import Loading from '../components/Loading/Loading'; + +export default function LoginWrap({ children }) { + const { setUserInfo, changeSignedInState, loading, setLoading } = useContext(MyContext); + const navigate = useNavigate(); + + const requestUserInfo = async () => { + const accessToken = localStorage.getItem('accessToken'); + + try { + const userInfo = await axios.get( + 'https://www.googleapis.com/oauth2/v3/userinfo', + { + headers: { + Authorization: `Bearer ${accessToken}`, + }, + } + ); + + setUserInfo(userInfo.data); + changeSignedInState(true); + + } catch (error) { + if (error.response.status === 401) { + changeSignedInState(false); + navigate('/'); + } + } finally { + setLoading(false); + } + }; + + useEffect(() => { + requestUserInfo(); + }, []); + + if (loading) return ; + + return ( +
{children}
+ ); +} + +LoginWrap.propTypes = { + children: PropTypes.node.isRequired, +}; From 54ae2dc0d8284f72f1fe491dd377eb1e516a9891 Mon Sep 17 00:00:00 2001 From: Michael Caxias Date: Mon, 6 Mar 2023 19:58:49 -0300 Subject: [PATCH 2/2] fix code smells --- src/context/Provider.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/context/Provider.jsx b/src/context/Provider.jsx index 49abdf6..a4548a5 100644 --- a/src/context/Provider.jsx +++ b/src/context/Provider.jsx @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import React, { useState, createContext, useRef, useMemo, useEffect } from 'react'; +import React, { useState, createContext, useRef, useMemo } from 'react'; import usePersistedState from '../hooks/usePersistedState'; const blankImage = 'https://i.imgur.com/qEgz28w.png';