Fix some eslint warnings

Author: njxue

frontend/package.json

@@ -38,13 +38,17 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint ."
   },
   "eslintConfig": {
     "extends": [
       "react-app",
       "react-app/jest"
-    ]
+    ],
+    "rules": {
+      "no-template-curly-in-string": "off"
+    }
   },
   "browserslist": {
     "production": [

frontend/src/domain/context/CollaborationContext.tsx

@@ -45,7 +45,6 @@ export const CollaborationProvider: React.FC<{ children: ReactNode }> = ({ child
     const [connectedUsers, setConnectedUsers] = useState<string[]>([]);
     const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor | null>(null);
     const [provider, setProvider] = useState<WebsocketProvider | null>(null);
-    const [binding, setBinding] = useState<MonacoBinding | null>(null);
 
     useEffect(() => {
         if (!roomId) return;
@@ -67,7 +66,6 @@ export const CollaborationProvider: React.FC<{ children: ReactNode }> = ({ child
 
         const ytext = provider.doc.getText("monaco");
         const binding = new MonacoBinding(ytext, editor.getModel()!, new Set([editor]), provider.awareness);
-        setBinding(binding);
 
         const ymap = provider.doc.getMap("sharedMap");
         ymap.observe((event) => {

frontend/src/domain/users/IUser.ts

@@ -1,5 +1,3 @@
-import { User } from "domain/entities/User";
-
 export interface IUserRegisterInput {
     username: string;
     email: string;

frontend/src/presentation/components/LoginForm/LoginForm.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import styles from "./LoginForm.module.css";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { handleError } from "presentation/utils/errorHandler";

frontend/src/presentation/components/ProfileContainer.tsx

@@ -21,7 +21,7 @@ export const ProfileContainer: React.FC = () => {
         <>
             <div className={styles.container}>
                 <div className={styles.profileContainer}>
-                    <img className={styles.profilePicture} src={SampleProfilePicture} />
+                    <img className={styles.profilePicture} src={SampleProfilePicture} alt="profile" />
                     <div className={styles.profileDetailsContainer}>
                         <div className={styles.nameRow}>
                             <h2 className={styles.name}>{user?.username}</h2>

frontend/src/presentation/components/QuestionCard.tsx

@@ -1,7 +1,7 @@
 // QuestionCard.tsx
 
 import React from "react";
-import { Card, Tag, Button, message } from "antd";
+import { Card, Tag } from "antd";
 import { Question } from "../../domain/entities/Question";
 import styles from "./QuestionCard.module.css";
 import { getDifficultyColor } from "presentation/utils/QuestionUtils";

frontend/src/presentation/components/RecentAttemptsTable.tsx

@@ -52,7 +52,6 @@ export const RecentAttemptsTable: React.FC = () => {
   // Modal State for Viewing Codes
   const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
   const [currentCodes, setCurrentCodes] = useState<string[]>([]);
-  const [currentAttemptId, setCurrentAttemptId] = useState<string>(""); // To identify which attempt's codes are being viewed
 
   // Fetch Recent Attempts on Component Mount
   useEffect(() => {
@@ -122,15 +121,13 @@ export const RecentAttemptsTable: React.FC = () => {
   // Function to Show Modal with Codes
   const showModal = (attemptCodes: string[], attemptId: string) => {
     setCurrentCodes(attemptCodes);
-    setCurrentAttemptId(attemptId);
     setIsModalVisible(true);
   };
 
   // Function to Close Modal
   const handleModalClose = () => {
     setIsModalVisible(false);
     setCurrentCodes([]);
-    setCurrentAttemptId("");
   };
 
   // Define Columns for the Table

frontend/src/presentation/components/SignUpForm/SignUpForm.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import styles from "./SignUpForm.module.css";
 import { useNavigate } from "react-router-dom";
 import { handleError } from "presentation/utils/errorHandler";

frontend/src/presentation/pages/CollaborationRoomPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect, useRef } from "react";
+import React, { useState, useEffect } from "react";
 import styles from "./CollaborationRoomPage.module.css";
 import CodeEditor from "../../presentation/components/CodeEditor/CodeEditor";
 import { QuestionDetail } from "../../presentation/components/QuestionDetail";

frontend/src/presentation/pages/ResetPasswordPage.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import styles from "./ResetPasswordPage.module.css";
 
-import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { Link, useNavigate, useSearchParams } from "react-router-dom";
 import { Form, Input, Button } from "antd";
 import { getEqualityValidator, getPasswordStrengthValidator } from "presentation/utils/formUtils";
 import { useForm } from "antd/es/form/Form";