When you log in, there is no problem on the page entered with the first redirect. According to the console logs, the context is full. However, when you click on any page using the “Navbar”, the data received with the context returns null, and you are redirected to the Login page. I do not provide any method that will reset the data in the context. But I don’t understand why it resets.
Not: For session control, the isEnable variable in the context is checked.
index.js =>
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<UserProvider>
<BrowserRouter>
<App />
</BrowserRouter>
</UserProvider>
</React.StrictMode>
);
app.js =>
function App() {
const { contextUser } = useContext(UserContext);
const theme = createTheme({
palette: {
background: {
default: '#gray', // Background color of the app
},
},
});
return (
<>
<Navbar/>{/* Router in the Navbar */}
<Routes>
{contextUser.isEnable? (
<>
<Route path={"/"} element={<PatientQuery key={10}/>}/>
<Route path={"/Rapor_Sorgulama"} element={<PatientQuery key={10}/>}/>
<Route path={"/Hasta_Listesi"} element={<PatientList key={11}/>}/>
<Route path={"/Rapor_Tanımlama"} element={<ReportDefine key={12}/>}/>
<Route path={"/Tüm_Raporlar"} element={<AllReports key={13}/>}/>
<Route path="/MASTER" element={<Master/>} />
<Route path="*" element={<ErrorPage/>} />
</>
) : (
<>
<Route path={"/"} element={<PatientQuery key={10}/>}/>
<Route path="/Rapor_Sorgulama" element={<PatientQuery key={1}/>} />
<Route path="/Hasta_Listesi" element={<Login key={2}/>} />
<Route path="/Rapor_Tanımlama" element={<Login key={3}/>}/>
<Route path="/Tüm_Raporlar" element={<Login key={4}/>}/>
<Route path="/Login" element={<Login key={5}/>}/>
<Route path="/SignUp" element={<SignUp key={6}/>}/>
<Route path="*" element={<ErrorPage key={7}/>}/>
{/* <Navigate to="/error" /> */}
</>
)}
{/*
my_pages.map((page,index) => (
<Route path={`/${page}`} element={components[index]}/>
))
*/}
</Routes>
</>
);
}
export default App;
context/Context.js =>
import React, { createContext, useContext, useState } from 'react';
// User Authentication Context
export const UserContext = createContext();
export function UserProvider({ children }) {
const [contextUser, setContextUser] = useState({
fullName: "",
email: "",
token: "",
image: null,
authorities: [],
isEnable: null
});
const logIn = (userData) => {
setContextUser({
fullName: userData.user.fullName,
email: userData.user.email,
token: userData.token,
image: null,
authorities: userData.user.authorities,
isEnable: true
});
logContext()
};
const logContext = function () {
console.log(contextUser)
};
const logOut = () => {
setContextUser({
fullName: "deleted",
email: "",
token: "",
image: null,
authorities: [""],
isEnable: false
});
};
return (
<UserContext.Provider value={{ contextUser, logIn, logContext }}>
{children}
</UserContext.Provider>
);
}
Navbar.js =>
export default function Navbar() {
const my_pages = ['Rapor_Sorgulama', 'Hasta_Listesi', 'Rapor_Tanımlama', 'Tüm_Raporlar'];
const components = [
<PatientQuery key={my_pages[0]}></PatientQuery>,
<PatientList key={my_pages[1]}></PatientList>,
<ReportDefine key={my_pages[2]}></ReportDefine>,
<AllReports key={my_pages[3]}></AllReports>,
<Login key={5}></Login>,
<SignUp key={6}></SignUp>,
];
const { contextUser } = useContext(UserContext);
console.log("contextUser: ")
console.log(contextUser)
const my_settings = ['Profil', 'Hesap', 'Çıkış'];
const [anchorElUser, setAnchorElUser] = useState(null);
const handleOpenSettingsMenu = (event) => {
setAnchorElUser(event.currentTarget);
};
const handleCloseSettingsMenu = () => {
setAnchorElUser(null);
};
const myTheme = createTheme({
palette: {
mode: 'dark',
primary: {
main: '#002092',
}, secondary: {
main: '#002092',
},
},
});
return (
<>
<ThemeProvider theme={myTheme}>
<AppBar position="static" style={{ backgroundColor: '#002090' }}>
<Toolbar>
<ScienceTwoToneIcon></ScienceTwoToneIcon>
<Typography
variant="h5"
noWrap
component="a"
href="/"
sx={{
mr: 2,
fontWeight: 200,
fontFamily: 'roboto',
color: 'white',
letterSpacing: '.2rem',
textDecoration: 'none',
}}
>
LABREPORT
</Typography>
<Box sx={{ flexWrap: 'wrap', flexGrow: 1, display: 'flex' }}>
{my_pages.map((page) => (
<Button
key={my_pages}
sx={{ my: 2, color: 'whitesmoke', display: 'block', paddingRight: '20px' }}
href={`/${page}`}
>
{page}
</Button>
))}
</Box>
<Box sx={{ flexWrap: 'wrap', flexGrow: 1, display: 'flex' }}>
{
(contextUser.isEnable)? (null) : (
<>
<Button
sx={{ my: 2, color: 'whitesmoke', display: 'block', paddingRight: '15px' }}
href={`/login`}
>
Login
</Button>
<Button
sx={{ my: 2, color: 'whitesmoke', display: 'block', paddingRight: '15px' }}
href={`/SignUp`}
>
SignUp
</Button>
</>
)
}
{
// !(contextUser.authorities[0] === "ROLE_MASTER") ? (null) : (
!(contextUser.authorities[0] === "ROLE_MASTER" && contextUser.authorities != null) ? (null) : (
<>
<Button
sx={{ my: 2, color: 'tomato', display: 'block', paddingRight: '20px' }}
href={`/MASTER`}
>
MASTER
</Button>
</>
)
}
</Box>
<Box sx={{ flexGrow: 0 }}>
<Tooltip title="Open my_settings">
<IconButton onClick={handleOpenSettingsMenu} sx={{ p: 0 }}>
<Avatar alt="" src="" />
</IconButton>
</Tooltip>
<Menu
sx={{ mt: '55px' }}
id="menu-appbar"
anchorEl={anchorElUser}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
open={Boolean(anchorElUser)}
onClose={handleCloseSettingsMenu}
>
{my_settings.map((setting) => (
<MenuItem key={setting} onClick={handleCloseSettingsMenu}>
<Typography textAlign="center">{setting}</Typography>
</MenuItem>
))}
</Menu>
</Box>
</Toolbar>
</AppBar>
</ThemeProvider>
</>
);
}
Login.js =>
export default function Login() {
const [user,setUser] = useState({
email: "error",
password: 'error',
})
const { contextUser, logIn, logOut } = useContext(UserContext);
const handleSubmit = (event) => {
// event.preventDefault();
// const data = new FormData(user.email,user.password);
fetch('/auth/login', {//AuthRequest is Object
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify([user.email,user.password])
})
.then(res => {//res={user:{k:v}, token:""}
if (res.ok) return res.json();
else alert("Giriş Başarısız");
throw new Error('Network response was not ok.');
})
// .then(res => logIn(res.user))
.then(res =>logIn(res))
.then(console.log(contextUser.user))
.catch(err => console.log(err.message));
};
return (
<ThemeProvider theme={defaultTheme}>
<Container component="main" maxWidth="xs" sx={{ backgroundColor: 'yourBackgroundColor' }}>
<CssBaseline />
<Box
sx={{
marginTop: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Teknisyen Girişi
</Typography>
<Box noValidate sx={{ mt: 1 }}>
{/* component="form" onSubmit={handleSubmit} */}
<TextField
margin="normal"
required
fullWidth
id="email"
label="Email Adresi"
name="email"
autoComplete="email"
autoFocus
onChange = {(e) => setUser({...user, email: e.target.value})}
/>
<TextField
margin="normal"
required
fullWidth
name="password"
label="Şifre"
type="password"
id="password"
autoComplete="current-password"
onChange = {(e) => setUser({...user, password: e.target.value})}
/>
<Button
type="submit"
fullWidth
variant="contained"
onClick={handleSubmit}
sx={{ mt: 3, mb: 2 }}
>
Giriş Yap
</Button>
<Grid container>
<Grid item xs>
<Link href="#" variant="body2">
Şifreni hatırlamıyor musun?
</Link>
</Grid>
<Grid item>
<Link href={"/SignUp"} variant="body2">
{"Yeni misin?"}
</Link>
</Grid>
</Grid>
</Box>
</Box>
<Copyright sx={{ mt: 8, mb: 4 }} />
</Container>
</ThemeProvider>
);
}
Could it be wrong that navbar buttons use “href={/${page}}”? I think “context.js” was re-rendered between redirects. But I dont have idea for the solution.