99 lines
2.2 KiB
TypeScript
99 lines
2.2 KiB
TypeScript
//Eknoor singh
|
|
//date:- 12-Feb-2025
|
|
//Made a special page for showing the profile details
|
|
|
|
import { useEffect } from "react";
|
|
import {
|
|
Container,
|
|
Typography,
|
|
CircularProgress,
|
|
Card,
|
|
CardContent,
|
|
Grid,
|
|
Avatar,
|
|
Box,
|
|
} from "@mui/material";
|
|
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { AppDispatch, RootState } from "../../redux/store/store";
|
|
import { fetchAdminProfile } from "../../redux/slices/profileSlice";
|
|
|
|
const ProfilePage = () => {
|
|
//Eknoor singh
|
|
//date:- 12-Feb-2025
|
|
//Dispatch is called and user, isLoading, and error from Authstate Interface
|
|
const dispatch = useDispatch<AppDispatch>();
|
|
const { user, isLoading, error } = useSelector(
|
|
(state: RootState) => state?.profile
|
|
);
|
|
|
|
useEffect(() => {
|
|
dispatch(fetchAdminProfile());
|
|
}, [dispatch]);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
height: "100vh",
|
|
}}
|
|
>
|
|
<CircularProgress />
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<Container>
|
|
<Typography variant="h5" color="error" gutterBottom>
|
|
<h2>An error occurred while loading profile</h2>
|
|
</Typography>
|
|
</Container>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Container sx={{ py: 4 }}>
|
|
<Typography variant="h4" gutterBottom>
|
|
Profile
|
|
</Typography>
|
|
<Card sx={{ maxWidth: 600, margin: "0 auto" }}>
|
|
<CardContent>
|
|
<Grid container spacing={2} alignItems="center">
|
|
<Grid item>
|
|
<Avatar
|
|
//Eknoor singh
|
|
//date:- 12-Feb-2025
|
|
//user is called for name and email
|
|
alt={user?.name || "User Avatar"}
|
|
src={"/static/images/avatar/7.jpg"}
|
|
sx={{ width: 80, height: 80 }}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs>
|
|
<Typography variant="h6">
|
|
{user?.name || "N/A"}
|
|
</Typography>
|
|
<Typography variant="body2" color="text.secondary">
|
|
Email: {user?.email || "N/A"}
|
|
</Typography>
|
|
<Typography variant="body2" color="text.secondary">
|
|
Phone: {user?.phone || "N/A"}
|
|
</Typography>
|
|
<Typography variant="body2" color="text.secondary">
|
|
Role: <b>{user?.role || "N/A"}</b>
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</CardContent>
|
|
</Card>
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default ProfilePage;
|