From f607b6762cf11b4e50e24380c000d00d2ffdbace Mon Sep 17 00:00:00 2001 From: ddelpiano Date: Fri, 23 May 2025 12:30:50 +0200 Subject: [PATCH 1/5] adding hook to check user data --- src/App.jsx | 38 ++++++++++++++++++++------------------ 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index fd91dbec..14b3232d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -43,25 +43,27 @@ function MainContent() { const cookiesInfo = JSON.parse(localStorage.getItem(API_CONFIG.SESSION_DATA.COOKIE)); const { user, setUserData } = useContext(GlobalDataContext); - // check if cookie is expired - if (!user) { - const sessionCookie = cookies.session; - const expires = new Date(cookiesInfo?.expires); - const today = new Date(); - if (sessionCookie === cookiesInfo?.value && expires > today) { - const userData = JSON.parse(localStorage.getItem(API_CONFIG.SESSION_DATA.SETTINGS)); - setUserData({ - name: userData['groupname'], - id: userData['orcid'], - email: userData?.emails[0]?.email, - role: userData['own-role'], - groupname: userData['groupname'], - settings: userData - }); - } else { - setUserData({}); + useEffect(() => { + // check if cookie is expired + if (!user) { + const sessionCookie = cookies.session; + const expires = new Date(cookiesInfo?.expires); + const today = new Date(); + if (sessionCookie === cookiesInfo?.value && expires > today) { + const userData = JSON.parse(localStorage.getItem(API_CONFIG.SESSION_DATA.SETTINGS)); + setUserData({ + name: userData['groupname'], + id: userData['orcid'], + email: userData?.emails[0]?.email, + role: userData['own-role'], + groupname: userData['groupname'], + settings: userData + }); + } else { + setUserData({}); + } } - } + }, [cookies, cookiesInfo, setUserData, user]); return ( Date: Fri, 23 May 2025 12:57:22 +0200 Subject: [PATCH 2/5] aligning user and session check across components --- src/App.jsx | 91 +++++++++++++++++++++++++++++++++-------------------- 1 file changed, 57 insertions(+), 34 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 14b3232d..39597bbf 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -8,7 +8,7 @@ import { useLocation, } from "react-router-dom"; import theme from "./theme"; -import PropTypes from 'prop-types'; +import PropTypes from "prop-types"; import Header from "./components/Header"; import Footer from "./components/Footer"; import Login from "./components/Auth/Login"; @@ -27,7 +27,7 @@ import TermActivity from "./components/term_activity/TermActivity"; import OrganizationsCurieEditor from "./components/CurieEditor/OrganizationCurieEditor"; import { handleOrcidLogin } from "./api/endpoints"; import { GlobalDataContext } from "./contexts/DataContext"; -import { useCookies } from 'react-cookie' +import { useCookies } from "react-cookie"; import { API_CONFIG } from "./config"; const PageContainer = ({ children }) => { @@ -39,31 +39,39 @@ const PageContainer = ({ children }) => { }; function MainContent() { - const [cookies] = useCookies(['session']) - const cookiesInfo = JSON.parse(localStorage.getItem(API_CONFIG.SESSION_DATA.COOKIE)); const { user, setUserData } = useContext(GlobalDataContext); - useEffect(() => { - // check if cookie is expired - if (!user) { - const sessionCookie = cookies.session; - const expires = new Date(cookiesInfo?.expires); - const today = new Date(); - if (sessionCookie === cookiesInfo?.value && expires > today) { - const userData = JSON.parse(localStorage.getItem(API_CONFIG.SESSION_DATA.SETTINGS)); - setUserData({ - name: userData['groupname'], - id: userData['orcid'], - email: userData?.emails[0]?.email, - role: userData['own-role'], - groupname: userData['groupname'], - settings: userData - }); - } else { - setUserData({}); + React.useEffect(() => { + (async () => { + const userSettings = JSON.parse( + localStorage.getItem(API_CONFIG.SESSION_DATA.SETTINGS) + ); + if (userSettings) { + try { + const userData = await requestUserSettings(userSettings?.groupname); + setUserData({ + name: userData["groupname"], + id: userData["orcid"], + email: userData?.emails[0]?.email, + role: userData["own-role"], + groupname: userData["groupname"], + settings: userData, + }); + navigate("/"); + } catch (error) { + console.error("Error fetching user settings:", error); + localStorage.removeItem(API_CONFIG.SESSION_DATA.SETTINGS); + localStorage.removeItem(API_CONFIG.SESSION_DATA.COOKIE); + removeCookie("session", { path: "/" }); + setErrors((prev) => ({ + ...prev, + auth: "Session expired. Please log in again.", + })); + } } - } - }, [cookies, cookiesInfo, setUserData, user]); + })(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); return ( } /> } /> } /> - } /> - } /> + + + + } + /> + + + + } + /> @@ -151,13 +173,15 @@ const Layout = ({ children }) => { useEffect(() => { const params = new URLSearchParams(location.search); const code = params.get("code"); - if (code) {(async () => { - try { - const response = await handleOrcidLogin(code); - localStorage.setItem("token", response.token); - } catch (error) { - console.log("error: ", error) - }})(); + if (code) { + (async () => { + try { + const response = await handleOrcidLogin(code); + localStorage.setItem("token", response.token); + } catch (error) { + console.log("error: ", error); + } + })(); } }, [location]); @@ -179,7 +203,6 @@ const Layout = ({ children }) => { }; function App() { - return ( From 181d7ef2b59edc7e21c0ef58080562966d4f3991 Mon Sep 17 00:00:00 2001 From: ddelpiano Date: Fri, 23 May 2025 13:04:15 +0200 Subject: [PATCH 3/5] aligning user and session check across components 2 --- src/App.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 39597bbf..d284cfb4 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -27,7 +27,6 @@ import TermActivity from "./components/term_activity/TermActivity"; import OrganizationsCurieEditor from "./components/CurieEditor/OrganizationCurieEditor"; import { handleOrcidLogin } from "./api/endpoints"; import { GlobalDataContext } from "./contexts/DataContext"; -import { useCookies } from "react-cookie"; import { API_CONFIG } from "./config"; const PageContainer = ({ children }) => { @@ -41,7 +40,7 @@ const PageContainer = ({ children }) => { function MainContent() { const { user, setUserData } = useContext(GlobalDataContext); - React.useEffect(() => { + useEffect(() => { (async () => { const userSettings = JSON.parse( localStorage.getItem(API_CONFIG.SESSION_DATA.SETTINGS) From 6d003f9905e6e2adce8fa01c2998f9165b14693d Mon Sep 17 00:00:00 2001 From: ddelpiano Date: Fri, 23 May 2025 13:23:42 +0200 Subject: [PATCH 4/5] aligning user and session check across components 3 --- src/App.jsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index d284cfb4..d7598f82 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -28,6 +28,9 @@ import OrganizationsCurieEditor from "./components/CurieEditor/OrganizationCurie import { handleOrcidLogin } from "./api/endpoints"; import { GlobalDataContext } from "./contexts/DataContext"; import { API_CONFIG } from "./config"; +import { requestUserSettings } from "./components/Auth/utils"; +import { useCookies } from 'react-cookie'; + const PageContainer = ({ children }) => { return ( @@ -38,7 +41,10 @@ const PageContainer = ({ children }) => { }; function MainContent() { - const { user, setUserData } = useContext(GlobalDataContext); + + const { setUserData } = useContext(GlobalDataContext); + // eslint-disable-next-line no-unused-vars + const [existingCookies, setCookie, removeCookie] = useCookies(['session']); useEffect(() => { (async () => { @@ -56,16 +62,11 @@ function MainContent() { groupname: userData["groupname"], settings: userData, }); - navigate("/"); } catch (error) { console.error("Error fetching user settings:", error); localStorage.removeItem(API_CONFIG.SESSION_DATA.SETTINGS); localStorage.removeItem(API_CONFIG.SESSION_DATA.COOKIE); removeCookie("session", { path: "/" }); - setErrors((prev) => ({ - ...prev, - auth: "Session expired. Please log in again.", - })); } } })(); From 1f8b0add0d251f5d64924af0b9373d1d7e948c1d Mon Sep 17 00:00:00 2001 From: ddelpiano Date: Fri, 23 May 2025 16:32:00 +0200 Subject: [PATCH 5/5] replacing href with navigate to keep the app state --- src/components/Header/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index d5a13c24..538daf69 100644 --- a/src/components/Header/index.jsx +++ b/src/components/Header/index.jsx @@ -322,7 +322,7 @@ const Header = () => { - + navigate("/")} style={{ cursor: 'pointer' }}> Interlex