Clear some react warnings

src/App.js

@@ -51,10 +51,10 @@ function jsonToArray(json) {
 function App() {
   const [data, setData] = useState(undefined); // keeps the state of the json
   const [dataArray, setDataArray] = useState([]); // put everything into one array. uses more memory, but search is faster and less complex
-  // eslint-disable-next-line
   const [loading, setLoading] = useState(true); // Determines whether to show spinner
   const [searchParams, setSearchParams] = useState({ searchTerm: "", "lang.code": ""});
   const [searchResults, setSearchResults] = useState([]);
+   // eslint-disable-next-line
   const [cookies, setCookie, removeCookie] = useCookies(["lightMode"]);
   const [queries, setQueries] = useState({lang: "", subject: ""});
 
@@ -72,7 +72,7 @@ function App() {
   useEffect(() => {
     setQueries(queryString.parse(document.location.search));
     if (queries.lang) {
-      if (queries.lang == "langs" || queries.lang == "subjects") {
+      if (queries.lang === "langs" || queries.lang === "subjects") {
         changeParameter("lang.code", "en");
       } else {
         changeParameter("lang.code", queries.lang);
@@ -86,11 +86,12 @@ function App() {
           "https://raw.githubusercontent.com/FreeEbookFoundationBot/free-programming-books-json/main/fpb.json"
         );
         setData(result.data);
+         // eslint-disable-next-line
         let { arr, sections } = jsonToArray(result.data);
         setDataArray(arr);
       } catch (e) {
-        // setError("Couldn't get data. Please try again later")
         setData(fpb);
+         // eslint-disable-next-line
         let { arr, sections } = jsonToArray(fpb);
         setDataArray(arr);
       }
@@ -224,6 +225,7 @@ function App() {
           changeTheme(willBeDarkMode ? themes.light : themes.dark);
           return (
             <img
+              alt="Toggle light/dark mode"
               src={willBeDarkMode ? MoonImg : SunImg}
               onClick={() => {
                 setCookie("lightMode", willBeDarkMode);

src/components/BookList.js

@@ -22,7 +22,7 @@ function BookList({ langCode }) {
       setLoading(false);
     }
     fetchData();
-  }, []);
+  }, [langCode]);
 
   if (loading) {
     return <p>Loading...</p>;

src/components/LangFilters.js

@@ -15,7 +15,7 @@ function LangFilters({ changeParameter, data, langCode }) {
   useEffect(() => {
     let queries = queryString.parse(document.location.search);
     if (queries.lang) {
-      if (queries.lang == "langs" || queries.lang == "subjects") {
+      if (queries.lang === "langs" || queries.lang === "subjects") {
         changeParameter("lang.code", "en");
         setSelected("en");
       } else {
@@ -23,7 +23,7 @@ function LangFilters({ changeParameter, data, langCode }) {
         setSelected(queries.lang);
       }
     }
-  }, []);
+  }, [changeParameter]);
 
   useEffect(
     // run whenever data changes
@@ -57,7 +57,7 @@ function LangFilters({ changeParameter, data, langCode }) {
             key={language.code}
             value={language.code}
             onChange={handleChange}
-            checked={language.code == selected}
+            checked={language.code === selected}
           />
           {language.name}
         </label>
@@ -80,7 +80,7 @@ function LangFilters({ changeParameter, data, langCode }) {
           className="sect-select"
           value=""
           onChange={handleChange}
-          checked={"" == selected}
+          checked={"" === selected}
         />
         All Languages
       </label>

src/components/LightSwitch.js

@@ -1,14 +1,19 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 
-function LightSwitch(App){
-	const [lightMode, setLightMode] = useState(false);
-	return (
-		<img src={lightMode ? "https://toppng.com/uploads/preview/sun-11545692406nbrflpmao0.png" : "https://www.kindpng.com/picc/m/293-2939577_clip-art-drawing-of-moon-and-stars-star.png"}
-		onClick = {()=>setLightMode(!lightMode)} style={{width: "100px", height: "100px",display: "block",
-														  marginLeft: "auto",
-														  marginRight: "auto",
-														  }}/>
-	)
+function LightSwitch() {
+  const [lightMode, setLightMode] = useState(false);
+  return (
+    <img
+      alt="Toggle light/dark mode"
+      src={
+        lightMode
+          ? "https://toppng.com/uploads/preview/sun-11545692406nbrflpmao0.png"
+          : "https://www.kindpng.com/picc/m/293-2939577_clip-art-drawing-of-moon-and-stars-star.png"
+      }
+      onClick={() => setLightMode(!lightMode)}
+      style={{ width: "100px", height: "100px", display: "block", marginLeft: "auto", marginRight: "auto" }}
+    />
+  );
 }
 
-export default LightSwitch;
+export default LightSwitch;

src/components/SearchBar.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from "react";
+import React, {useEffect} from "react";
 const queryString = require("query-string");
 
 function SearchBar(props) {
@@ -8,7 +8,7 @@ function SearchBar(props) {
       document.getElementById("searchBar").value = queries.search;
       props.changeParameter("searchTerm", queries.search);
     }
-  }, []);
+  }, [props]);
 
   const handleChange = (e) => {
     props.changeParameter("searchTerm", e.target.value);

src/components/SectDropdown.js

@@ -24,7 +24,7 @@ function SectDropdown({ changeParameter, data, value }) {
             for (let i = 0; i < document.sections.length; i++) {
               // console.log("h")
               // console.log(document.sections[i]);
-              if (sectArray.indexOf(document.sections[i].section) == -1) {
+              if (sectArray.indexOf(document.sections[i].section) === -1) {
                 sectArray.push(document.sections[i].section.trim());
               }
               // sectArray.push(document.sections[i].section);
@@ -48,7 +48,7 @@ function SectDropdown({ changeParameter, data, value }) {
             key={section}
             value={section}
             onChange={handleChange}
-            checked={section == selected}
+            checked={section === selected}
           />
           {section}
         </label>
@@ -67,7 +67,7 @@ function SectDropdown({ changeParameter, data, value }) {
       <h3>Select Programming Language:</h3>
       <form class="filters">
         <label>
-          <input type="radio" className="sect-select" value="" onChange={handleChange} checked={"" == selected} />
+          <input type="radio" className="sect-select" value="" onChange={handleChange} checked={"" === selected} />
           All Programming Languages
         </label>
         {options}

src/darkMode.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, createContext } from "react";
+import React, { useState, createContext } from "react";
 
 //https://levelup.gitconnected.com/dark-mode-in-react-533faaee3c6e