Add unauthorized and loading pages

Author: ruiqi7

frontend/package-lock.json

@@ -25,6 +25,7 @@
     "markdown-to-jsx": "^7.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-loader-spinner": "^6.1.6",
     "react-router-dom": "^6.26.2",
     "react-toastify": "^10.0.5",
     "vite-plugin-svgr": "^4.2.0"

frontend/package.json

@@ -1,4 +1,5 @@
 import { Box } from "@mui/material";
+import { ToastContainer } from "react-toastify";
 
 type AppMarginProps = { classname?: string; children: React.ReactNode };
 
@@ -13,6 +14,7 @@ const AppMargin: React.FC<AppMarginProps> = (props) => {
       })}
     >
       {children}
+      <ToastContainer position="bottom-right" />
     </Box>
   );
 };

frontend/src/components/AppMargin/index.tsx

@@ -0,0 +1,30 @@
+import { Box, Typography } from "@mui/material";
+import { Oval } from "react-loader-spinner";
+
+const Loader: React.FC = () => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        minHeight: "100vh",
+        minWidth: "755px",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <Oval
+        height="80"
+        width="80"
+        color="#8FB8ED"
+        secondaryColor="#9E9E9E"
+      />
+      <Typography
+        variant="h4"
+        sx={(theme) => ({ marginTop: theme.spacing(2) })}
+      >Loading...</Typography>
+    </Box>
+  );
+};
+
+export default Loader;

frontend/src/components/Loader/index.tsx

@@ -1,6 +1,7 @@
 import { Navigate, Outlet } from "react-router-dom";
 import { useAuth } from "../../contexts/AuthContext";
 import React from "react";
+import ServerError from "../ServerError";
 
 type ProtectedRoutesProps = { 
   adminOnly?: boolean;
@@ -18,9 +19,12 @@ const ProtectedRoutes: React.FC<ProtectedRoutesProps> = ({ adminOnly = false })
   }
 
   if (adminOnly && !user.isAdmin) {
-    // TODO: unauthorized page
-    console.log("unauthorized");
-    return <></>;
+    return (
+      <ServerError
+        title="Oops, access denied..."
+        subtitle="Unfortunately, you do not have the permission to access this page 😥"
+      />
+    );
   } 
 
   return <Outlet />;

frontend/src/components/ProtectedRoutes/index.tsx

@@ -3,8 +3,8 @@
 import { createContext, useContext, useEffect, useState } from "react";
 import { userClient } from "../utils/api";
 import { useNavigate } from "react-router-dom";
-import { Box } from "@mui/material";
 import { toast } from "react-toastify";
+import Loader from "../components/Loader";
 
 type User = {
   id: string;
@@ -48,9 +48,11 @@ const AuthProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
         })
         .then((res) => setUser(res.data.data))
         .catch(() => setUser(null))
-        .finally(() => setLoading(false));
+        .finally(() => {
+          setTimeout(() => setLoading(false), 1500)
+        });
     } else {
-      setLoading(false);
+      setTimeout(() => setLoading(false), 1500);
     }
   }, []);
 
@@ -98,15 +100,11 @@ const AuthProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
     localStorage.removeItem("token");
     setUser(null);
     navigate("/");
+    toast.success("Logged out successfully!");
   };
 
   if (loading) {
-    // TODO: loading page
-    return (
-      <Box>
-        Loading...
-      </Box>
-    );
+    return <Loader />;
   }
 
   return (

frontend/src/contexts/AuthContext.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { Autocomplete, Button, IconButton, Stack, TextField } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import axios from "axios";
-import { ToastContainer, toast } from "react-toastify";
+import { toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 
 import { questionClient } from "../../utils/api";
@@ -96,7 +96,7 @@ const NewQuestion = () => {
             options={complexityList}
             size="small"
             sx={{ marginTop: 2 }}
-            onChange={(e, newcomplexitySelected) => {
+            onChange={(_e, newcomplexitySelected) => {
               setselectedComplexity(newcomplexitySelected);
             }}
             renderInput={(params) => <TextField {...params} label="Complexity" />}
@@ -132,8 +132,6 @@ const NewQuestion = () => {
           {isPreviewQuestion ? "Edit Question" : "Preview Question"}
         </Button>
       </Stack>
-
-      <ToastContainer position="bottom-right" />
     </AppMargin>
   );
 };

frontend/src/pages/NewQuestion/index.tsx

@@ -9,7 +9,7 @@ import {
 } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import axios from "axios";
-import { ToastContainer, toast } from "react-toastify";
+import { toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 
 import { questionClient } from "../../utils/api";
@@ -142,7 +142,7 @@ const QuestionEdit = () => {
             size="small"
             sx={{ marginTop: 2 }}
             value={selectedComplexity}
-            onChange={(e, newcomplexitySelected) => {
+            onChange={(_e, newcomplexitySelected) => {
               setselectedComplexity(newcomplexitySelected);
             }}
             renderInput={(params) => (
@@ -186,8 +186,6 @@ const QuestionEdit = () => {
           {isPreviewQuestion ? "Edit Question" : "Preview Question"}
         </Button>
       </Stack>
-
-      <ToastContainer position="bottom-right" />
     </AppMargin>
   );
 };