mirror of
https://github.com/BZmHackTeam/BezpiecznaZywnosc
synced 2024-12-22 22:46:59 +01:00
Search function
This commit is contained in:
parent
436fe37dd2
commit
dffb9eec84
GPG key ID:
08F7911F0E650C67
1 changed files with 231 additions and 192 deletions
|
|
@ -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 { useContext, useEffect, useRef, useState } from "react";
|
||||||
|
|
||||||
import styles from "./WarningsList.module.css";
|
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";
|
import { chevronBack, closeOutline } from "ionicons/icons";
|
||||||
|
|
||||||
const WarningsList: React.FC = () => {
|
const WarningsList: React.FC = () => {
|
||||||
const [dataset, setDataset] = useState<any[]>([]);
|
const [dataset, setDataset] = useState<any[]>([]);
|
||||||
const [warningsContent, setWarningsContent] = useState<any[]>([]);
|
const [warningsContent, setWarningsContent] = useState<any[]>([]);
|
||||||
const [shouldFetchMoreData, setShouldFetchMoreData] = useState(false);
|
const [shouldFetchMoreData, setShouldFetchMoreData] = useState(false);
|
||||||
const [isFirstRequest, setIsFirstRequest] = useState(true);
|
const [isFirstRequest, setIsFirstRequest] = useState(true);
|
||||||
const [pageIndex, setPageIndex] = useState(1);
|
const [pageIndex, setPageIndex] = useState(1);
|
||||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
const [currentlySelectedWarning, setCurrentlySelectedWarning] = useState<object>();
|
const [currentlySelectedWarning, setCurrentlySelectedWarning] =
|
||||||
const { push } = useIonRouter();
|
useState<object>();
|
||||||
const eventRef = useRef();
|
const { push } = useIonRouter();
|
||||||
const [searchValue, setSearchValue] = useState("");
|
const eventRef = useRef();
|
||||||
|
const [searchValue, setSearchValue] = useState("");
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function getDataset() {
|
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(
|
||||||
const data = await response.json();
|
"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);
|
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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleInputValueChange(event: any) {
|
getDataset();
|
||||||
setSearchValue(event.detail.value);
|
}, []);
|
||||||
};
|
|
||||||
|
|
||||||
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} />
|
<IonList lines="full">
|
||||||
{warningsContent.length > 0 && (
|
{warningsContent
|
||||||
<>
|
.filter((x) => {
|
||||||
<IonList lines="full">
|
if (searchValue === null || searchValue.trim().length == 0) {
|
||||||
{warningsContent.map((warningContent, key) => (
|
return true;
|
||||||
<IonItem detail onClick={() => openModal(warningContent)} button key={key}>
|
}
|
||||||
<IonLabel className="ion-text-wrap">
|
|
||||||
{warningContent.col7.val}
|
return ((x.col7 as any).val as string).includes(searchValue);
|
||||||
</IonLabel>
|
})
|
||||||
</IonItem>
|
.map((warningContent, key) => (
|
||||||
))}
|
<IonItem
|
||||||
</IonList>
|
detail
|
||||||
<IonModal isOpen={isModalOpen}>
|
onClick={() => openModal(warningContent)}
|
||||||
<IonHeader>
|
button
|
||||||
<IonToolbar>
|
key={key}
|
||||||
<IonTitle>
|
>
|
||||||
Szczegóły
|
<IonLabel className="ion-text-wrap">
|
||||||
</IonTitle>
|
{warningContent.col7.val}
|
||||||
<IonButtons slot="start">
|
</IonLabel>
|
||||||
<IonButton onClick={closeModal}>
|
</IonItem>
|
||||||
<IonIcon icon={chevronBack} />
|
))}
|
||||||
Powrót
|
</IonList>
|
||||||
</IonButton>
|
<IonModal isOpen={isModalOpen}>
|
||||||
</IonButtons>
|
<IonHeader>
|
||||||
</IonToolbar>
|
<IonToolbar>
|
||||||
</IonHeader>
|
<IonTitle>Szczegóły</IonTitle>
|
||||||
<IonContent>
|
<IonButtons slot="start">
|
||||||
{currentlySelectedWarning !== undefined && currentlySelectedWarning !== null && (
|
<IonButton onClick={closeModal}>
|
||||||
<IonList lines="full">
|
<IonIcon icon={chevronBack} />
|
||||||
<IonItem>
|
Powrót
|
||||||
<IonLabel className={`${styles.label} ion-text-wrap`}>
|
</IonButton>
|
||||||
<h1>
|
</IonButtons>
|
||||||
{(currentlySelectedWarning as any).col3.val}
|
</IonToolbar>
|
||||||
</h1>
|
</IonHeader>
|
||||||
<p>
|
<IonContent>
|
||||||
województwo
|
{currentlySelectedWarning !== undefined &&
|
||||||
</p>
|
currentlySelectedWarning !== null && (
|
||||||
</IonLabel>
|
<IonList lines="full">
|
||||||
</IonItem>
|
<IonItem>
|
||||||
<IonItem>
|
<IonLabel className={`${styles.label} ion-text-wrap`}>
|
||||||
<IonLabel className={`${styles.label} ion-text-wrap`}>
|
<h1>{(currentlySelectedWarning as any).col3.val}</h1>
|
||||||
<h1>
|
<p>województwo</p>
|
||||||
{(currentlySelectedWarning as any).col2.val}
|
</IonLabel>
|
||||||
</h1>
|
</IonItem>
|
||||||
<p>
|
<IonItem>
|
||||||
nazwa kodowa
|
<IonLabel className={`${styles.label} ion-text-wrap`}>
|
||||||
</p>
|
<h1>{(currentlySelectedWarning as any).col2.val}</h1>
|
||||||
</IonLabel>
|
<p>nazwa kodowa</p>
|
||||||
</IonItem>
|
</IonLabel>
|
||||||
<IonItem>
|
</IonItem>
|
||||||
<IonLabel className={`${styles.label} ion-text-wrap`}>
|
<IonItem>
|
||||||
<h1>
|
<IonLabel className={`${styles.label} ion-text-wrap`}>
|
||||||
{(currentlySelectedWarning as any).col5.val}
|
<h1>{(currentlySelectedWarning as any).col5.val}</h1>
|
||||||
</h1>
|
<p>firma</p>
|
||||||
<p>
|
</IonLabel>
|
||||||
firma
|
</IonItem>
|
||||||
</p>
|
<IonItem>
|
||||||
</IonLabel>
|
<IonLabel className={`${styles.label} ion-text-wrap`}>
|
||||||
</IonItem>
|
<h1>{(currentlySelectedWarning as any).col6.val}</h1>
|
||||||
<IonItem>
|
<p>kategoria</p>
|
||||||
<IonLabel className={`${styles.label} ion-text-wrap`}>
|
</IonLabel>
|
||||||
<h1>
|
</IonItem>
|
||||||
{(currentlySelectedWarning as any).col6.val}
|
<IonItem>
|
||||||
</h1>
|
<IonLabel className={`${styles.label} ion-text-wrap`}>
|
||||||
<p>
|
<h1>{(currentlySelectedWarning as any).col7.val}</h1>
|
||||||
kategoria
|
<p>nazwa produktu</p>
|
||||||
</p>
|
</IonLabel>
|
||||||
</IonLabel>
|
</IonItem>
|
||||||
</IonItem>
|
<IonItem className={`${styles.label} ion-text-wrap`}>
|
||||||
<IonItem>
|
<IonLabel>
|
||||||
<IonLabel className={`${styles.label} ion-text-wrap`}>
|
<h1 className="ion-text-wrap">
|
||||||
<h1>
|
{(currentlySelectedWarning as any).col9.val}
|
||||||
{(currentlySelectedWarning as any).col7.val}
|
</h1>
|
||||||
</h1>
|
<p>powód zgłoszenia</p>
|
||||||
<p>
|
</IonLabel>
|
||||||
nazwa produktu
|
</IonItem>
|
||||||
</p>
|
</IonList>
|
||||||
</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>
|
|
||||||
</>
|
|
||||||
)}
|
)}
|
||||||
|
</IonContent>
|
||||||
|
</IonModal>
|
||||||
|
<IonInfiniteScroll onIonInfinite={onIonScroll}>
|
||||||
|
<IonInfiniteScrollContent />
|
||||||
|
</IonInfiniteScroll>
|
||||||
</>
|
</>
|
||||||
);
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default WarningsList;
|
export default WarningsList;
|
||||||
Loading…
Reference in a new issue