Implemented url updates for search parameters

cul · Feb 12, 2024 · 2c7d0a9 · 2c7d0a9
1 parent 25ce092
commit 2c7d0a9
Showing 1 changed file with 66 additions and 21 deletions.
diff --git a/app/javascript/components/resources/ResourceList.jsx b/app/javascript/components/resources/ResourceList.jsx
@@ -1,11 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import SearchBar from './SearchBar';
+import { useSearchParams, useNavigate } from 'react-router-dom';
 
 export default function ResourceList() {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
   const [resources, setResources] = useState([]);
   const [filteredResources, setFilteredResources] = useState([]);
-  const [pageNumber, setPageNumber] = useState(1);
+  const [pageState, setPageState] = useState({ pageNumber: 1, identifier: '', status: 'Any'});
 
   useEffect(() => {
     (async () => {
@@ -19,33 +22,36 @@ export default function ResourceList() {
       const data = await response.json();
       // setResources(data.concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data));
       // setFilteredResources(data.concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data).concat(data));
-      console.log(data[0])
       setResources(data);
-      setFilteredResources(data);
+
+      let filteredData = data;
+      if (pageState.identifier) { filteredData = filteredData.filter((resource) => resource.identifier === pageState.identifier); } 
+      if (pageState.status === '@undefined') { filteredData = filteredData.filter((resource) => resource.status === undefined); }
+        else if (pageState.status && pageState.status != 'Any') { filteredData = filteredData.filter((resource) => resource.status === pageState.status); }
+      setFilteredResources(filteredData)
     })();
   }, []);
 
+  function setURL(identifier, status, page) {
+    let url = '?';
+    if (identifier) { url = url + 'identifier=' + identifier + '&'};
+    if (status) { url = url + 'status=' + status + '&'};
+    if (page) { url = url + 'page=' + page};
+    navigate(url);
+  }
+
   function handleIdentifierSearch(identifier) {
     console.log('Looking for id ' + identifier);
-    if(identifier === '') {
-      setFilteredResources(resources);
-    } else {
-      setFilteredResources(resources.filter((resource) => resource.identifier === identifier));
-      setPageNumber(1);
-    }
+
+    setURL(identifier, pageState.status, 1);
   }
 
   function handleStatusFilter(status) {
-    console.log('Filtering by status ' + status)
-    if(status === 'Any') {
-      setFilteredResources(resources);
-    } else  {
-      if(status === 'undefined') {
-        status = undefined
-      }
-      setFilteredResources(resources.filter((resource) => resource.status === status));
-      setPageNumber(1);
+    if(status === 'undefined') {
+      status = '@undefined'
     }
+    setURL(pageState.identifier, status, 1);
+    console.log('Filtering by status ' + status)
   }
 
   function nextPage() {
@@ -64,14 +70,53 @@ export default function ResourceList() {
     height: 100%;
   `
 
+  const queryIdentifier = searchParams.get('identifier');
+  const queryStatus = searchParams.get('status');
+  const queryPage = searchParams.get('page');
+
+  const newPageState = { ...pageState }
+
+  console.log(filteredResources);
+
+  if (
+    (queryIdentifier && (queryIdentifier != pageState.identifier)) ||
+    (queryStatus && (queryStatus != pageState.status)) ||
+    (queryPage && (parseInt(queryPage) != pageState.pageNumber) && (queryPage - 1) * 50 < filteredResources.length)
+  ) {
+
+    if (queryIdentifier && (queryIdentifier != pageState.identifier)) { 
+      // console.log("changing identifier from " + pageState.identifier + " to " + queryIdentifier);
+      setFilteredResources(resources.filter((resource) => resource.identifier === queryIdentifier)); 
+      newPageState.identifier = queryIdentifier;
+    }
+    if (queryStatus && (queryStatus != pageState.status)) {
+      // console.log("changing status from " + pageState.status + " to " + queryStatus);
+      setFilteredResources(filteredResources.filter((resource) => resource.status === queryStatus)); 
+      newPageState.status = queryStatus;
+    }
+    if (queryPage && (queryPage != pageState.pageNumber) && queryPage * 50 < filteredResources.length) { 
+      console.log("changing page number from " + pageState.pageNumber + " to " + queryPage);
+      newPageState.pageNumber = queryPage;
+    } else if (newPageState.identifier != pageState.identifier || newPageState.status != pageState.status) {
+      // Move to page 1 if a filter param was updated and the page isn't specified
+      newPageState.pageNumber = 1;
+    }
+
+    console.log(pageState);
+    console.log(newPageState);
+    setPageState(newPageState);
+  }
+
+  console.log(filteredResources);
+
   return (
     <div>
       <SearchBar 
         filterChoices={[...new Set(resources.map((resource) => {return resource.status}))]}
         onSearch={handleIdentifierSearch}
         onFilter={handleStatusFilter}
       />
-      <label>{((pageNumber - 1) * 50 + 1) + ' - ' + (Math.min(pageNumber * 50, filteredResources.length)) + ' of ' + filteredResources.length}</label>
+      <label>{((pageState.pageNumber - 1) * 50 + 1) + ' - ' + (Math.min(pageState.pageNumber * 50, filteredResources.length)) + ' of ' + filteredResources.length}</label>
       <button onClick={prevPage}>prev</button>
       <button onClick={nextPage}>next</button>
       <TableContainer>
@@ -89,7 +134,7 @@ export default function ResourceList() {
             </tr>
           </thead>
           <tbody className=''>
-            {filteredResources.slice((pageNumber - 1) * 50, pageNumber * 50).map((resource) => 
+            {filteredResources.slice((pageState.pageNumber - 1) * 50, pageState.pageNumber * 50).map((resource) => 
               <tr key={resource.identifier}>
                 <td>{resource.identifier}</td>
                 <td>{resource.source_uri}</td>
@@ -105,7 +150,7 @@ export default function ResourceList() {
         </table>
         {/* <ol>{resources.map((resource) => <li key={resource.identifier}>{JSON.stringify(resource)}</li>)}</ol> */}
       </TableContainer>
-      <label>{((pageNumber - 1) * 50 + 1) + ' - ' + (Math.min(pageNumber * 50, filteredResources.length)) + ' of ' + filteredResources.length}</label>
+      <label>{((pageState.pageNumber - 1) * 50 + 1) + ' - ' + (Math.min(pageState.pageNumber * 50, filteredResources.length)) + ' of ' + filteredResources.length}</label>
       <button onClick={prevPage}>prev</button>
       <button onClick={nextPage}>next</button>
     </div>