Merge pull request #7 from Ajayos/update

updated

client/src/Pages/404/index.js

@@ -4,7 +4,7 @@ import { styled } from "@mui/material/styles";
 import { Button, Typography, Container, Box } from "@mui/material";
 
 const StyledContent = styled("div")(({ theme }) => ({
-  maxWidth: 480,
+  maxWidth: 400,
   margin: "auto",
   minHeight: "100vh",
   display: "flex",

client/src/Pages/500/index.js

@@ -0,0 +1,55 @@
+import { Helmet } from "react-helmet-async";
+import { Link as RouterLink } from "react-router-dom";
+import { styled } from "@mui/material/styles";
+import { Button, Typography, Container, Box } from "@mui/material";
+
+const StyledContent = styled("div")(({ theme }) => ({
+  maxWidth: 480,
+  margin: "auto",
+  minHeight: "100vh",
+  display: "flex",
+  justifyContent: "center",
+  flexDirection: "column",
+  padding: theme.spacing(12, 0),
+}));
+
+export default function Page500() {
+  return (
+    <>
+      <Helmet>
+        <title> 500 Internal Server Error | MI LIBRO </title>
+      </Helmet>
+
+      <Container>
+        <StyledContent sx={{ textAlign: "center", alignItems: "center" }}>
+          <Typography variant="h3" paragraph>
+          There was an error, please try again later
+          </Typography>
+
+          <Box
+            component="img"
+            src={`/public/static/images/500.svg`}
+            sx={{ height: 260, mx: "auto",  marginTop: "-25%"}}
+          />
+
+          <Button
+            to="/"
+            size="large"
+            variant="contained"
+            component={RouterLink}
+          >
+            Go to Home
+          </Button>
+          <Button
+            to="/"
+            size="large"
+            variant="contained"
+            component={RouterLink}
+          >
+            Go to Home
+          </Button>
+        </StyledContent>
+      </Container>
+    </>
+  );
+}

client/src/Pages/Auth/AdminForm.js

@@ -29,15 +29,15 @@ export default function LoginForm() {
   const [errors, setErrors] = useState({});
   const [loading, setLoading] = useState(false);
 
-  useEffect(() => {
-    if(isAuthenticated) {
-      if(user) {
-        window.location.href = "/Home"
-      } else {
-        window.location.href = "/home";
-      }
-    }
-  }, [isAuthenticated]);
+  //useEffect(() => {
+  //  if(isAuthenticated) {
+  //    if(user) {
+  //      window.location.href = "/Home"
+  //    } else {
+  //      window.location.href = "/home";
+  //    }
+  //  }
+  //}, [isAuthenticated]);
 
   const handleClickShowPassword = () => {
     setShowPassword(!showPassword);
@@ -81,9 +81,10 @@ export default function LoginForm() {
         setLoading(true);
         // Login user
         var { message, status } =  AdminLogin(formData.email, formData.password);
+        console.log(message);
         if (status === 200) {
           enqueueSnackbar(message, { variant: "success" });
-          window.location.href = "/dashboard/home";
+          window.location.href = "/home";
         } else {
           enqueueSnackbar(message, { variant: "error" });
           setErrors({ email: message, password: message });

client/src/Pages/Auth/ForgotPssword.js → client/src/Pages/Auth/ForgotPassword.js

@@ -13,7 +13,7 @@ import {
 import useResponsive from "../../hooks/useResponsive";
 import PROFILE from "../../image/logo.png";
 import LOGIN_IMG from "../../image/login.png";
-import LoginForm from "./ForgotPsswordForm";
+import LoginForm from "./ForgotPasswordForm";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 
 const StyledRoot = styled("div")(({ theme }) => ({

client/src/Pages/Dashboard/AddBook.js

@@ -21,7 +21,7 @@ import { useAuth } from "../../contexts/AuthContext";
 
 export default function Account() {
 	const theme = useTheme();
-	const { isAuthenticated, IsPermit, user, AddNewBook } = useAuth();
+	const { AddNewBook } = useAuth();
 	const [isLoading, setIsLoading] = useState(true);
 	const [profilePic, setProfilePic] = useState();
 	const [newProfilePic, setNewProfilePic] = useState(null);
@@ -39,15 +39,12 @@ export default function Account() {
 	const [isFormValid, setIsFormValid] = useState(false);
 
 	useEffect(() => {
-		IsPermit(true);
-
-		// Simulating loading time
 		const timer = setTimeout(() => {
 			setIsLoading(false);
-		}, 2000);
+		}, 1000);
 
 		return () => clearTimeout(timer);
-	}, [isAuthenticated]);
+	}, []);
 
 	const handleProfilePicChange = (event) => {
 		const file = event.target.files[0];

client/src/Pages/Dashboard/Dashboard.js

@@ -13,19 +13,15 @@ import AppVisits from "./Website";
 
 export default function Dashboard() {
   const theme = useTheme();
-  const { isAuthenticated, IsPermit, user, GetDashboradData, adminHomeData } =
+  const { GetDashboradData, adminHomeData } =
     useAuth();
   const { onlineUsers } = useSocket();
   useEffect(() => {
     async function getAllData_() {
       await GetDashboradData();
     }
-    IsPermit(true);
-    if(!user) {
-      window.location.href = '/home'
-    }
     getAllData_();
-  }, [isAuthenticated]);
+  }, []);
 
   return (
     <>

client/src/Pages/Dashboard/UserPage.js

@@ -45,7 +45,7 @@ const TABLE_HEAD = [
 const USERLIST = [];
 
 function UserFetcher() {
-  const { isAuthenticated, IsPermit, user, GetDashboradData, adminHomeData } = useAuth();
+  const { GetDashboradData, adminHomeData } = useAuth();
   const [users, setUsers] = useState(USERLIST);
   const [searchTerm, setSearchTerm] = useState("");
   const [selected, setSelected] = useState([]);
@@ -58,7 +58,6 @@ function UserFetcher() {
   const [isLoading, setLoading] = useState(true);
 
   useEffect(() => {
-    IsPermit(true);
     const fetchUsers = async () => {
       try {
         const response = await API.get("/admins/users");

client/src/Pages/Layouts/Header/DarkLight.js

@@ -1,11 +1,16 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { DarkContext } from '../../../contexts/ThemeContext';
+import { IconButton } from '@mui/material';
+import { Brightness4, Brightness7 } from '@mui/icons-material';
+
+const ThemeSwitcher = () => {
+  const { themeMode, toggleThemeMode } = useContext(DarkContext);
 
-const DarkLight = () => {
   return (
-    <div>
-
-    </div>
+    <IconButton color="inherit" onClick={toggleThemeMode}>
+      {themeMode === 'light' ? <Brightness4 /> : <Brightness7 />}
+    </IconButton>
   );
-}
+};
 
-export default DarkLight;
+export default ThemeSwitcher;

client/src/Pages/Layouts/Header/index.js

@@ -6,6 +6,7 @@ import ListIcon from "@mui/icons-material/List";
 import Searchbar from "./Searchbar";
 import AccountPopover from "./AccountPopover";
 import NotificationsPopover from "./NotificationsPopover";
+import Mood from "./DarkLight"
 
 const NAV_WIDTH = 280;
 
@@ -56,6 +57,8 @@ export default function Header({ onOpenNav }) {
             sm: 1,
           }}
         >
+          <Mood />
+
           {isAuthenticated && <NotificationsPopover />}
           {isAuthenticated && <AccountPopover />}
           {!isAuthenticated && (

client/src/Pages/Layouts/Navbar/AdminConfig.js

@@ -6,22 +6,22 @@ import AddBoxIcon from "@mui/icons-material/AddBox";
 const navConfig = [
   {
     title: "Dashboard",
-    path: "/dashboard/home",
+    path: "/home",
     icon: <DashboardIcon />,
   },
   {
     title: "User",
-    path: "/dashboard/user",
+    path: "/user",
     icon: <GroupIcon />,
   },
   {
     title: "Books",
-    path: "/dashboard/books",
+    path: "/books",
     icon: <LibraryBooksIcon />,
   },
   {
     title: "Add Book",
-    path: "/dashboard/addBook",
+    path: "/addBook",
     icon: <AddBoxIcon />,
   },
 ];

client/src/Pages/Router.js

@@ -1,74 +1,95 @@
 import { Navigate, useRoutes } from "react-router-dom";
 import Load from "../components/Load";
-import { lazy } from "react";
-//  Layout
+import { useAuth } from "../contexts/AuthContext";
+
+// Layouts
 const Layout = Load(() => import("./Layouts/Layout"));
 const Layout_ = Load(() => import("./Layouts/Layout2"));
 
 // 404
 const Page404 = Load(() => import("./404"));
 
-// HOME
-//import HOME from "./Home";
-const UserAccount = Load(() => import("./User/Account"));
-const Settings = Load(() => import("./User/Settings"));
-const UserBooks = Load(() => import("./User/Books"));
+// 500
+const Page500 = Load(() => import("./500"));
 
 // AUTH
 const LoginPage = Load(() => import("./Auth/Login"));
 const AdminLoginPage = Load(() => import("./Auth/Admin"));
-const ForgotPage = Load(() => import("./Auth/ForgotPssword"));
+const ForgotPage = Load(() => import("./Auth/ForgotPassword"));
 const CreatePage = Load(() => import("./Auth/CreateAccount"));
 
-// ADMIN DASHBOARD
+// USER PAGES
+const UserAccount = Load(() => import("./User/Account"));
+const Settings = Load(() => import("./User/Settings"));
+const UserBooks = Load(() => import("./User/Books"));
+
+// ADMIN PAGES
 const DashboardHomePage = Load(() => import("./Dashboard/Dashboard"));
 const DashboardUserPage = Load(() => import("./Dashboard/UserPage"));
 const DashboardAddBook = Load(() => import("./Dashboard/AddBook"));
 const DashboardBooks = Load(() => import("./Dashboard/Books"));
 
 // Router
 export default function Router() {
+  const { isAuthenticated, access } = useAuth();
+
   const routes = useRoutes([
-    {
-      path: "/",
-      element: <Layout />,
-      children: [
-        { element: <Navigate to="/home" />, index: true },
-        { path: "home", element: <UserBooks /> },
-        { path: "books", element: <UserBooks /> },
-        { path: "my-books", element: <div /> },
-        { path: "liked-books", element: <div /> },
-        { path: "account", element: <UserAccount /> },
-        { path: "settings", element: <Settings /> },
-      ],
-    },
-    {
-      path: "/dashboard",
-      element: <Layout />,
-      children: [
-        { element: <Navigate to="/dashboard/home" />, index: true },
-        { path: "home", element: <DashboardHomePage /> },
-        { path: "user", element: <DashboardUserPage /> },
-        { path: "books", element: <DashboardBooks /> },
-        { path: "addbook", element: <DashboardAddBook /> },
-      ],
-    },
+    // Auth Routes
     { path: "login", element: <LoginPage /> },
     { path: "admin", element: <AdminLoginPage /> },
     { path: "forgot", element: <ForgotPage /> },
     { path: "create", element: <CreatePage /> },
+
+    // User Routes
+    ...(isAuthenticated && !access
+      ? [
+          {
+            path: "/",
+            element: <Layout />,
+            children: [
+              { element: <Navigate to="/home" />, index: true },
+              { path: "home", element: <UserBooks /> },
+              { path: "books", element: <UserBooks /> },
+              { path: "my-books", element: <div /> },
+              { path: "liked-books", element: <div /> },
+              { path: "account", element: <UserAccount /> },
+              { path: "settings", element: <Settings /> },
+            ],
+          },
+        ]
+      : []),
+
+    // Admin Routes
+    ...(isAuthenticated && access
+      ? [
+          {
+            path: "/",
+            element: <Layout />,
+            children: [
+              { element: <Navigate to="/home" />, index: true },
+              { path: "home", element: <DashboardHomePage /> },
+              { path: "user", element: <DashboardUserPage /> },
+              { path: "books", element: <DashboardBooks /> },
+              { path: "addbook", element: <DashboardAddBook /> },
+            ],
+          },
+        ]
+      : []),
+
+    // Error Pages
+    {
+      path: "/500",
+      element: <Layout_ />,
+      children: [{ element: <Page500 />, index: true }],
+    },
     {
       element: <Layout_ />,
       children: [
         { element: <Navigate to="/home" />, index: true },
         { path: "404", element: <Page404 /> },
-        { path: "*", element: <Navigate to="/404" /> },
+        { path: "*", element: <Page404 /> },
       ],
     },
-    {
-      path: "*",
-      element: <Navigate to="/404" replace />,
-    },
   ]);
 
   return routes;