Filter bar refactor

gimlet-io · Mar 28, 2024 · 0784298 · 0784298
1 parent 41ec15d
commit 0784298
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 33 deletions.
diff --git a/web/src/App.js b/web/src/App.js
@@ -38,40 +38,17 @@ function App() {
     localStorage.setItem("filters", JSON.stringify(filters));
   }, [filters]);
 
-  const addFilter = (filter) => {
-    setFilters([...filters, filter]);
-  }
-
-  const filterValueByProperty = (property) => {
-    const filter = filters.find(f => f.property === property)
-    if (!filter) {
-      return ""
-    }
-
-    return filter.value
-  }
-
-  const deleteFilter = (filter) => {
-    setFilters(filters.filter(f => f.property !== filter.property))
-  }
-
-  const resetFilters = () => {
-    setFilters([])
-  }
-
   return (
     <>
     <APIBackend capacitorClient={capacitorClient} store={store}/>
     <StreamingBackend capacitorClient={capacitorClient} store={store}/>
     <ToastNotifications store={store} handleNavigationSelect={handleNavigationSelect} />
     <div className="max-w-6xl mx-auto">
       <div className="my-16">
-        <FilterBar 
+        <FilterBar
+          properties={["Service", "Namespace", "Domain"]}
           filters={filters}
-          addFilter={addFilter}
-          deleteFilter={deleteFilter}
-          resetFilters={resetFilters}
-          filterValueByProperty={filterValueByProperty}
+          change={setFilters}
         />
       </div>
       <div className="grid grid-cols-1 gap-y-4 pb-32">

diff --git a/web/src/FilterBar.js b/web/src/FilterBar.js
@@ -1,7 +1,28 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { FunnelIcon, XMarkIcon } from '@heroicons/react/24/outline'
 
-function FilterBar({ filters, addFilter, deleteFilter, resetFilters, filterValueByProperty }) {
+function FilterBar({ properties = [], filters, change }) {
+  const addFilter = (filter) => {
+    change([...filters, filter]);
+  }
+
+  const filterValueByProperty = (property) => {
+    const filter = filters.find(f => f.property === property)
+    if (!filter) {
+      return ""
+    }
+
+    return filter.value
+  }
+
+  const deleteFilter = (filter) => {
+    change(filters.filter(f => f.property !== filter.property))
+  }
+
+  const resetFilters = () => {
+    change([])
+  }
+
   return (
     <div className="w-full">
       <div className="relative">
@@ -10,7 +31,7 @@ function FilterBar({ filters, addFilter, deleteFilter, resetFilters, filterValue
           {filters.map(filter => (
             <Filter key={filter.property + filter.value} filter={filter} deleteFilter={deleteFilter} />
           ))}
-          <FilterInput addFilter={addFilter} filterValueByProperty={filterValueByProperty} />
+          <FilterInput properties={properties} addFilter={addFilter} filterValueByProperty={filterValueByProperty} />
         </div>
         <div className="block w-full rounded-lg border-0 bg-white py-1.5 pl-10 pr-3 text-neutral-900 ring-1 ring-inset ring-neutral-300 placeholder:text-neutral-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
           &nbsp;
@@ -41,8 +62,7 @@ function FilterInput(props) {
   const [active, setActive] = useState(false)
   const [property, setProperty] = useState("")
   const [value, setValue] = useState("")
-  const properties=["Service", "Namespace", "Domain"]
-  const { addFilter, filterValueByProperty } = props;
+  const { properties, addFilter, filterValueByProperty } = props;
 	const inputRef = useRef(null);
 
   const reset = () => {
@@ -76,7 +96,7 @@ function FilterInput(props) {
               setActive(false);
               if (value !== "") {
                 if (property === "") {
-                  addFilter({property: "Service", value: value})
+                  addFilter({property: properties[0], value: value})
                 } else {
                   addFilter({property, value})
                 }
@@ -92,7 +112,7 @@ function FilterInput(props) {
             if (e.keyCode === 13){
               setActive(false)
               if (property === "") {
-                addFilter({property: "Service", value: value})
+                addFilter({property: properties[0], value: value})
               } else {
                 addFilter({property, value})
               }
@@ -117,7 +137,10 @@ function FilterInput(props) {
               return (<li
                 key={p}
                 className="cursor-pointer hover:bg-blue-200"
-                onClick={() => { setProperty(p); setActive(false); }}>
+                onClick={() => {
+                  setProperty(p);
+                  setActive(false);
+                }}>
                 {p}
               </li>)
             })}