Added dynamic filter choices

cul · Jan 30, 2024 · 90b9a7e · 90b9a7e
1 parent 1954e1a
commit 90b9a7e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/app/javascript/components/resources/ResourceList.jsx b/app/javascript/components/resources/ResourceList.jsx
@@ -35,6 +35,9 @@ export default function ResourceList() {
     if(status === 'Any') {
       setFilteredResources(resources);
     } else  {
+      if(status === 'undefined') {
+        status = undefined
+      }
       setFilteredResources(resources.filter((resource) => resource.status === status));
     }
   }
@@ -43,10 +46,13 @@ export default function ResourceList() {
     height: 100%;
   `
 
-  console.log(filteredResources);
   return (
     <div>
-      <SearchBar onSearch={handleIdentifierSearch} onFilter={handleStatusFilter}/>
+      <SearchBar 
+        filterChoices={[...new Set(resources.map((resource) => {return resource.status}))]}
+        onSearch={handleIdentifierSearch}
+        onFilter={handleStatusFilter}
+      />
       <TableContainer>
         <table className="table table-dark table-bordered table-striped">
           <thead>
@@ -74,7 +80,6 @@ export default function ResourceList() {
                 <td>{resource.error_message}</td>
               </tr>
             )}
-            {console.log(filteredResources)}
           </tbody>
         </table>
         {/* <ol>{resources.map((resource) => <li key={resource.identifier}>{JSON.stringify(resource)}</li>)}</ol> */}

diff --git a/app/javascript/components/resources/SearchBar.jsx b/app/javascript/components/resources/SearchBar.jsx
@@ -1,18 +1,18 @@
 import React, {useRef} from 'react';
 
-const STATUSES = [1, 2, 3, 4];
+// const STATUSES = [1, 2, 3, 4];
 
-export default function SearchBar({onSearch, onFilter}) {
+export default function SearchBar({filterChoices, onSearch, onFilter}) {
   const identifierInput = useRef();
 
   return (
     <div>
       <p>
         <label>Filter by status: </label>
-        <select name ="status" onChange={(event) => {return onFilter(event.target.value)}}>
+        <select name="status" onChange={(event) => {return onFilter(event.target.value)}}>
           <option key={-1} value={'Any'}>Any</option> 
-          {STATUSES.map((status) => {
-            return <option key={status} value={status + ''}>{status}</option>
+          {filterChoices.map((status) => {
+            return <option key={filterChoices.indexOf(status)} value={status + ''}>{status}</option>
           })}
         </select>
         <label> </label>