Remove filters logic from the front-end

app/frontend/src/javascript/components/store/products-list-header.tsx

@@ -8,6 +8,7 @@ interface ProductsListHeaderProps {
   selectOptions: selectOption[],
   onSelectOptionsChange: (option: selectOption) => void,
   switchLabel?: string,
+  switchChecked: boolean,
   onSwitch: (boolean) => void
 }
 /**
@@ -19,7 +20,7 @@ interface ProductsListHeaderProps {
 /**
  * Renders an accordion item
  */
-export const ProductsListHeader: React.FC<ProductsListHeaderProps> = ({ productsCount, selectOptions, onSelectOptionsChange, switchLabel, onSwitch }) => {
+export const ProductsListHeader: React.FC<ProductsListHeaderProps> = ({ productsCount, selectOptions, onSelectOptionsChange, switchLabel, switchChecked, onSwitch }) => {
   const { t } = useTranslation('admin');
 
   // Styles the React-select component
@@ -53,7 +54,7 @@ export const ProductsListHeader: React.FC<ProductsListHeaderProps> = ({ products
           <label>
             <span>{switchLabel || t('app.admin.store.products_list_header.visible_only')}</span>
             <Switch
-              checked={true}
+              checked={switchChecked}
               onChange={(checked) => onSwitch(checked)}
               width={40}
               height={19}

app/frontend/src/javascript/components/store/products.tsx

@@ -40,7 +40,6 @@ const Products: React.FC<ProductsProps> = ({ onSuccess, onError }) => {
   const [features, setFeatures] = useImmer<Filters>(initFilters);
   const [filterVisible, setFilterVisible] = useState<boolean>(false);
   const [filters, setFilters] = useImmer<Filters>(initFilters);
-  const [sortOption, setSortOption] = useState<number>(0);
   const [clearFilters, setClearFilters] = useState<boolean>(false);
   const [productCategories, setProductCategories] = useState<ProductCategory[]>([]);
   const [machines, setMachines] = useState<checklistOption[]>([]);
@@ -111,13 +110,14 @@ const Products: React.FC<ProductsProps> = ({ onSuccess, onError }) => {
    * Filter: toggle non-available products visibility
    */
   const toggleVisible = (checked: boolean) => {
-    setFilterVisible(checked);
+    setFilterVisible(!filterVisible);
+    console.log('Display on the shelf product only:', checked);
   };
 
   /**
    * Filter: by categories
    */
-  const handleSelectCategory = (c: ProductCategory, checked, instantUpdate?) => {
+  const handleSelectCategory = (c: ProductCategory, checked: boolean, instantUpdate?: boolean) => {
     let list = [...filters.categories];
     const children = productCategories
       .filter(el => el.parent_id === c.id);
@@ -180,34 +180,18 @@ const Products: React.FC<ProductsProps> = ({ onSuccess, onError }) => {
    * Apply filters
    */
   const applyFilters = () => {
-    let updatedList = [...products];
     let tags = initFilters;
-    if (filterVisible) {
-      updatedList = updatedList.filter(p => p.is_active);
-    }
 
     if (filters.categories.length) {
-      updatedList = updatedList.filter(p => filters.categories
-        .map(fc => fc.id)
-        .includes(p.product_category_id));
+      tags = { ...tags, categories: [...filters.categories] };
     }
-    tags = { ...tags, categories: [...filters.categories] };
 
     if (filters.machines.length) {
-      updatedList = updatedList.filter(p => {
-        return p.machine_ids.find(pmId => filters.machines
-          .map(fmId => fmId.value)
-          .includes(pmId));
-      });
-    }
-    tags = { ...tags, machines: [...filters.machines] };
-
-    if (sortOption >= 0) {
-      updatedList = sortProductsList(updatedList, sortOption);
+      tags = { ...tags, machines: [...filters.machines] };
     }
 
     setFeatures(tags);
-    setFilteredProductList(updatedList);
+    console.log('Apply filters:', filters);
   };
 
   /**
@@ -216,6 +200,7 @@ const Products: React.FC<ProductsProps> = ({ onSuccess, onError }) => {
   const clearAllFilters = () => {
     setFilters(initFilters);
     setClearFilters(true);
+    console.log('Clear all filters');
   };
 
   /**
@@ -230,22 +215,6 @@ const Products: React.FC<ProductsProps> = ({ onSuccess, onError }) => {
     ];
   };
 
-  /**
-   * Sorts products list
-   */
-  const sortProductsList = (list: Product[], option: number): Product[] => {
-    switch (option) {
-      case 0:
-        return list.sort((a, b) => a.name.localeCompare(b.name));
-      case 1:
-        return list.sort((a, b) => b.name.localeCompare(a.name));
-      case 2:
-        return list.sort((a, b) => a.amount - b.amount);
-      case 3:
-        return list.sort((a, b) => b.amount - a.amount);
-    }
-  };
-
   /**
    * Open/close accordion items
    */
@@ -311,6 +280,7 @@ const Products: React.FC<ProductsProps> = ({ onSuccess, onError }) => {
           productsCount={filteredProductsList.length}
           selectOptions={buildOptions()}
           onSelectOptionsChange={handleSorting}
+          switchChecked={filterVisible}
           onSwitch={toggleVisible}
         />
         <div className='features'>
@@ -367,6 +337,20 @@ const buildChecklistOptions = (items: Array<{ id?: number, name: string }>): Arr
   });
 };
 
+interface Stock {
+  from: number,
+  to: number
+}
+
+interface Filters {
+  instant: boolean,
+  categories: ProductCategory[],
+  machines: checklistOption[],
+  keywords: string[],
+  internalStock: Stock,
+  externalStock: Stock
+}
+
 const initFilters: Filters = {
   instant: false,
   categories: [],
@@ -381,17 +365,3 @@ const initFilters: Filters = {
     to: null
   }
 };
-
-interface Stock {
-  from: number,
-  to: number
-}
-
-interface Filters {
-  instant: boolean,
-  categories: ProductCategory[],
-  machines: checklistOption[],
-  keywords: string[],
-  internalStock: Stock,
-  externalStock: Stock
-}

app/frontend/src/javascript/components/store/store.tsx

@@ -40,6 +40,7 @@ const Store: React.FC<StoreProps> = ({ onError, currentUser }) => {
   const [productCategories, setProductCategories] = useState<ProductCategory[]>([]);
   const [categoriesTree, setCategoriesTree] = useState<ParentCategory[]>([]);
   const [activeCategory, setActiveCategory] = useState<ActiveCategory>();
+  const [filterVisible, setFilterVisible] = useState<boolean>(false);
   const [machines, setMachines] = useState<checklistOption[]>([]);
   const [accordion, setAccordion] = useState({});
 
@@ -139,6 +140,7 @@ const Store: React.FC<StoreProps> = ({ onError, currentUser }) => {
    * Filter: toggle non-available products visibility
    */
   const toggleVisible = (checked: boolean) => {
+    setFilterVisible(!filterVisible);
     console.log('Display in stock only:', checked);
   };
 
@@ -223,6 +225,7 @@ const Store: React.FC<StoreProps> = ({ onError, currentUser }) => {
           selectOptions={buildOptions()}
           onSelectOptionsChange={handleSorting}
           switchLabel={t('app.public.store.products.in_stock_only')}
+          switchChecked={filterVisible}
           onSwitch={toggleVisible}
         />
         <div className="products-grid">

app/frontend/src/stylesheets/modules/store/products.scss

@@ -6,6 +6,7 @@
   padding-bottom: 6rem;
   @include grid-col(12);
   gap: 3.2rem;
+  align-items: flex-start;
 
   header {
     @include header();

app/frontend/src/stylesheets/modules/store/store-filters.scss

@@ -3,6 +3,10 @@
 
   .categories {
     margin-bottom: 3.2rem;
+    .list {
+      max-height: 30vh;
+      overflow: auto;
+    }
     p {
       display: flex;
       align-items: baseline;