Merge pull request #54 from nicolelim02/feat/users

Fix linting issues

Author: nicolelim02

frontend/src/components/EditProfileModal/index.tsx

@@ -11,11 +11,20 @@ import {
   TextField,
   Typography,
 } from "@mui/material";
-import DeleteIcon from '@mui/icons-material/Delete';
+import DeleteIcon from "@mui/icons-material/Delete";
 import { useForm } from "react-hook-form";
 import { useProfile } from "../../contexts/ProfileContext";
-import { bioValidator, nameValidator, profilePictureValidator } from "../../utils/validators";
-import { FAILED_PROFILE_UPDATE_MESSAGE, PROFILE_PIC_MAX_SIZE_ERROR_MESSAGE, USE_AUTH_ERROR_MESSAGE, USE_PROFILE_ERROR_MESSAGE } from "../../utils/constants";
+import {
+  bioValidator,
+  nameValidator,
+  profilePictureValidator,
+} from "../../utils/validators";
+import {
+  FAILED_PROFILE_UPDATE_MESSAGE,
+  PROFILE_PIC_MAX_SIZE_ERROR_MESSAGE,
+  USE_AUTH_ERROR_MESSAGE,
+  USE_PROFILE_ERROR_MESSAGE,
+} from "../../utils/constants";
 import { useRef, useState } from "react";
 import { Restore } from "@mui/icons-material";
 import { toast } from "react-toastify";
@@ -35,7 +44,14 @@ const StyledForm = styled("form")(({ theme }) => ({
 }));
 
 const EditProfileModal: React.FC<EditProfileModalProps> = (props) => {
-  const { open, onClose, currProfilePictureUrl, currFirstName, currLastName, currBiography } = props;
+  const {
+    open,
+    onClose,
+    currProfilePictureUrl,
+    currFirstName,
+    currLastName,
+    currBiography,
+  } = props;
 
   const {
     register,
@@ -77,12 +93,16 @@ const EditProfileModal: React.FC<EditProfileModalProps> = (props) => {
   const { setUser } = auth;
 
   // profile pic functionality referenced and adapted from https://dreamix.eu/insights/uploading-files-with-react-hook-form/
-  const [picPreview, setPicPreview] = useState<string | null>(currProfilePictureUrl || null);
+  const [picPreview, setPicPreview] = useState<string | null>(
+    currProfilePictureUrl || null
+  );
   const hiddenFileInputRef = useRef<HTMLInputElement | null>(null);
-  const { ref: registerRef, ...rest } = register("profilePic", { validate: profilePictureValidator });
+  const { ref: registerRef, ...rest } = register("profilePic", {
+    validate: profilePictureValidator,
+  });
   const onClickUpload = () => {
     hiddenFileInputRef.current?.click();
-  }
+  };
   const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     if (file) {
@@ -93,33 +113,35 @@ const EditProfileModal: React.FC<EditProfileModalProps> = (props) => {
         setValue("profilePictureUrl", "", { shouldDirty: true });
       }
     }
-  }
+  };
 
   const onClickReset = () => {
     if (getFieldState("profilePic").isDirty) {
       setValue("profilePic", null, { shouldValidate: true, shouldDirty: true });
       if (hiddenFileInputRef.current) {
-        hiddenFileInputRef.current.value = '';
+        hiddenFileInputRef.current.value = "";
       }
     }
     if (getFieldState("profilePictureUrl").isDirty) {
-      setValue("profilePictureUrl", currProfilePictureUrl || "", { shouldDirty: true })
+      setValue("profilePictureUrl", currProfilePictureUrl || "", {
+        shouldDirty: true,
+      });
     }
     setPicPreview(currProfilePictureUrl || "");
-  }
+  };
 
-  const onClickDelete = () =>  {
+  const onClickDelete = () => {
     if (getFieldState("profilePic").isDirty) {
       setValue("profilePic", null, { shouldValidate: true, shouldDirty: true });
       if (hiddenFileInputRef.current) {
-        hiddenFileInputRef.current.value = '';
+        hiddenFileInputRef.current.value = "";
       }
     }
     if (currProfilePictureUrl) {
       setValue("profilePictureUrl", "", { shouldDirty: true });
     }
     setPicPreview(null);
-  }
+  };
 
   return (
     <Dialog open={open} onClose={onClose}>
@@ -151,7 +173,7 @@ const EditProfileModal: React.FC<EditProfileModalProps> = (props) => {
                           profilePictureUrl: url_data.profilePictureUrl,
                           createdAt: user.createdAt,
                           isAdmin: user.isAdmin,
-                        }
+                        };
                         setUser(updatedUser);
                       }
                     });
@@ -179,24 +201,26 @@ const EditProfileModal: React.FC<EditProfileModalProps> = (props) => {
                       profilePictureUrl: url_data.profilePictureUrl,
                       createdAt: user.createdAt,
                       isAdmin: user.isAdmin,
-                    }
+                    };
                     setUser(updatedUser);
                   }
                 });
                 onClose();
               }
             })}
           >
-            <Stack 
-              direction="row" 
+            <Stack
+              direction="row"
               spacing={2}
               display="flex"
               alignItems="center"
-              sx={(theme) => ({ marginBottom: theme.spacing(2) })}>
-              {!picPreview
-                ? <Avatar sx={{ width: 56, height: 56 }} />
-                : <Avatar src={picPreview} sx={{ width: 56, height: 56 }} />
-              }
+              sx={(theme) => ({ marginBottom: theme.spacing(2) })}
+            >
+              {!picPreview ? (
+                <Avatar sx={{ width: 56, height: 56 }} />
+              ) : (
+                <Avatar src={picPreview} sx={{ width: 56, height: 56 }} />
+              )}
               {/* input referenced from https://dreamix.eu/insights/uploading-files-with-react-hook-form/ */}
               <input
                 type="file"
@@ -209,35 +233,32 @@ const EditProfileModal: React.FC<EditProfileModalProps> = (props) => {
                 }}
                 onChange={handleImageChange}
               />
-              <Button 
+              <Button
                 size="small"
                 variant="outlined"
                 onClick={onClickUpload}
-                sx={{height: 30}}>
-                  Upload
+                sx={{ height: 30 }}
+              >
+                Upload
               </Button>
-              <IconButton
-                onClick={onClickReset}>
-                <Restore color="success"/>
+              <IconButton onClick={onClickReset}>
+                <Restore color="success" />
               </IconButton>
-              <IconButton
-                onClick={onClickDelete}>
-                <DeleteIcon color="error"/>
+              <IconButton onClick={onClickDelete}>
+                <DeleteIcon color="error" />
               </IconButton>
             </Stack>
-            {!!errors.profilePic
-              ? <Typography 
-                  color="error"
-                  sx={{fontSize: 13, 
-                    marginBottom: 2}}>
-                  {errors.profilePic.message}
-                </Typography>
-              : <Typography 
-                  sx={{fontSize: 13,
-                    marginBottom: 2,
-                    color: "#808080"}}>
-                    {PROFILE_PIC_MAX_SIZE_ERROR_MESSAGE}
-                </Typography>}
+            {errors.profilePic ? (
+              <Typography color="error" sx={{ fontSize: 13, marginBottom: 2 }}>
+                {errors.profilePic.message}
+              </Typography>
+            ) : (
+              <Typography
+                sx={{ fontSize: 13, marginBottom: 2, color: "#808080" }}
+              >
+                {PROFILE_PIC_MAX_SIZE_ERROR_MESSAGE}
+              </Typography>
+            )}
             <TextField
               fullWidth
               required

frontend/src/contexts/ProfileContext.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable react-refresh/only-export-components */
+
 import { createContext, useContext, useState } from "react";
 import { userClient } from "../utils/api";
 import {
@@ -29,7 +31,9 @@ type ProfileContextType = {
   editProfileOpen: boolean;
   passwordModalOpen: boolean;
   fetchUser: (userId: string) => void;
-  uploadProfilePicture: (data: File) => Promise<{ message: string, imageUrl: string } | null>;
+  uploadProfilePicture: (
+    data: File
+  ) => Promise<{ message: string; imageUrl: string } | null>;
   updateProfile: (data: UserProfileBase) => Promise<boolean>;
   updatePassword: ({
     oldPassword,
@@ -60,38 +64,34 @@ const ProfileContextProvider: React.FC<{ children: React.ReactNode }> = ({
 
   const uploadProfilePicture = async (
     data: File
-  ): Promise<{ message: string, imageUrl: string } | null> => {
+  ): Promise<{ message: string; imageUrl: string } | null> => {
     const formData = new FormData();
     formData.append("profilePic", data);
 
     try {
       const res = await userClient.post("/users/images", formData, {
         headers: {
-          "Content-Type": "multipart/form-data"
+          "Content-Type": "multipart/form-data",
         },
       });
       return res.data;
     } catch {
       return null;
     }
-  }
+  };
 
-  const updateProfile = async (
-    data: UserProfileBase
-  ): Promise<boolean> => {
+  const updateProfile = async (data: UserProfileBase): Promise<boolean> => {
     const token = localStorage.getItem("token");
     try {
-      const res = await userClient
-      .patch(`/users/${user?.id}`, data, 
-      {
+      const res = await userClient.patch(`/users/${user?.id}`, data, {
         headers: { Authorization: `Bearer ${token}` },
-      })
+      });
       setUser(res.data.data);
       toast.success(SUCCESS_PROFILE_UPDATE_MESSAGE);
       return true;
     } catch (error) {
-      console.error('Error:', error);
-      if(axios.isAxiosError(error)) {
+      console.error("Error:", error);
+      if (axios.isAxiosError(error)) {
         const message =
           error.response?.data.message || FAILED_PROFILE_UPDATE_MESSAGE;
         toast.error(message);

frontend/src/pages/Home/index.tsx

@@ -1,40 +1,40 @@
 import {
-  Autocomplete,
-  Button,
-  Card,
-  FormControl,
-  Grid2,
-  TextField,
+  // Autocomplete,
+  // Button,
+  // Card,
+  // FormControl,
+  // Grid2,
+  // TextField,
   Typography,
 } from "@mui/material";
-import { useEffect, useReducer, useState } from "react";
+// import { useEffect, useReducer, useState } from "react";
 
 import classes from "./index.module.css";
 import AppMargin from "../../components/AppMargin";
-import {
-  complexityList,
-  languageList,
-  maxMatchTimeout,
-  minMatchTimeout,
-} from "../../utils/constants";
-import reducer, {
-  getQuestionCategories,
-  initialState,
-} from "../../reducers/questionReducer";
-import CustomChip from "../../components/CustomChip";
+// import {
+//   complexityList,
+//   languageList,
+//   maxMatchTimeout,
+//   minMatchTimeout,
+// } from "../../utils/constants";
+// import reducer, {
+//   getQuestionCategories,
+//   initialState,
+// } from "../../reducers/questionReducer";
+// import CustomChip from "../../components/CustomChip";
 // import homepageImage from "/homepage_image.svg";
 
 const Home: React.FC = () => {
-  const [complexity, setComplexity] = useState<string[]>([]);
-  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
-  const [language, setLanguage] = useState<string[]>([]);
-  const [timeout, setTimeout] = useState<number>(30);
+  // const [complexity, setComplexity] = useState<string[]>([]);
+  // const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+  // const [language, setLanguage] = useState<string[]>([]);
+  // const [timeout, setTimeout] = useState<number>(30);
 
-  const [state, dispatch] = useReducer(reducer, initialState);
+  // const [state, dispatch] = useReducer(reducer, initialState);
 
-  useEffect(() => {
-    getQuestionCategories(dispatch);
-  }, []);
+  // useEffect(() => {
+  //   getQuestionCategories(dispatch);
+  // }, []);
 
   return (
     <AppMargin
@@ -62,7 +62,8 @@ const Home: React.FC = () => {
           maxWidth: "80%",
         })}
       >
-        Specify your question preferences and sit back as we find you the best match.
+        Specify your question preferences and sit back as we find you the best
+        match.
       </Typography>
       {/* <Box
         component="img"
@@ -77,7 +78,7 @@ const Home: React.FC = () => {
           objectFit: "contain",
         }}
       /> */}
-      <Card
+      {/* <Card
         sx={{
           padding: 4,
           width: "100%",
@@ -267,7 +268,7 @@ const Home: React.FC = () => {
         >
           Find my match!
         </Button>
-      </Card>
+      </Card> */}
     </AppMargin>
   );
 };

frontend/src/pages/Profile/index.tsx

@@ -43,6 +43,7 @@ const ProfilePage: React.FC = () => {
     }
 
     fetchUser(userId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   if (!user) {
@@ -106,20 +107,22 @@ const ProfilePage: React.FC = () => {
         <Box sx={(theme) => ({ flex: 3, paddingLeft: theme.spacing(4) })}>
           <Typography variant="h4">Questions attempted</Typography>
         </Box>
-        {editProfileOpen &&
+        {editProfileOpen && (
           <EditProfileModal
             open={editProfileOpen}
             onClose={() => setEditProfileModalOpen(false)}
             currProfilePictureUrl={user.profilePictureUrl}
             currFirstName={user.firstName}
             currLastName={user.lastName}
             currBiography={user.biography}
-          />}
-        {passwordModalOpen && 
+          />
+        )}
+        {passwordModalOpen && (
           <ChangePasswordModal
             open={passwordModalOpen}
             onClose={() => setPasswordModalOpen(false)}
-          />}
+          />
+        )}
       </Box>
     </AppMargin>
   );