From 1b568b365c07aa8559c344455f4bd37ea2dcaa5f Mon Sep 17 00:00:00 2001
From: nnayk <79224511+nnayk@users.noreply.github.com>
Date: Fri, 8 Dec 2023 00:01:41 -0800
Subject: [PATCH] Add lint step to frontend ci

---
 .github/workflows/frontend-ci.yml |  2 +-
 Frontend/src/pages/vote.js        | 39 ++++++++++++++-----------------
 2 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/.github/workflows/frontend-ci.yml b/.github/workflows/frontend-ci.yml
index 2dc2da6..edf1c09 100644
--- a/.github/workflows/frontend-ci.yml
+++ b/.github/workflows/frontend-ci.yml
@@ -17,4 +17,4 @@ jobs:
       - name: Install dependencies
         uses: actions/checkout@v4
       - run: npm install
-      # - run: npm run lint
+      - run: npm run lint
diff --git a/Frontend/src/pages/vote.js b/Frontend/src/pages/vote.js
index 858d8d8..0502782 100644
--- a/Frontend/src/pages/vote.js
+++ b/Frontend/src/pages/vote.js
@@ -1,9 +1,9 @@
 // src/pages/vote.js
-import React, { useEffect, useState } from 'react';
-import Image from 'next/image';
+import React, { useEffect, useState } from "react";
+import Image from "next/image";
 import { isAuthenticated } from "./auth";
-import axios from 'axios';
-import styles from './vote.module.css';
+import axios from "axios";
+import styles from "./vote.module.css";
 
 const backendUrl = "http://localhost:5000"; // Assuming your backend runs on port 5000
 
@@ -38,6 +38,7 @@ export default function Vote() {
 
   useEffect(() => {
     fetchTwoDistinctImages();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const fetchRandomImage = async () => {
@@ -63,20 +64,18 @@ export default function Vote() {
   const handleImageClick = async (id) => {
     setSelectedImage(id);
 
- 
+    const winner = images.find((image) => image._id.$oid === id);
+    const loser = images.find((image) => image._id.$oid !== id);
 
-    const winner = images.find(image => image._id.$oid === id);
-    const loser = images.find(image => image._id.$oid !== id);
-  
     const newEloWinner = calculateNewElo(winner.elo, loser.elo, true);
     const newEloLoser = calculateNewElo(loser.elo, winner.elo, false);
-  
+
     await updateElo(winner._id.$oid, newEloWinner, loser._id.$oid, newEloLoser);
-  
+
     setTimeout(() => {
       fetchTwoDistinctImages();
       setSelectedImage(null);
-    }, 400); 
+    }, 400);
   };
 
   const updateElo = async (winnerId, newEloWinner, loserId, newEloLoser) => {
@@ -85,13 +84,13 @@ export default function Vote() {
         imageIdOne: winnerId,
         newEloOne: newEloWinner,
         imageIdTwo: loserId,
-        newEloTwo: newEloLoser
+        newEloTwo: newEloLoser,
       });
     } catch (error) {
       console.error("Error updating ELO", error);
     }
   };
-  
+
   return (
     <div className="bg-gray-100 min-h-screen flex flex-col justify-center items-center">
       <div className={styles.container}>
@@ -102,17 +101,17 @@ export default function Vote() {
               selectedImage === null
                 ? styles.default
                 : selectedImage === image._id.$oid
-                ? styles.winning
-                : styles.losing
+                  ? styles.winning
+                  : styles.losing
             } border border-5 border-black opacity-50 hover:scale-105 transform transition duration-50 ease-in-out`}
             onClick={() => handleImageClick(image._id.$oid)}
           >
             <Image
               src={image.url}
-              alt='Votable Image'
+              alt="Votable Image"
               width={1024}
               height={1024}
-              style={{ width: '100%', height: '100%' }}
+              style={{ width: "100%", height: "100%" }}
             />
           </div>
         ))}
@@ -121,14 +120,11 @@ export default function Vote() {
   );
 }
 
-
-
-
 export async function getServerSideProps(context) {
   const { req } = context;
   const token = req.cookies["token"];
 
-  if (!await isAuthenticated(token)) {
+  if (!(await isAuthenticated(token))) {
     // If the user is not authenticated, redirect them to the login page
     return {
       redirect: {
@@ -143,4 +139,3 @@ export async function getServerSideProps(context) {
     props: {}, // Will be passed to the page component as props
   };
 }
-