Merge pull request #16 from bigcommerce/feature/advanced-filters

feat(pattern): fix search on advanced and additive filters
bigcommerce · Jan 10, 2025 · 1298a6c · 1298a6c
2 parents f3d29f6 + 0338e0f
commit 1298a6c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 22 deletions.
diff --git a/packages/examples-site/src/pages/FiltersAdvPage/FiltersAdvancedPage.tsx b/packages/examples-site/src/pages/FiltersAdvPage/FiltersAdvancedPage.tsx
@@ -49,6 +49,7 @@ import { formatPrice } from "../../helpers/price";
 interface Item extends DummyItem, TableItem {}
 
 interface Filter {
+  name?: string;
   category: number[];
   priceMin: number | undefined;
   priceMax: number | undefined;
@@ -233,27 +234,19 @@ const PageFiltersAdvanced: FunctionComponent = () => {
     setSearchValue(event.target.value);
     // let's reset the items to the original data if the search value is empty
     if (!event.target.value) {
-      setItems(allItems);
-      setTableItems(allItems);
+      handleFiltering();
     }
   };
   // search submission handler
   const onSearchSubmit = (e) => {
     e.preventDefault();
-    if (searchValue) {
-      // let's find the items
-      const foundItems = items.filter((item) =>
-        item.name.toLowerCase().includes(searchValue.toLowerCase())
-      );
-      // set the items
-      setItems(foundItems);
-      setTableItems(foundItems);
-    }
+    handleFiltering();
   };
 
   const clearAllFilters = (e) => {
     e && e.preventDefault();
     setFilters({
+      name: filters.name,
       category: [],
       priceMin: undefined,
       priceMax: undefined,
@@ -329,6 +322,7 @@ const PageFiltersAdvanced: FunctionComponent = () => {
    */
   const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
   const [filters, setFilters] = useState<Filter>({
+    name: undefined,
     category: [],
     priceMin: undefined,
     priceMax: undefined,
@@ -352,6 +346,7 @@ const PageFiltersAdvanced: FunctionComponent = () => {
 
   const applyModalFilters = () => {
     setFilters({
+      name: filters.name,
       category: modalFilters.category,
       priceMin: modalFilters.priceMin,
       priceMax: modalFilters.priceMax,

diff --git a/packages/examples-site/src/pages/FiltersAdvancedAdditivePage/FiltersAdvancedAdditivePage.tsx b/packages/examples-site/src/pages/FiltersAdvancedAdditivePage/FiltersAdvancedAdditivePage.tsx
@@ -220,21 +220,15 @@ const PageFiltersAdvancedAdditive: FunctionComponent = () => {
     setSearchValue(event.target.value);
     // let's reset the items to the original data if the search value is empty
     if (!event.target.value) {
-      setItems(allItems);
-      setTableItems(allItems);
+      setFilterArray(filterArray);
     }
   };
   // search submission handler
   const onSearchSubmit = (e) => {
     e.preventDefault();
     if (searchValue) {
       // let's find the items
-      const foundItems = items.filter((item) =>
-        item.name.toLowerCase().includes(searchValue.toLowerCase())
-      );
-      // set the items
-      setItems(foundItems);
-      setTableItems(foundItems);
+      setFilterArray(filterArray);
     }
   };
 
@@ -266,6 +260,13 @@ const PageFiltersAdvancedAdditive: FunctionComponent = () => {
   useEffect(() => {
     let filteredItems = [...allItems];
 
+    // lets include search
+    if (searchValue) {
+      filteredItems = filteredItems.filter((item) =>
+        item.name.toLowerCase().includes(searchValue.toLowerCase())
+      );
+    }
+
     const filterfunction = (baseArray, filter) => {
       return baseArray.filter((item) => {
         // let's switch through the comparison operators
@@ -454,8 +455,8 @@ const PageFiltersAdvancedAdditive: FunctionComponent = () => {
       <Page
         header={
           <Header
-            description="There are instances where numerous filterable dimensions are not necessarily exposed in the displayed dataset. In such cases, we need to offer users the capability to obtain a subset of the data and easily view and modify the filtering parameters."
-            title="Advanced filters"
+            description="To be used wen you want to configure filters very precisely in additive mode and save teh views for later use."
+            title="Advanced additive filters with views"
             backLink={{
               text: "Back to patterns",
               onClick: () => navigate("/"),
@@ -510,7 +511,7 @@ const PageFiltersAdvancedAdditive: FunctionComponent = () => {
                       filter.field.slice(1);
                     const filterLogicalOperatorUppercase =
                       filter.logicalOperator.toUpperCase();
-                    if (filter.field === "category") {
+                    if (filter.field === "categories") {
                       const cat =
                         filter.value !== undefined
                           ? findCategoryById(productCats, Number(filter.value))