Search function

src/Nyanlabs.SFood.UI/sfood/src/components/WarningsList/WarningsList.tsx

@@ -1,9 +1,33 @@
-import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList, IonModal, IonRouterContext, IonSearchbar, IonTitle, IonToolbar, useIonRouter } from "@ionic/react";
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonInfiniteScroll,
+  IonInfiniteScrollContent,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonModal,
+  IonRouterContext,
+  IonSearchbar,
+  IonTitle,
+  IonToolbar,
+  useIonRouter,
+} from "@ionic/react";
 
 import { useContext, useEffect, useRef, useState } from "react";
 
 import styles from "./WarningsList.module.css";
-import { Redirect, Route, Router, __RouterContext, useLocation } from "react-router";
+import {
+  Redirect,
+  Route,
+  Router,
+  __RouterContext,
+  useLocation,
+} from "react-router";
 import { chevronBack, closeOutline } from "ionicons/icons";
 
 const WarningsList: React.FC = () => {
@@ -13,18 +37,21 @@ const WarningsList: React.FC = () => {
   const [isFirstRequest, setIsFirstRequest] = useState(true);
   const [pageIndex, setPageIndex] = useState(1);
   const [isModalOpen, setIsModalOpen] = useState(false);
-    const [currentlySelectedWarning, setCurrentlySelectedWarning] = useState<object>();
+  const [currentlySelectedWarning, setCurrentlySelectedWarning] =
+    useState<object>();
   const { push } = useIonRouter();
   const eventRef = useRef();
   const [searchValue, setSearchValue] = useState("");
 
   useEffect(() => {
     async function getDataset() {
-            const response = await fetch("https://api.dane.gov.pl/1.4/datasets/855/resources?page=1&per_page=20&sort=-data_date&include=institution");
+      const response = await fetch(
+        "https://api.dane.gov.pl/1.4/datasets/855/resources?page=1&per_page=20&sort=-data_date&include=institution"
+      );
       const data = await response.json();
 
       setDataset(data.data);
-        };
+    }
 
     getDataset();
   }, []);
@@ -34,44 +61,62 @@ const WarningsList: React.FC = () => {
       if (isFirstRequest === true) {
         async function getDatasetElements() {
           for (let datasetElement of dataset) {
-                        const response = await fetch(datasetElement.relationships.tabular_data.links.related);
+            const response = await fetch(
+              datasetElement.relationships.tabular_data.links.related
+            );
             const data = await response.json();
 
-                        setWarningsContent(previousWarningsContent => [...previousWarningsContent, data.data[0].attributes]);
+            setWarningsContent((previousWarningsContent) => [
-                    };
+              ...previousWarningsContent,
-                };
+              data.data[0].attributes,
+            ]);
+          }
+        }
 
         getDatasetElements();
       }
-        };
+    }
   }, [dataset]);
 
+  useEffect(() => {
+    if (searchValue === null || searchValue.length == 0) {
+      return;
+    }
+  }, [searchValue]);
+
   useEffect(() => {
     if (warningsContent.length === 20) {
       setIsFirstRequest(false);
-        };
+    }
   }, [warningsContent]);
 
   function onIonScroll(event: any) {
-        setPageIndex(previousPageIndex => previousPageIndex + 1);
+    setPageIndex((previousPageIndex) => previousPageIndex + 1);
     setShouldFetchMoreData(true);
     eventRef.current = event;
-    };
+  }
 
   useEffect(() => {
     if (shouldFetchMoreData) {
       async function fetchNewData() {
-                const response = await fetch(`https://api.dane.gov.pl/1.4/datasets/855/resources?page=${pageIndex}&per_page=20&sort=-data_date&include=institution`);
+        const response = await fetch(
+          `https://api.dane.gov.pl/1.4/datasets/855/resources?page=${pageIndex}&per_page=20&sort=-data_date&include=institution`
+        );
         const data = await response.json();
 
-                setDataset(previousDataset => [...previousDataset, ...data.data]);
+        setDataset((previousDataset) => [...previousDataset, ...data.data]);
 
         for (let dataElement of data.data) {
-                    const response2 = await fetch(dataElement.relationships.tabular_data.links.related);
+          const response2 = await fetch(
+            dataElement.relationships.tabular_data.links.related
+          );
           const data2 = await response2.json();
 
-                    setWarningsContent(previousWarningsContent => [...previousWarningsContent, data2.data[0].attributes]);
+          setWarningsContent((previousWarningsContent) => [
-                };
+            ...previousWarningsContent,
+            data2.data[0].attributes,
+          ]);
+        }
 
         let id = setTimeout(() => {
           setShouldFetchMoreData(false);
@@ -91,7 +136,7 @@ const WarningsList: React.FC = () => {
     setCurrentlySelectedWarning(warningContent);
     console.log(warningContent);
     setIsModalOpen(true);
-    };
+  }
 
   function closeModal() {
     setCurrentlySelectedWarning(undefined);
@@ -100,16 +145,33 @@ const WarningsList: React.FC = () => {
 
   function handleInputValueChange(event: any) {
     setSearchValue(event.detail.value);
-    };
+  }
 
   return (
     <>
-            <IonSearchbar placeholder="Wpisz słowo kluczowe" value={searchValue} onIonChange={handleInputValueChange} />
+      <IonSearchbar
+        placeholder="Wpisz słowo kluczowe"
+        value={searchValue}
+        onIonChange={handleInputValueChange}
+      />
       {warningsContent.length > 0 && (
         <>
           <IonList lines="full">
-                            {warningsContent.map((warningContent, key) => (
+            {warningsContent
-                                <IonItem detail onClick={() => openModal(warningContent)} button key={key}>
+              .filter((x) => {
+                if (searchValue === null || searchValue.trim().length == 0) {
+                  return true;
+                }
+
+                return ((x.col7 as any).val as string).includes(searchValue);
+              })
+              .map((warningContent, key) => (
+                <IonItem
+                  detail
+                  onClick={() => openModal(warningContent)}
+                  button
+                  key={key}
+                >
                   <IonLabel className="ion-text-wrap">
                     {warningContent.col7.val}
                   </IonLabel>
@@ -119,9 +181,7 @@ const WarningsList: React.FC = () => {
           <IonModal isOpen={isModalOpen}>
             <IonHeader>
               <IonToolbar>
-                                    <IonTitle>
+                <IonTitle>Szczegóły</IonTitle>
-                                        Szczegóły
-                                    </IonTitle>
                 <IonButtons slot="start">
                   <IonButton onClick={closeModal}>
                     <IonIcon icon={chevronBack} />
@@ -131,56 +191,37 @@ const WarningsList: React.FC = () => {
               </IonToolbar>
             </IonHeader>
             <IonContent>
-                                {currentlySelectedWarning !== undefined && currentlySelectedWarning !== null && (
+              {currentlySelectedWarning !== undefined &&
+                currentlySelectedWarning !== null && (
                   <IonList lines="full">
                     <IonItem>
                       <IonLabel className={`${styles.label} ion-text-wrap`}>
-                                                <h1>
+                        <h1>{(currentlySelectedWarning as any).col3.val}</h1>
-                                                    {(currentlySelectedWarning as any).col3.val}
+                        <p>województwo</p>
-                                                </h1>
-                                                <p>
-                                                    województwo
-                                                </p>
                       </IonLabel>
                     </IonItem>
                     <IonItem>
                       <IonLabel className={`${styles.label} ion-text-wrap`}>
-                                                <h1>
+                        <h1>{(currentlySelectedWarning as any).col2.val}</h1>
-                                                    {(currentlySelectedWarning as any).col2.val}
+                        <p>nazwa kodowa</p>
-                                                </h1>
-                                                <p>
-                                                    nazwa kodowa
-                                                </p>
                       </IonLabel>
                     </IonItem>
                     <IonItem>
                       <IonLabel className={`${styles.label} ion-text-wrap`}>
-                                                <h1>
+                        <h1>{(currentlySelectedWarning as any).col5.val}</h1>
-                                                    {(currentlySelectedWarning as any).col5.val}
+                        <p>firma</p>
-                                                </h1>
-                                                <p>
-                                                    firma
-                                                </p>
                       </IonLabel>
                     </IonItem>
                     <IonItem>
                       <IonLabel className={`${styles.label} ion-text-wrap`}>
-                                                <h1>
+                        <h1>{(currentlySelectedWarning as any).col6.val}</h1>
-                                                    {(currentlySelectedWarning as any).col6.val}
+                        <p>kategoria</p>
-                                                </h1>
-                                                <p>
-                                                    kategoria
-                                                </p>
                       </IonLabel>
                     </IonItem>
                     <IonItem>
                       <IonLabel className={`${styles.label} ion-text-wrap`}>
-                                                <h1>
+                        <h1>{(currentlySelectedWarning as any).col7.val}</h1>
-                                                    {(currentlySelectedWarning as any).col7.val}
+                        <p>nazwa produktu</p>
-                                                </h1>
-                                                <p>
-                                                    nazwa produktu
-                                                </p>
                       </IonLabel>
                     </IonItem>
                     <IonItem className={`${styles.label} ion-text-wrap`}>
@@ -188,9 +229,7 @@ const WarningsList: React.FC = () => {
                         <h1 className="ion-text-wrap">
                           {(currentlySelectedWarning as any).col9.val}
                         </h1>
-                                                <p>
+                        <p>powód zgłoszenia</p>
-                                                    powód zgłoszenia
-                                                </p>
                       </IonLabel>
                     </IonItem>
                   </IonList>