Created Filter Button w/ functionality

fetec-gda/src/components/FilterPopOver/FilterPopOver.tsx

@@ -0,0 +1,49 @@
+import {
+    IonCheckbox,
+    IonContent,
+    IonItem,
+    IonLabel,
+    IonList,
+} from "@ionic/react";
+import { Dispatch, SetStateAction } from "react";
+
+interface ContainerProps {
+    categories: { val: string; isChecked: boolean }[];
+    setCheckBoxList: Dispatch<
+        SetStateAction<{ val: string; isChecked: boolean }[]>
+    >;
+}
+
+const FilterPopOver: React.FC<ContainerProps> = ({
+    categories,
+    setCheckBoxList,
+}) => {
+    const handleCheckboxChange = (cat: any) => {
+        setCheckBoxList(
+            categories.map((c) =>
+                c.val === cat ? { val: c.val, isChecked: !c.isChecked } : c
+            )
+        );
+    };
+    return (
+        <IonContent>
+            <IonList>
+                {categories.map((category) => (
+                    <IonItem key={category.val}>
+                        <IonLabel>{category.val}</IonLabel>
+                        <IonCheckbox
+                            color="primary"
+                            checked={category.isChecked}
+                            slot="start"
+                            onIonChange={() => {
+                                handleCheckboxChange(category.val);
+                            }}
+                        ></IonCheckbox>
+                    </IonItem>
+                ))}
+            </IonList>
+        </IonContent>
+    );
+};
+
+export default FilterPopOver;

fetec-gda/src/data/brands.ts

@@ -24,6 +24,7 @@ const brands = [
                 role: "Vicepresidente",
             },
         ],
+        category: "Technology",
         favorite: false,
     },
     {
@@ -51,6 +52,7 @@ const brands = [
                 role: "Vicepresidente",
             },
         ],
+        category: "Food & Drinks",
         favorite: false,
     },
     {
@@ -78,6 +80,7 @@ const brands = [
                 role: "Vicepresidente",
             },
         ],
+        category: "Technology",
         favorite: false,
     },
     {
@@ -105,6 +108,7 @@ const brands = [
                 role: "Vicepresidente",
             },
         ],
+        category: "Fashion",
         favorite: false,
     },
     {
@@ -132,6 +136,7 @@ const brands = [
                 role: "Vicepresidente",
             },
         ],
+        category: "Art",
         favorite: false,
     },
     {
@@ -159,6 +164,7 @@ const brands = [
                 role: "Vicepresidente",
             },
         ],
+        category: "Green world",
         favorite: false,
     },
 ];

fetec-gda/src/data/categories.ts

@@ -0,0 +1,9 @@
+const brands = [
+    { val: "Technology", isChecked: true },
+    { val: "Food & Drinks", isChecked: true },
+    { val: "Fashion", isChecked: true },
+    { val: "Art", isChecked: true },
+    { val: "Green world", isChecked: true },
+];
+
+export default brands;

fetec-gda/src/hooks/useIsMount.ts

@@ -0,0 +1,11 @@
+import { useRef, useEffect } from "react";
+
+// Custom hook to detect if we are on the first render (return true)
+// or not (return false)
+export const useIsMount = () => {
+    const isMountRef = useRef(true);
+    useEffect(() => {
+        isMountRef.current = false;
+    }, []);
+    return isMountRef.current;
+};

fetec-gda/src/pages/Home.tsx

@@ -1,53 +1,102 @@
 import { useEffect, useState } from "react";
 import {
+    IonButton,
     IonCol,
     IonContent,
     IonGrid,
     IonHeader,
     IonIcon,
     IonNote,
     IonPage,
+    IonPopover,
     IonRow,
     IonSearchbar,
     IonTitle,
     IonToolbar,
 } from "@ionic/react";
-import { searchCircleOutline } from "ionicons/icons";
+import { filterOutline, searchCircleOutline } from "ionicons/icons";
 
 import ElementCard from "../components/ElementCard";
+import FilterPopOver from "../components/FilterPopOver/FilterPopOver";
 import { getBrandsByName } from "../selectors/getBrandsByName";
+import { getBrandsByCategories } from "../selectors/getBrandsByCategories";
+import { useIsMount } from "../hooks/useIsMount";
+
 import brands from "../data/brands";
+import categories from "../data/categories";
 
 import "./Home.css";
 import "../theme/styles.css";
 
 const Home: React.FC = () => {
     const [searchValue, setSearchValue] = useState("");
-    const [brandsArr, setBrandsArr] = useState(brands);
+    const [brandsArr, setBrandsArr] = useState([...brands]);
+
+    const [popoverState, setShowPopover] = useState({
+        showPopover: false,
+        event: undefined,
+    });
+
+    const [checkboxList, setCheckboxList] = useState([...categories]);
+
+    const isMount = useIsMount();
 
     useEffect(() => {
-        if (searchValue === "") {
-            setBrandsArr(brands);
-        } else {
-            setBrandsArr(getBrandsByName(searchValue));
+        if (!isMount) {
+            if (searchValue === "") {
+                setBrandsArr([...brands]);
+            } else {
+                setBrandsArr(getBrandsByName(searchValue));
+            }
         }
     }, [searchValue]);
 
+    useEffect(() => {
+        if (!isMount) {
+            setBrandsArr(getBrandsByCategories(checkboxList));
+        }
+    }, [checkboxList]);
+
+    const handleFilterClicked = (e: any) => {
+        setShowPopover({ showPopover: !popoverState.showPopover, event: e });
+    };
+
     return (
         <IonPage>
             <IonHeader>
                 <IonToolbar>
                     <IonTitle className="fontSize-25">Home</IonTitle>
                 </IonToolbar>
-                <IonToolbar>
+                <IonToolbar className="p-5">
                     <IonSearchbar
+                        slot="start"
                         className="rounded-20"
                         type="text"
                         color="light"
                         placeholder={"Search"}
                         onIonChange={(e) => setSearchValue(e.detail.value!)}
                     />
+                    <IonButton
+                        slot="end"
+                        color="light"
+                        size="small"
+                        onClick={handleFilterClicked}
+                    >
+                        <IonIcon icon={filterOutline} />
+                    </IonButton>
                 </IonToolbar>
+                <IonPopover
+                    children={
+                        <FilterPopOver
+                            categories={checkboxList}
+                            setCheckBoxList={setCheckboxList}
+                        />
+                    }
+                    event={popoverState.event}
+                    isOpen={popoverState.showPopover}
+                    onDidDismiss={handleFilterClicked}
+                    showBackdrop={false}
+                ></IonPopover>
             </IonHeader>
 
             <IonContent fullscreen>
@@ -76,7 +125,6 @@ const Home: React.FC = () => {
                         </div>
                     )}
                 </IonGrid>
-                {/* <CardsGrid cards={brands}/> */}
             </IonContent>
         </IonPage>
     );

fetec-gda/src/selectors/getBrandsByCategories.ts

@@ -0,0 +1,13 @@
+import brands from "../data/brands";
+
+// Function to filter the brands by categories selected
+export const getBrandsByCategories = (
+    categories: { val: string; isChecked: boolean }[],
+    array = brands
+) => {
+    return array.filter((brand) =>
+        categories.some(
+            (cat) => cat["val"] === brand.category && cat["isChecked"] === true
+        )
+    );
+};

fetec-gda/src/theme/styles.css

@@ -5,3 +5,7 @@
 .fontSize-25 {
     font-size: 25px;
 }
+
+.p-5 {
+    padding: 5px;
+}