From dffb9eec84101e98bff9e614adb67e9bb799a431 Mon Sep 17 00:00:00 2001
From: femsci <nya@femboy.science>
Date: Sun, 22 Oct 2023 10:04:07 +0200
Subject: [PATCH] Search function

---
 .../components/WarningsList/WarningsList.tsx  | 423 ++++++++++--------
 1 file changed, 231 insertions(+), 192 deletions(-)

diff --git a/src/Nyanlabs.SFood.UI/sfood/src/components/WarningsList/WarningsList.tsx b/src/Nyanlabs.SFood.UI/sfood/src/components/WarningsList/WarningsList.tsx
index fd51296..5145e70 100644
--- a/src/Nyanlabs.SFood.UI/sfood/src/components/WarningsList/WarningsList.tsx
+++ b/src/Nyanlabs.SFood.UI/sfood/src/components/WarningsList/WarningsList.tsx
@@ -1,209 +1,248 @@
-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 = () => {
-    const [dataset, setDataset] = useState<any[]>([]);
-    const [warningsContent, setWarningsContent] = useState<any[]>([]);
-    const [shouldFetchMoreData, setShouldFetchMoreData] = useState(false);
-    const [isFirstRequest, setIsFirstRequest] = useState(true);
-    const [pageIndex, setPageIndex] = useState(1);
-    const [isModalOpen, setIsModalOpen] = useState(false);
-    const [currentlySelectedWarning, setCurrentlySelectedWarning] = useState<object>();
-    const { push } = useIonRouter();
-    const eventRef = useRef();
-    const [searchValue, setSearchValue] = useState("");
+  const [dataset, setDataset] = useState<any[]>([]);
+  const [warningsContent, setWarningsContent] = useState<any[]>([]);
+  const [shouldFetchMoreData, setShouldFetchMoreData] = useState(false);
+  const [isFirstRequest, setIsFirstRequest] = useState(true);
+  const [pageIndex, setPageIndex] = useState(1);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  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 data = await response.json();
+  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 data = await response.json();
 
-            setDataset(data.data);
-        };
-
-        getDataset();
-    }, []);
-
-    useEffect(() => {
-        if (dataset !== undefined && dataset !== null) {
-            if (isFirstRequest === true) {
-                async function getDatasetElements() {
-                    for (let datasetElement of dataset) {
-                        const response = await fetch(datasetElement.relationships.tabular_data.links.related);
-                        const data = await response.json();
-                        
-                        setWarningsContent(previousWarningsContent => [...previousWarningsContent, data.data[0].attributes]);
-                    };
-                };
-                
-                getDatasetElements();
-            }
-        };
-    }, [dataset]);
-
-    useEffect(() => {
-        if (warningsContent.length === 20) {
-            setIsFirstRequest(false);
-        };
-    }, [warningsContent]);
-
-    function onIonScroll(event: any) {
-        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 data = await response.json();
-
-                setDataset(previousDataset => [...previousDataset, ...data.data]);
-
-                for (let dataElement of data.data) {
-                    const response2 = await fetch(dataElement.relationships.tabular_data.links.related);
-                    const data2 = await response2.json();
-
-                    setWarningsContent(previousWarningsContent => [...previousWarningsContent, data2.data[0].attributes]);
-                };
-
-                let id = setTimeout(() => {
-                    setShouldFetchMoreData(false);
-                    (eventRef.current as any).target.complete();
-                }, 5000);
-                
-                return () => {
-                    clearTimeout(id);
-                };
-            }
-
-            fetchNewData();
-        }
-    }, [shouldFetchMoreData]);
-
-    function openModal(warningContent: any) {
-        setCurrentlySelectedWarning(warningContent);
-        console.log(warningContent);
-        setIsModalOpen(true);
-    };
-
-    function closeModal() {
-        setCurrentlySelectedWarning(undefined);
-        setIsModalOpen(false);
+      setDataset(data.data);
     }
 
-    function handleInputValueChange(event: any) {
-        setSearchValue(event.detail.value);
-    };
+    getDataset();
+  }, []);
 
-    return (
+  useEffect(() => {
+    if (dataset !== undefined && dataset !== null) {
+      if (isFirstRequest === true) {
+        async function getDatasetElements() {
+          for (let datasetElement of dataset) {
+            const response = await fetch(
+              datasetElement.relationships.tabular_data.links.related
+            );
+            const data = await response.json();
+
+            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);
+    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 data = await response.json();
+
+        setDataset((previousDataset) => [...previousDataset, ...data.data]);
+
+        for (let dataElement of data.data) {
+          const response2 = await fetch(
+            dataElement.relationships.tabular_data.links.related
+          );
+          const data2 = await response2.json();
+
+          setWarningsContent((previousWarningsContent) => [
+            ...previousWarningsContent,
+            data2.data[0].attributes,
+          ]);
+        }
+
+        let id = setTimeout(() => {
+          setShouldFetchMoreData(false);
+          (eventRef.current as any).target.complete();
+        }, 5000);
+
+        return () => {
+          clearTimeout(id);
+        };
+      }
+
+      fetchNewData();
+    }
+  }, [shouldFetchMoreData]);
+
+  function openModal(warningContent: any) {
+    setCurrentlySelectedWarning(warningContent);
+    console.log(warningContent);
+    setIsModalOpen(true);
+  }
+
+  function closeModal() {
+    setCurrentlySelectedWarning(undefined);
+    setIsModalOpen(false);
+  }
+
+  function handleInputValueChange(event: any) {
+    setSearchValue(event.detail.value);
+  }
+
+  return (
+    <>
+      <IonSearchbar
+        placeholder="Wpisz słowo kluczowe"
+        value={searchValue}
+        onIonChange={handleInputValueChange}
+      />
+      {warningsContent.length > 0 && (
         <>
-            <IonSearchbar placeholder="Wpisz słowo kluczowe" value={searchValue} onIonChange={handleInputValueChange} />
-                {warningsContent.length > 0 && (
-                    <>
-                        <IonList lines="full">
-                            {warningsContent.map((warningContent, key) => (
-                                <IonItem detail onClick={() => openModal(warningContent)} button key={key}>
-                                    <IonLabel className="ion-text-wrap">
-                                        {warningContent.col7.val}
-                                    </IonLabel>
-                                </IonItem>
-                            ))}
-                        </IonList>
-                        <IonModal isOpen={isModalOpen}>
-                            <IonHeader>
-                                <IonToolbar>
-                                    <IonTitle>
-                                        Szczegóły
-                                    </IonTitle>
-                                    <IonButtons slot="start">
-                                        <IonButton onClick={closeModal}>
-                                            <IonIcon icon={chevronBack} />
-                                            Powrót
-                                        </IonButton>
-                                    </IonButtons>
-                                </IonToolbar>
-                            </IonHeader>
-                            <IonContent>
-                                {currentlySelectedWarning !== undefined && currentlySelectedWarning !== null && (
-                                    <IonList lines="full">
-                                        <IonItem>
-                                            <IonLabel className={`${styles.label} ion-text-wrap`}>
-                                                <h1>
-                                                    {(currentlySelectedWarning as any).col3.val}
-                                                </h1>
-                                                <p>
-                                                    województwo
-                                                </p>
-                                            </IonLabel>
-                                        </IonItem>
-                                        <IonItem>
-                                            <IonLabel className={`${styles.label} ion-text-wrap`}>
-                                                <h1>
-                                                    {(currentlySelectedWarning as any).col2.val}
-                                                </h1>
-                                                <p>
-                                                    nazwa kodowa
-                                                </p>
-                                            </IonLabel>
-                                        </IonItem>
-                                        <IonItem>
-                                            <IonLabel className={`${styles.label} ion-text-wrap`}>
-                                                <h1>
-                                                    {(currentlySelectedWarning as any).col5.val}
-                                                </h1>
-                                                <p>
-                                                    firma
-                                                </p>
-                                            </IonLabel>
-                                        </IonItem>
-                                        <IonItem>
-                                            <IonLabel className={`${styles.label} ion-text-wrap`}>
-                                                <h1>
-                                                    {(currentlySelectedWarning as any).col6.val}
-                                                </h1>
-                                                <p>
-                                                    kategoria
-                                                </p>
-                                            </IonLabel>
-                                        </IonItem>
-                                        <IonItem>
-                                            <IonLabel className={`${styles.label} ion-text-wrap`}>
-                                                <h1>
-                                                    {(currentlySelectedWarning as any).col7.val}
-                                                </h1>
-                                                <p>
-                                                    nazwa produktu
-                                                </p>
-                                            </IonLabel>
-                                        </IonItem>
-                                        <IonItem className={`${styles.label} ion-text-wrap`}>
-                                            <IonLabel>
-                                                <h1 className="ion-text-wrap">
-                                                    {(currentlySelectedWarning as any).col9.val}
-                                                </h1>
-                                                <p>
-                                                    powód zgłoszenia
-                                                </p>
-                                            </IonLabel>
-                                        </IonItem>
-                                    </IonList>
-                                )}
-                            </IonContent>
-                        </IonModal>
-                        <IonInfiniteScroll onIonInfinite={onIonScroll}>
-                            <IonInfiniteScrollContent />
-                        </IonInfiniteScroll>
-                    </>
+          <IonList lines="full">
+            {warningsContent
+              .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>
+                </IonItem>
+              ))}
+          </IonList>
+          <IonModal isOpen={isModalOpen}>
+            <IonHeader>
+              <IonToolbar>
+                <IonTitle>Szczegóły</IonTitle>
+                <IonButtons slot="start">
+                  <IonButton onClick={closeModal}>
+                    <IonIcon icon={chevronBack} />
+                    Powrót
+                  </IonButton>
+                </IonButtons>
+              </IonToolbar>
+            </IonHeader>
+            <IonContent>
+              {currentlySelectedWarning !== undefined &&
+                currentlySelectedWarning !== null && (
+                  <IonList lines="full">
+                    <IonItem>
+                      <IonLabel className={`${styles.label} ion-text-wrap`}>
+                        <h1>{(currentlySelectedWarning as any).col3.val}</h1>
+                        <p>województwo</p>
+                      </IonLabel>
+                    </IonItem>
+                    <IonItem>
+                      <IonLabel className={`${styles.label} ion-text-wrap`}>
+                        <h1>{(currentlySelectedWarning as any).col2.val}</h1>
+                        <p>nazwa kodowa</p>
+                      </IonLabel>
+                    </IonItem>
+                    <IonItem>
+                      <IonLabel className={`${styles.label} ion-text-wrap`}>
+                        <h1>{(currentlySelectedWarning as any).col5.val}</h1>
+                        <p>firma</p>
+                      </IonLabel>
+                    </IonItem>
+                    <IonItem>
+                      <IonLabel className={`${styles.label} ion-text-wrap`}>
+                        <h1>{(currentlySelectedWarning as any).col6.val}</h1>
+                        <p>kategoria</p>
+                      </IonLabel>
+                    </IonItem>
+                    <IonItem>
+                      <IonLabel className={`${styles.label} ion-text-wrap`}>
+                        <h1>{(currentlySelectedWarning as any).col7.val}</h1>
+                        <p>nazwa produktu</p>
+                      </IonLabel>
+                    </IonItem>
+                    <IonItem className={`${styles.label} ion-text-wrap`}>
+                      <IonLabel>
+                        <h1 className="ion-text-wrap">
+                          {(currentlySelectedWarning as any).col9.val}
+                        </h1>
+                        <p>powód zgłoszenia</p>
+                      </IonLabel>
+                    </IonItem>
+                  </IonList>
                 )}
+            </IonContent>
+          </IonModal>
+          <IonInfiniteScroll onIonInfinite={onIonScroll}>
+            <IonInfiniteScrollContent />
+          </IonInfiniteScroll>
         </>
-    );
+      )}
+    </>
+  );
 };
 
-export default WarningsList;
\ No newline at end of file
+export default WarningsList;