103 rucio next page

Fixed pagination in Rucio search results:

esap-general#103 (closed)

src/components/services/query_results/RucioResults.js

+import axios from "axios";
 import React, { useContext } from "react";
-import { Table, Alert, Form } from "react-bootstrap";
+import { Alert, Form, Table } from "react-bootstrap";
+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 from "../../Paginate";
-import AddToBasket from "../../basket/AddToBasketCheckBox";
 
-function createBasketItem(record){
-    return {
-        archive: "rucio",
-        record: record,
-    };
+function createBasketItem(record) {
+  return {
+    archive: "rucio",
+    record: record,
+  };
 }
 
 function titleCase(string) {
@@ -21,122 +22,152 @@ function titleCase(string) {
   return sentence.join(" ");
 }
 
-function newPageCallback(setPage) {
-  return (args) => {
+export default function RucioResults({ catalog }) {
+
+  const { queryMap } = useContext(QueryContext);
+  const { api_host } = useContext(GlobalContext);
+  const page = queryMap.get(catalog).page;
+
+  // when the user clicks on the next page the query needs to be redone to ask for the requested page
+  function gotoPage(args) {
     if (args.target) {
-      setPage(parseFloat(args.target.text));
-    }
-  };
-}
 
-export default function RucioResults({ catalog }) {
-  const context = useContext(QueryContext);
-  // const basketContext = useContext(BasketContext);
-  const { queryMap, page, setPage } = context;
-
-  // console.log(queryMap, page, context.queryMap.get(catalog).status);
-
-  if (!context.queryMap) return null;
-  if (context.queryMap.get(catalog).status === "fetched") {
-    if (context.queryMap.get(catalog).results.results.length === 0)
-      return <Alert variant="warning">No matching results found!</Alert>;
-    else if (catalog === "rucio") {
-      const result = queryMap.get("rucio").results.results[0];
-      const numPages = queryMap.get("rucio").results.pages;
-
-      const fields = Object.keys(result).map(
-        (key) => key
-      );
-      const headers = Object.keys(result).map((field) => {
-        const title = titleCase(field.replace("_", " "));
-        return <th key={`header_${field}`}>{title}</th>;
+      const newPage = parseInt(args.target.text);
+      if (isNaN(newPage))
+      {
+        // newPage === NaN when clicking on the current page since the button is disabled in Paginate.js
+        // Thus no need to refresh the page.
+        return;
+      }
+
+      queryMap.set(catalog, {
+        catalog: "esap_rucio",
+        page: newPage,
+        esapquery: queryMap.get(catalog).esapquery + `&page=${newPage}`,
+        status: "fetching"
       });
 
-      return (
-        <>
-          <Paginate
-            getNewPage={newPageCallback(setPage)}
-            currentPage={page}
-            numAdjacent={3}
-            numPages={numPages}
-          />
-          <Form>
-            {/*<SaveBasketButton />*/}
-            <Table className="mt-3" responsive>
-              <thead>
-                <tr className="bg-light">
-                  {/* <th>
-                <InputGroup>
-                  <InputGroup.Checkbox />
-                </InputGroup>
-              </th> */}
-                  <th>Basket</th>
-                  {headers}
-                </tr>
-              </thead>
-              <tbody>
-                {queryMap
-                  .get("rucio")
-                  .results.results.map((result, resultCounter) => {
-                    const cells = fields.map((field) => {
-                      const reactKey = `item_${resultCounter}_${field}`;
-                      return (
-                        <td key={reactKey}>
-                          {result[field]}
-                        </td>
-                      );
-                    });
-                    return (
-                      <tr key={`item_${resultCounter}`}>
-                        {/* <th>
-                    <InputGroup>
-                      <InputGroup.Checkbox />
-                    </InputGroup>
-                  </th> */}
-                        {/*<td>
-                        <Form.Check id={`selectClassifications_${result.project_id}`} type="checkbox" onChange={(event) => {
-                          const action = event.target.checked ? addToBasket : removeFromBasket;
-                          action(result.project_id, basketContext, "project", "classifications");
-                        }} checked={isInBasket(result.project_id, basketContext, "project", "classifications") ? "checked" : ""} />
-                      </td>
-                      <td>
-                        <Form.Check id={`selectSubjects_${result.project_id}`} type="checkbox" onChange={(event) => {
-                          const action = event.target.checked ? addToBasket : removeFromBasket;
-                          action(result.project_id, basketContext, "project", "subjects");
-                        }} checked={isInBasket(result.project_id, basketContext, "project", "subjects") ? "checked" : ""} />
-                      </td>*/}
-                        {/*<td>{result.project_id}</td>
-                      <td>{result.display_name}</td>
-                      <td>{created_at}</td>
-                      <td>{updated_at}</td>
-                      <td>{launch_date}</td>
-                      <td>{live}</td>
-                      <td>
-                        <a href={`https://zooniverse.org/projects/${result.slug}`}>
-                          Link
-                      </a>
-                      </td>*/}
-                        <td>
-                          <AddToBasket id={result.id} item={createBasketItem(result)} />
-                        </td>
-                        {cells}
-                      </tr>
-                    );
-                  })}
-              </tbody>
-            </Table>
-          </Form>
-          <Paginate
-            getNewPage={newPageCallback(setPage)}
-            currentPage={page}
-            numAdjacent={3}
-            numPages={numPages}
-          />
-        </>
-      );
+      const url = api_host + "query/query/?" + queryMap.get(catalog).esapquery
+
+      axios
+        .get(url, {
+          withCredentials: true
+        })
+        .then((queryResponse) => {
+          queryMap.set(catalog, {
+            catalog: "esap_rucio",
+            page: newPage,
+            esapquery: queryMap.get(catalog).esapquery,
+            status: "fetched",
+            results: queryResponse.data,
+          });
+        })
+        .catch((err) => {
+
+          console.log("fetchRucioPage failed", err);
+
+          queryMap.set(catalog, {
+            catalog: "esap_rucio",
+            page: newPage,
+            esapquery: queryMap.get(catalog).esapquery,
+            status: "error",
+            results: null,
+            error: err
+          });
+
+        });
+
     }
+
   }
-  else {
+
+  // If the queryMap does not exist, don't render
+  if (!queryMap) {
+    return null;
+  }
+
+  // Show error
+  if (queryMap.get(catalog).status === "error") {
+    return <>
+      <Alert variant="error">An Error occurred!</Alert>
+      <pre>{JSON.stringify(queryMap.get(catalog).error, null, 2)}</pre>
+    </>;
+  }
+
+  // Show loading spinner
+  if (queryMap.get(catalog).status !== "fetched") {
     return <LoadingSpinner />;
   }
+
+  // Show warning when no results are found
+  if (queryMap.get(catalog).results.results.length === 0) {
+    return <Alert variant="warning">No matching results found!</Alert>;
+  }
+
+  // Show Result Table
+  if (catalog === "rucio") {
+
+    const numPages = queryMap.get("rucio").results.pages;
+
+    // Construct Header Column names
+    const result = queryMap.get("rucio").results.results[0];
+    const fields = Object.keys(result);
+    const headers = fields.map((field) => {
+      const title = titleCase(field.replace("_", " "));
+      return <th key={`header_${field}`}>{title}</th>;
+    });
+
+    return (
+      <>
+        <Paginate
+          getNewPage={(evt) => gotoPage(evt)}
+          currentPage={page}
+          numAdjacent={3}
+          numPages={numPages}
+        />
+
+        <Form>
+          <Table className="mt-3" responsive>
+            <thead>
+              <tr className="bg-light">
+                <th>Basket</th>
+                {headers}
+              </tr>
+            </thead>
+            <tbody>
+              {queryMap.get("rucio")
+                .results.results.map((result, resultCounter) => {
+
+                  const cells = fields.map((field) => {
+                    const reactKey = `item_${resultCounter}_${field}`;
+                    return (
+                      <td key={reactKey}>
+                        {result[field]}
+                      </td>
+                    );
+                  });
+
+                  return (
+                    <tr key={`item_${resultCounter}`}>
+                      <td>
+                        <AddToBasket id={result.id} item={createBasketItem(result)} />
+                      </td>
+                      {cells}
+                    </tr>
+                  );
+                })}
+            </tbody>
+          </Table>
+        </Form>
+
+        <Paginate
+          getNewPage={(evt) => gotoPage(evt)}
+          currentPage={page}
+          numAdjacent={3}
+          numPages={numPages}
+        />
+      </>
+    );
+  }
+
 }