Merge pull request #99 from IPHUN1989/98-correcting-es-lint-errors-on…

…-frontend 98 correcting es lint errors on frontend
IPHUN1989 · Jun 21, 2024 · 9ad38a7 · 9ad38a7
2 parents e095fed + 4cca5a2
commit 9ad38a7
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 37 deletions.
diff --git a/frontend/src/Components/BoardGameForm/BoardGameForm.jsx b/frontend/src/Components/BoardGameForm/BoardGameForm.jsx
@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import PropTypes from "prop-types";
 
 
 const BoardGameForm = ({ onSave, onCancel }) => {
@@ -212,4 +213,9 @@ const BoardGameForm = ({ onSave, onCancel }) => {
   );
 };
 
+BoardGameForm.propTypes = {
+  onSave: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+};
+
 export default BoardGameForm;
diff --git a/frontend/src/Pages/GameDetails/GameDetails.jsx b/frontend/src/Pages/GameDetails/GameDetails.jsx
@@ -1,5 +1,4 @@
-import * as React from "react";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback} from "react";
 import { useParams } from "react-router-dom";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import {
@@ -195,7 +194,7 @@ export default function GameDetails() {
     }
   };
 
-  const fetchRatingForGame = async () => {
+  const fetchRatingForGame = useCallback(async () => {
     try {
       const userToken = localStorage.getItem("usertoken");
       const userID = localStorage.getItem("userID");
@@ -206,15 +205,15 @@ export default function GameDetails() {
             "Content-Type": "application/json",
           }
         : { "Content-Type": "application/json" };
-
+  
       const response = await fetch(
         `/api/ratings/check-existence?appUserPublicID=${userID}&boardGamePublicID=${boardGamePublicID}`,
         {
           method: "GET",
           headers: headers,
         }
       );
-      
+
       if (response.ok) {
         const data = await response.json();
         setCheckedRating(data);
@@ -226,7 +225,7 @@ export default function GameDetails() {
     } catch (error) {
       console.error("Error fetching rating: ", error);
     }
-  };
+  }, [boardGame]);
 
   const fetchBoardGame = async (id) => {
     try {
@@ -297,9 +296,9 @@ export default function GameDetails() {
     if (boardGame) {
       fetchRatingForGame();
     }
-  }, [boardGame]);
+  }, [boardGame, fetchRatingForGame]);
 
-  const favorizedIDs = user ? user.favoriteBoardGamePublicIDS : [];
+  const favoredIDs = user ? user.favoriteBoardGamePublicIDS : [];
 
   return (
     <div>
@@ -332,7 +331,7 @@ export default function GameDetails() {
                 </Typography>
                 <br></br>
                 {localStorage.getItem("username") ? (
-                  !favorizedIDs.includes(boardGame.publicID) ? (
+                  !favoredIDs.includes(boardGame.publicID) ? (
                     <div>
                       <Button onClick={handleAddToFavorites}>
                         Add to favorites

diff --git a/frontend/src/Pages/Login/Login.jsx b/frontend/src/Pages/Login/Login.jsx
@@ -2,7 +2,7 @@ import { useNavigate } from "react-router-dom";
 import { useState } from "react";
 import "./login.css";
 
-const Login = ({ onCancel }) => {
+const Login = () => {
   const [showPassword, setShowPassword] = useState(false);
 
   const navigate = useNavigate();

diff --git a/frontend/src/Pages/Register/Register.jsx b/frontend/src/Pages/Register/Register.jsx
@@ -1,4 +1,6 @@
 import { useState } from "react";
+import PropTypes from "prop-types";
+
 
 const Register = ({ onSave, onCancel }) => {
   const [showPassword, setShowPassword] = useState(false);
@@ -98,4 +100,9 @@ const Register = ({ onSave, onCancel }) => {
   );
 };
 
+Register.propTypes = {
+  onSave: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+};
+
 export default Register;
diff --git a/frontend/src/Pages/UserFavoritesSite.jsx b/frontend/src/Pages/UserFavoritesSite.jsx
@@ -1,5 +1,4 @@
-import React, { useEffect, useState } from 'react';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { useEffect, useState, useCallback } from 'react';
 import {
   Link, Accordion, AccordionSummary, AccordionDetails, Card, CardContent, Typography, Button
 } from '@mui/material';
@@ -8,7 +7,6 @@ function UserFavoritesSite() {
   const [user, setUser] = useState(null);
   const [bgs, setBgs] = useState(null);
 
-
   const removeBoardGameFromFavorites = async (userId, boardGameId) => {
     try {
       const userToken = localStorage.getItem("usertoken");
@@ -19,9 +17,7 @@ function UserFavoritesSite() {
         }
         : { "Content-Type": "application/json" };
 
-      const data = {
-        boardGameId
-      }
+      const data = { boardGameId };
 
       const response = await fetch(`/api/users/favorites/${userId}`, {
         method: "DELETE",
@@ -30,8 +26,6 @@ function UserFavoritesSite() {
       });
 
       if (response.ok) {
-        // Board game was successfully removed from favorites
-        // You can update the UI or display a message here
         console.log('Board game removed from favorites');
         location.reload();
       } else {
@@ -42,9 +36,6 @@ function UserFavoritesSite() {
     }
   };
 
-
-
-
   const userFetch = async () => {
     try {
       const userToken = localStorage.getItem("usertoken");
@@ -75,13 +66,7 @@ function UserFavoritesSite() {
     userFetch();
   }, []);
 
-  useEffect(() => {
-    if (user) {
-      favBoardGamesFetch();
-    }
-  }, [user]);
-
-  const favBoardGamesFetch = async () => {
+  const favBoardGamesFetch = useCallback(async () => {
     const uuids = user.favoriteBoardGamePublicIDS;
 
     try {
@@ -93,9 +78,7 @@ function UserFavoritesSite() {
         }
         : { "Content-Type": "application/json" };
 
-      const data = {
-        uuids
-      };
+      const data = { uuids };
 
       const response = await fetch(`/api/games/myfavorites`, {
         method: "POST",
@@ -112,7 +95,14 @@ function UserFavoritesSite() {
     } catch (error) {
       console.error("Error fetching user data: ", error);
     }
-  }
+  }, [user]);
+
+  useEffect(() => {
+    if (user) {
+      favBoardGamesFetch();
+    }
+  }, [user, favBoardGamesFetch]);
+
   return (
     <div>
       {user !== null && bgs !== null ? (
@@ -128,9 +118,7 @@ function UserFavoritesSite() {
             <br />
 
             {bgs.map((bg) => (
-
               <Accordion key={bg.publicID}>
-
                 <AccordionSummary>
                   <Link border={"none"} href={`/games/${bg.publicID}`}>
                     {bg.gameName}
@@ -139,11 +127,9 @@ function UserFavoritesSite() {
                   <Button onClick={() => removeBoardGameFromFavorites(localStorage.getItem("userID"), bg.publicID)}>Delete from favorites</Button>
                 </AccordionSummary>
                 <AccordionDetails>
-
                   {user.reviews.map((userRev) => {
                     return bg.reviews.map((bgRev) => {
                       if (userRev.publicID === bgRev.publicID) {
-
                         return (
                           <div key={bgRev.publicID}>
                             <Typography variant="body2">Review:</Typography>
@@ -152,7 +138,7 @@ function UserFavoritesSite() {
                           </div>
                         );
                       }
-                      return; // Return null if there's no matching review
+                      return null; // Return null if there's no matching review
                     });
                   })}
                 </AccordionDetails>