FIXME: breaks the rules of hooks!

src/components/services/query_results/ZooniverseResults.js

-import React, { useContext, useEffect } from "react";
-import { Table, Alert, Form } from "react-bootstrap";
 import axios from "axios";
+import React, { useContext, useEffect } from "react";
+import { Alert, Form, Table } from "react-bootstrap";
+import { BasketContext } from "../../../contexts/BasketContext";
 import { GlobalContext } from "../../../contexts/GlobalContext";
 import { QueryContext } from "../../../contexts/QueryContext";
-import { BasketContext } from "../../../contexts/BasketContext";
+import AddToBasket from "../../basket/AddToBasketCheckBox";
 import LoadingSpinner from "../../LoadingSpinner";
 import Paginate, { pagination_fields } from "../../Paginate";
-import SaveBasketButton from "../../basket/SaveBasketButton";
-import AddToBasket from "../../basket/AddToBasketCheckBox";
 
 const DATETIME_OPTIONS = {
   year: "numeric",
@@ -20,7 +19,7 @@ const DATETIME_OPTIONS = {
   timeZoneName: "short",
 };
 
-Object.isObject = function(obj) {
+Object.isObject = function (obj) {
   return (obj && obj.constructor === this) || false;
 };
 
@@ -89,7 +88,7 @@ function newPageCallback(setPage) {
   };
 }
 
-function projectBasketItem(projectId, category){
+function projectBasketItem(projectId, category) {
   return {
     archive: "zooniverse",
     catalog: "project",
@@ -98,7 +97,7 @@ function projectBasketItem(projectId, category){
   };
 }
 
-function workflowBasketItem(projectId, workflowId, category){
+function workflowBasketItem(projectId, workflowId, category) {
   return {
     archive: "zooniverse",
     catalog: "workflow",
@@ -205,7 +204,7 @@ function ZooniverseProjectResults(context) {
                     <td>
                       <a href={`https://zooniverse.org/projects/${result.slug}`}>
                         Link
-                    </a>
+                      </a>
                     </td>
                     {remaining_cells}
                   </tr>
@@ -244,7 +243,7 @@ function ZooniverseWorkflowResults(context) {
     let title = titleCase(field.replace("_", " "));
     return <th key={`project_header_${field}`}>{title}</th>;
   });
-  const saveBasketStyle = { marginBottom : "10px"} ;
+
   return (
     <>
       <Paginate
@@ -255,73 +254,73 @@ function ZooniverseWorkflowResults(context) {
       />
       <Form>
 
-      {queryMap
-        .get("zooniverse_workflows")
-        .results.results.map((project) => {
-          return (
-            <div key={project.project_id}>
-              <h4>{project.display_name}</h4>
-              <Table className="mt-3" responsive>
-                <thead>
-                  <tr className="bg-light">
-                    {/* <th>
+        {queryMap
+          .get("zooniverse_workflows")
+          .results.results.map((project) => {
+            return (
+              <div key={project.project_id}>
+                <h4>{project.display_name}</h4>
+                <Table className="mt-3" responsive>
+                  <thead>
+                    <tr className="bg-light">
+                      {/* <th>
               <InputGroup>
                 <InputGroup.Checkbox />
               </InputGroup>
             </th> */}
-                    <th>Select Classification Data</th>
-                    <th>Select Subject Data</th>
-                    <th>ID</th>
-                    <th>Display Name</th>
-                    <th>Created</th>
-                    <th>Updated</th>
-                    {remaining_headers}
-                    {/* <th>View</th> */}
-                  </tr>
-                </thead>
-                <tbody>
-                  {project.workflows.map((workflow) => {
-                    let created_at = date_formatter.format(
-                      new Date(workflow.created_at)
-                    );
-                    let updated_at = date_formatter.format(
-                      new Date(workflow.updated_at)
-                    );
-                    let remaining_cells = remaining_fields.map((field) => {
-                      let reactKey = `workflow_${workflow.workflow_id}_${field}`;
-                      return (
-                        <td key={reactKey}>
-                          {renderIfCompound(workflow[field], reactKey)}
-                        </td>
+                      <th>Select Classification Data</th>
+                      <th>Select Subject Data</th>
+                      <th>ID</th>
+                      <th>Display Name</th>
+                      <th>Created</th>
+                      <th>Updated</th>
+                      {remaining_headers}
+                      {/* <th>View</th> */}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {project.workflows.map((workflow) => {
+                      let created_at = date_formatter.format(
+                        new Date(workflow.created_at)
+                      );
+                      let updated_at = date_formatter.format(
+                        new Date(workflow.updated_at)
                       );
-                    });
-                    return (
-                      <tr key={`workflow_${workflow.workflow_id}`}>
-                        {/* <th>
+                      let remaining_cells = remaining_fields.map((field) => {
+                        let reactKey = `workflow_${workflow.workflow_id}_${field}`;
+                        return (
+                          <td key={reactKey}>
+                            {renderIfCompound(workflow[field], reactKey)}
+                          </td>
+                        );
+                      });
+                      return (
+                        <tr key={`workflow_${workflow.workflow_id}`}>
+                          {/* <th>
                     <InputGroup>
                       <InputGroup.Checkbox />
                     </InputGroup>
                   </th> */}
-                        <td>
-                          <AddToBasket id={`selectClassifications_${workflow.workflow_id}`} item={workflowBasketItem(result.project_id, workflow.workflow_id, "classifications")} />
-                        </td>
-                        <td>
-                          <AddToBasket id={`selectSubjects_${workflow.workflow_id}`} item={workflowBasketItem(result.project_id, workflow.workflow_id, "subjects")} />
-                        </td>
-                        <td>{workflow.workflow_id}</td>
-                        <td>{workflow.display_name}</td>
-                        <td>{created_at}</td>
-                        <td>{updated_at}</td>
-                        {remaining_cells}
-                        {/* <td><a href={`https://zooniverse.org/workflows/${workflow.slug}`}>Link</a></td> */}
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </Table>
-            </div>
-          );
-        })}
+                          <td>
+                            <AddToBasket id={`selectClassifications_${workflow.workflow_id}`} item={workflowBasketItem(result.project_id, workflow.workflow_id, "classifications")} />
+                          </td>
+                          <td>
+                            <AddToBasket id={`selectSubjects_${workflow.workflow_id}`} item={workflowBasketItem(result.project_id, workflow.workflow_id, "subjects")} />
+                          </td>
+                          <td>{workflow.workflow_id}</td>
+                          <td>{workflow.display_name}</td>
+                          <td>{created_at}</td>
+                          <td>{updated_at}</td>
+                          {remaining_cells}
+                          {/* <td><a href={`https://zooniverse.org/workflows/${workflow.slug}`}>Link</a></td> */}
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </Table>
+              </div>
+            );
+          })}
       </Form>
       <Paginate
         getNewPage={newPageCallback(setPage)}
@@ -339,6 +338,7 @@ export default function ZooniverseResults({ catalog }) {
 
   const { queryMap, page } = useContext(QueryContext);
   const { api_host } = useContext(GlobalContext);
+
   useEffect(() => {
     const usp = new URLSearchParams(queryMap.get(catalog).esapquery);
     usp.set("page", page);
@@ -368,7 +368,10 @@ export default function ZooniverseResults({ catalog }) {
           results: null,
         });
       });
-  }, [page])
+
+  }, [page]); // eslint-disable-line react-hooks/exhaustive-deps
+  // FIXME: React Hook useEffect has missing dependencies: 'api_host', 'catalog', and 'queryMap'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+  // FIXME: breaks the rules of hooks!
 
   if (!context.queryMap) return null;
   if (context.queryMap.get(catalog).status === "fetched") {