Fix lint errors in Dealers.jsx

Author: sjhallo07

server/frontend/src/components/Dealers/Dealers.jsx

@@ -1,22 +1,19 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import "./Dealers.css";
 import "../assets/style.css";
 import Header from '../Header/Header';
 import review_icon from "../assets/reviewicon.png"
 
 const Dealers = () => {
   const [dealersList, setDealersList] = useState([]);
-  // let [state, setState] = useState("")
   let [states, setStates] = useState([])
 
-  // let root_url = window.location.origin
   let dealer_url ="/djangoapp/get_dealers";
-  
   let dealer_url_by_state = "/djangoapp/get_dealers/";
 
   const filterDealers = async (state) => {
-    dealer_url_by_state = dealer_url_by_state+state;
-    const res = await fetch(dealer_url_by_state, {
+    const url = dealer_url_by_state + state;
+    const res = await fetch(url, {
       method: "GET"
     });
     const retobj = await res.json();
@@ -26,71 +23,71 @@ const Dealers = () => {
     }
   }
 
-  const get_dealers = async ()=>{
+  const get_dealers = useCallback(async () => {
     const res = await fetch(dealer_url, {
       method: "GET"
     });
     const retobj = await res.json();
     if(retobj.status === 200) {
       let all_dealers = Array.from(retobj.dealers)
-      let states = [];
-      all_dealers.forEach((dealer)=>{
-        states.push(dealer.state)
+      let statesArr = [];
+      all_dealers.forEach((dealer) => {
+        statesArr.push(dealer.state)
       });
 
-      setStates(Array.from(new Set(states)))
+      setStates(Array.from(new Set(statesArr)))
       setDealersList(all_dealers)
     }
-  }
+  }, []);
+
   useEffect(() => {
     get_dealers();
-  },[]);  
-
+  }, [get_dealers]);  
 
-let isLoggedIn = sessionStorage.getItem("username") != null ? true : false;
-return(
-  <div>
-      <Header/>
+  let isLoggedIn = sessionStorage.getItem("username") != null ? true : false;
+  return(
+    <div>
+        <Header/>
 
-     <table className='table'>
-      <tr>
-      <th>ID</th>
-      <th>Dealer Name</th>
-      <th>City</th>
-      <th>Address</th>
-      <th>Zip</th>
-      <th>
-      <select name="state" id="state" onChange={(e) => filterDealers(e.target.value)}>
-      <option value="" selected disabled hidden>State</option>
-      <option value="All">All States</option>
-      {states.map(state => (
-          <option value={state}>{state}</option>
-      ))}
-      </select>        
-
-      </th>
-      {isLoggedIn ? (
-          <th>Review Dealer</th>
-         ):<></>
-      }
-      </tr>
-     {dealersList.map(dealer => (
+       <table className='table'>
         <tr>
-          <td>{dealer['id']}</td>
-          <td><a href={'/dealer/'+dealer['id']}>{dealer['full_name']}</a></td>
-          <td>{dealer['city']}</td>
-          <td>{dealer['address']}</td>
-          <td>{dealer['zip']}</td>
-          <td>{dealer['state']}</td>
-          {isLoggedIn ? (
-            <td><a href={`/postreview/${dealer['id']}`}><img src={review_icon} className="review_icon" alt="Post Review"/></a></td>
+        <th>ID</th>
+        <th>Dealer Name</th>
+        <th>City</th>
+        <th>Address</th>
+        <th>Zip</th>
+        <th>
+        <select name="state" id="state" onChange={(e) => filterDealers(e.target.value)}>
+        <option value="" selected disabled hidden>State</option>
+        <option value="All">All States</option>
+        {states.map(state => (
+            <option key={state} value={state}>{state}</option>
+        ))}
+        </select>        
+
+        </th>
+        {isLoggedIn ? (
+            <th>Review Dealer</th>
            ):<></>
-          }
+        }
         </tr>
-      ))}
-     </table>;
-  </div>
-)
+       {dealersList.map(dealer => (
+          <tr key={dealer.id}>
+            <td>{dealer['id']}</td>
+            <td><a href={'/dealer/'+dealer['id']}>{dealer['full_name']}</a></td>
+            <td>{dealer['city']}</td>
+            <td>{dealer['address']}</td>
+            <td>{dealer['zip']}</td>
+            <td>{dealer['state']}</td>
+            {isLoggedIn ? (
+              <td><a href={`/postreview/${dealer['id']}`}><img src={review_icon} className="review_icon" alt="Post Review"/></a></td>
+             ):<></>
+            }
+          </tr>
+        ))}
+       </table>
+    </div>
+  )
 }
 
 export default Dealers