Refactor code

Author: ruiqi7

frontend/package-lock.json

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

frontend/src/components/AppMargin/index.tsx

@@ -1,8 +1,18 @@
 import { Visibility, VisibilityOff } from "@mui/icons-material";
-import { IconButton, InputAdornment, TextField, TextFieldPropsSizeOverrides, TextFieldVariants } from "@mui/material";
+import { IconButton, InputAdornment, TextField, TextFieldPropsSizeOverrides, TextFieldVariants, Tooltip } from "@mui/material";
 import { OverridableStringUnion } from '@mui/types';
 import { useState } from "react";
 
+const passwordRequirements = (
+  <ul style={{ paddingLeft: "12px", margin: 0 }}>
+    <li>At least 8 characters long</li>
+    <li>At least 1 lowercase letter</li>
+    <li>At least 1 uppercase letter</li>
+    <li>At least 1 digit</li>
+    <li>At least 1 special character</li>
+  </ul>
+);
+
 // Adapted from https://muhimasri.com/blogs/mui-validation/
 type CustomTextFieldProps = {
   label: string;
@@ -41,27 +51,30 @@ const CustomTextField: React.FC<CustomTextFieldProps> = ({
   };
 
   return (
-    <TextField
-      label={label}
-      variant={variant}
-      size={size}
-      required={required}
-      onChange={handleChange}
-      error={(required && emptyField) || !!error}
-      helperText={error}
-      type={showPassword ? "text" : "password"}
-      slotProps={{
-        input: {
-          endAdornment: isPasswordField && (
-            <InputAdornment position="end">
-              <IconButton onClick={() => setShowPassword(!showPassword)} edge="end">
-                {showPassword ? <VisibilityOff /> : <Visibility />}
-              </IconButton>
-            </InputAdornment>
-          ),
-        }
-      }}
-    />
+    <Tooltip title={isPasswordField && passwordRequirements} placement="right" arrow>
+      <TextField
+        label={label}
+        variant={variant}
+        size={size}
+        fullWidth
+        required={required}
+        onChange={handleChange}
+        error={(required && emptyField) || !!error}
+        helperText={error}
+        type={showPassword ? "text" : "password"}
+        slotProps={{
+          input: {
+            endAdornment: isPasswordField && (
+              <InputAdornment position="end">
+                <IconButton onClick={() => setShowPassword(!showPassword)} edge="end">
+                  {showPassword ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              </InputAdornment>
+            ),
+          }
+        }}
+      />
+    </Tooltip>
   );
 };
 

frontend/src/components/CustomTextField/index.tsx

@@ -1,6 +1,8 @@
 import { Box } from "@mui/material";
 import { Outlet } from "react-router-dom";
 import Navbar from "../Navbar";
+import { ToastContainer } from "react-toastify";
+import 'react-toastify/dist/ReactToastify.css';
 
 const Layout: React.FC = () => {
   return (
@@ -15,6 +17,7 @@ const Layout: React.FC = () => {
     >
       <Navbar />
       <Outlet />
+      <ToastContainer position="bottom-right" />
     </Box>
   );
 };

frontend/src/components/Layout/index.tsx

@@ -1,5 +1,4 @@
-import { Box, Typography } from "@mui/material";
-import { Oval } from "react-loader-spinner";
+import { Box, CircularProgress, Typography } from "@mui/material";
 
 const Loader: React.FC = () => {
   return (
@@ -13,12 +12,7 @@ const Loader: React.FC = () => {
         justifyContent: "center",
       }}
     >
-      <Oval
-        height="80"
-        width="80"
-        color="#8FB8ED"
-        secondaryColor="#9E9E9E"
-      />
+      <CircularProgress color="primary" size="80px" />
       <Typography
         variant="h4"
         sx={(theme) => ({ marginTop: theme.spacing(2) })}

frontend/src/components/Loader/index.tsx

@@ -1,9 +1,7 @@
 import { Box, ImageListItem, IconButton } from "@mui/material";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import FullscreenIcon from "@mui/icons-material/Fullscreen";
-
 import { toast } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
 
 interface QuestionImageProps {
   url: string;

frontend/src/components/QuestionImage/index.tsx

@@ -8,6 +8,7 @@ import { toast } from "react-toastify";
 import { createImageUrls } from "../../reducers/questionReducer";
 import QuestionImage from "../QuestionImage";
 import QuestionImageDialog from "../QuestionImageDialog";
+import { FAILED_FILE_UPLOAD, SUCCESS_FILE_UPLOAD } from "../../utils/constants";
 
 interface QuestionImageContainerProps {
   uploadedImagesUrl: string[];
@@ -69,9 +70,9 @@ const QuestionImageContainer: React.FC<QuestionImageContainerProps> = ({
         for (const imageUrl of res.imageUrls) {
           setUploadedImagesUrl((prev) => [...prev, imageUrl]);
         }
-        toast.success("File uploaded successfully");
+        toast.success(SUCCESS_FILE_UPLOAD);
       } else {
-        toast.error("Error uploading file");
+        toast.error(FAILED_FILE_UPLOAD);
       }
     });
   };

frontend/src/components/QuestionImageContainer/index.tsx

@@ -5,6 +5,7 @@ import { userClient } from "../utils/api";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import Loader from "../components/Loader";
+import { SUCCESS_LOG_OUT } from "../utils/constants";
 
 type User = {
   id: string;
@@ -100,7 +101,7 @@ const AuthProvider: React.FC<{ children?: React.ReactNode }> = (props) => {
     localStorage.removeItem("token");
     setUser(null);
     navigate("/");
-    toast.success("Logged out successfully!");
+    toast.success(SUCCESS_LOG_OUT);
   };
 
   if (loading) {

frontend/src/contexts/AuthContext.tsx

@@ -6,6 +6,7 @@ import { useAuth } from "../../contexts/AuthContext";
 import CustomTextField from "../../components/CustomTextField";
 import { emailValidator } from "../../utils/validators";
 import { ToastContainer } from "react-toastify";
+import 'react-toastify/dist/ReactToastify.css';
 
 const LogIn: React.FC = () => {
   const navigate = useNavigate();