Skip to content

ILEX-110 user data stored per session #111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ddelpiano merged 4 commits into from
Jun 13, 2025
Merged

ILEX-110 user data stored per session #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
989f201
ILEX-110 handle error when user is setting back to null
Aiga115 Jun 9, 2025
af8bacf
Merge branch 'devel' into feature/ILEX-110
Aiga115 Jun 12, 2025
7480eaf
ILEX-110 a small change
Aiga115 Jun 12, 2025
63c189b
ILEX-110 fix linting
Aiga115 Jun 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 69 additions & 23 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { useEffect, useContext } from "react";
import CssBaseline from "@mui/material/CssBaseline";
import { Box, ThemeProvider } from "@mui/material";
import { Box, ThemeProvider, CircularProgress } from "@mui/material";
import {
BrowserRouter as Router,
Routes,
Route,
useLocation,
useNavigate
} from "react-router-dom";
import theme from "./theme";
import PropTypes from "prop-types";
Expand Down Expand Up @@ -40,39 +41,72 @@ const PageContainer = ({ children }) => {
);
};

const ProtectedRoute = ({ children }) => {
const { user } = useContext(GlobalDataContext);
const navigate = useNavigate();

useEffect(() => {
if (!user) {
navigate('/login');
}
}, [user, navigate]);

return user ? children : null;
};

function MainContent() {

const { setUserData } = useContext(GlobalDataContext);
const { setUserData, loading } = useContext(GlobalDataContext);
const navigate = useNavigate();
// eslint-disable-next-line no-unused-vars
const [existingCookies, setCookie, removeCookie] = useCookies(['session']);

useEffect(() => {
(async () => {
const userSettings = JSON.parse(
localStorage.getItem(API_CONFIG.SESSION_DATA.SETTINGS)
);
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"],
name: userData['groupname'],
id: userData['orcid'],
email: userData?.emails[0]?.email,
role: userData["own-role"],
groupname: userData["groupname"],
settings: userData,
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: "/" });
removeCookie('session', { path: '/' });
// setErrors((prev) => ({
// ...prev,
// auth: "Session expired. Please log in again.",
// }));
}
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

if (loading) {
return (
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
width: "100%",
height: "100vh"
}}
>
<CircularProgress />
</div>
)
}

return (
<Box
sx={{
Expand Down Expand Up @@ -110,17 +144,21 @@ function MainContent() {
<Route
path="/organizations"
element={
<PageContainer>
<Organizations />
</PageContainer>
<ProtectedRoute>
<PageContainer>
<Organizations />
</PageContainer>
</ProtectedRoute>
}
/>
<Route
path="/curie-editor"
element={
<PageContainer>
<CurieEditor />
</PageContainer>
<ProtectedRoute>
<PageContainer>
<CurieEditor />
</PageContainer>
</ProtectedRoute>
}
/>
<Route
Expand All @@ -146,17 +184,21 @@ function MainContent() {
<Route
path="/organizations/:title"
element={
<PageContainer>
<SingleOrganization />
</PageContainer>
<ProtectedRoute>
<PageContainer>
<SingleOrganization />
</PageContainer>
</ProtectedRoute>
}
/>
<Route
path="/organizations/:title/curie-editor"
element={
<PageContainer>
<OrganizationsCurieEditor />
</PageContainer>
<ProtectedRoute>
<PageContainer>
<OrganizationsCurieEditor />
</PageContainer>
</ProtectedRoute>
}
/>
</Routes>
Expand Down Expand Up @@ -219,6 +261,10 @@ PageContainer.propTypes = {
children: PropTypes.node.isRequired,
};

ProtectedRoute.propTypes = {
children: PropTypes.node.isRequired,
};

Layout.propTypes = {
children: PropTypes.node.isRequired,
};
Expand Down
31 changes: 0 additions & 31 deletions src/components/Auth/Login.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,37 +41,6 @@ const Login = () => {
const { setUserData } = React.useContext(GlobalDataContext);
const navigate = useNavigate();

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.",
}));
}
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);


React.useEffect(() => {
let eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
let eventer = window[eventMethod];
Expand Down
53 changes: 30 additions & 23 deletions src/components/Header/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,8 +106,8 @@ const styles = {
},

avatar: {
border: '0.0469rem solid rgba(0,0,0,0.08)',
width: '2.5rem',
border: '0.0469rem solid rgba(0,0,0,0.08)',
width: '2.5rem',
height: '2.5rem',
'& .MuiSvgIcon-root': {
width: '1.5rem',
Expand All @@ -121,7 +121,8 @@ const NavMenu = [
{
label: 'Organizations',
icon: <OrganizationsIcon />,
href: '/organizations'
href: '/organizations',
protected: true
},
{
label: 'Term activity',
Expand Down Expand Up @@ -257,18 +258,22 @@ const Header = () => {
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

React.useEffect(() => {
console.log("Stored user in context ", user)
if(user !== null && user?.groupname !== undefined) {
if (user !== null && user?.groupname !== undefined) {
setIsLoggedIn(true)
} else {
setIsLoggedIn(false)
}
}, [user])

const filteredNavMenu = NavMenu.filter(menu =>
!menu.protected || (menu.protected && isLoggedIn)
);

return (
<>
<Box sx={styles.root}>
Expand All @@ -293,7 +298,7 @@ const Header = () => {
}}
>
<List>
{NavMenu.map((menu, index) => (
{filteredNavMenu.map((menu, index) => (
<ListItem key={index} disablePadding>
<ListItemButton onClick={(e) => handleMenuClick(e, menu)}>
<ListItemIcon>
Expand All @@ -303,23 +308,25 @@ const Header = () => {
</ListItemButton>
</ListItem>
))}
<Divider sx={{ mt: 0.5, mb: 0.5, color: gray200 }} />
<ListItem disablePadding onClick={handleClickCurieEditor}>
<ListItemButton>
<ListItemIcon>
<SortIcon />
</ListItemIcon>
<ListItemText primary={'Curie Editor'} />
</ListItemButton>
</ListItem>
<ListItem disablePadding onClick={handleOpenEditBulkTerms}>
<ListItemButton>
<ListItemIcon>
<ModeEditOutlineOutlinedIcon fontSize='small' />
</ListItemIcon>
<ListItemText primary={'Terms editor'} />
</ListItemButton>
</ListItem>
{isLoggedIn && (<>
<Divider sx={{ mt: 0.5, mb: 0.5, color: gray200 }} />
<ListItem disablePadding onClick={handleClickCurieEditor}>
<ListItemButton>
<ListItemIcon>
<SortIcon />
</ListItemIcon>
<ListItemText primary={'Curie Editor'} />
</ListItemButton>
</ListItem>
<ListItem disablePadding onClick={handleOpenEditBulkTerms}>
<ListItemButton>
<ListItemIcon>
<ModeEditOutlineOutlinedIcon fontSize='small' />
</ListItemIcon>
<ListItemText primary={'Terms editor'} />
</ListItemButton>
</ListItem>
</>)}
</List>
</Popover>
<a onClick={() => navigate("/")} style={{ cursor: 'pointer' }}>
Expand Down
17 changes: 15 additions & 2 deletions src/contexts/DataContext.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import PropTypes from 'prop-types';
import {createContext, useState} from "react";
import {createContext, useState, useEffect} from "react";
import { API_CONFIG } from '../config';

const GlobalDataContext = createContext();

Expand All @@ -11,6 +12,7 @@ const GlobalDataProvider = ({ children }) => {
const [predicatesSingleTermState, setPredicatesSingleTermState] = useState(false);
const [editBulkSearchFilters, setEditBulkSearchFilters] = useState([]);
const [storedSearchTerm, setStoredSearchTerm] = useState("");
const [loading, setLoading] = useState(true);
const setOntologyData = (ontology) => {
setActiveOntology(ontology);
};
Expand Down Expand Up @@ -39,6 +41,16 @@ const GlobalDataProvider = ({ children }) => {
setStoredSearchTerm(value)
}

useEffect(() => {
const userSettings = localStorage.getItem(API_CONFIG.SESSION_DATA.SETTINGS);

if(userSettings) {
setUser(JSON.parse(userSettings))
}

setLoading(false)
}, [])

const dataContextValue = {
user,
setUserData,
Expand All @@ -53,7 +65,8 @@ const GlobalDataProvider = ({ children }) => {
editBulkSearchFilters,
setEditBulkSearchData,
storedSearchTerm,
updateStoredSearchTerm
updateStoredSearchTerm,
loading
};

return (
Expand Down