mirror of
https://github.com/BZmHackTeam/BezpiecznaZywnosc
synced 2024-12-22 14:46:58 +01:00
Basic functionalities
This commit is contained in:
Jakub Cywka
parent
a5618d0301
commit
37146702fb
11 changed files with 130 additions and 48 deletions
|
|
@ -2,7 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Ionic App</title>
|
||||
<title>BezpiecznaZywnosc</title>
|
||||
|
||||
<base href="/" />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +0,0 @@
|
|||
#container {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
#container strong {
|
||||
font-size: 20px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
#container p {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #8c8c8c;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#container a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
import './ExploreContainer.css';
|
||||
|
||||
interface ContainerProps { }
|
||||
|
||||
const ExploreContainer: React.FC<ContainerProps> = () => {
|
||||
return (
|
||||
<div id="container">
|
||||
<strong>Ready to create an app?</strong>
|
||||
<p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExploreContainer;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
.search {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-right: 12px;
|
||||
}
|
||||
15
src/Nyanlabs.SFood.UI/sfood/src/components/Search/Search.tsx
Normal file
15
src/Nyanlabs.SFood.UI/sfood/src/components/Search/Search.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import SearchFilter from "./SearchFilter/SearchFilter";
|
||||
import Searchbar from "./Searchbar/Searchbar";
|
||||
|
||||
import styles from "./Search.module.css";
|
||||
|
||||
const Search: React.FC = () => {
|
||||
return (
|
||||
<div className={`${styles.search}`}>
|
||||
<Searchbar />
|
||||
<SearchFilter />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Search;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
.searchfilter {
|
||||
width: 64px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
ion-button.searchfilter {
|
||||
--padding-start: 0px !important;
|
||||
--padding-end: 0px !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { IonButton, IonIcon } from "@ionic/react";
|
||||
|
||||
import { ellipsisVerticalOutline } from "ionicons/icons";
|
||||
|
||||
import styles from "./SearchFilter.module.css";
|
||||
|
||||
const SearchFilter: React.FC = () => {
|
||||
return (
|
||||
<IonButton className={styles.searchfilter} size="small" shape="round">
|
||||
<IonIcon icon={ellipsisVerticalOutline} />
|
||||
</IonButton>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchFilter;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { IonSearchbar } from "@ionic/react";
|
||||
|
||||
export const Searchbar: React.FC = () => {
|
||||
return (
|
||||
<IonSearchbar placeholder="Wpisz słowo kluczowe" />
|
||||
)
|
||||
};
|
||||
|
||||
export default Searchbar;
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
import { IonItem, IonLabel, IonList } from "@ionic/react";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
const WarningsList: React.FC = () => {
|
||||
const [dataset, setDataset] = useState<any[]>([]);
|
||||
const [warningsIds, setWarningsIds] = useState<string[]>([]);
|
||||
const [warningsContent, setWarningsContent] = useState<any[]>([]);
|
||||
|
||||
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);
|
||||
console.log(data.data);
|
||||
};
|
||||
|
||||
getDataset();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (dataset !== null && dataset !== undefined) {
|
||||
const datasetLength = (dataset as any).length;
|
||||
|
||||
for (let i = 0; i < datasetLength; i++) {
|
||||
setWarningsIds(previousWarningsIds => [...previousWarningsIds, (dataset as any)[i].id]);
|
||||
}
|
||||
}
|
||||
}, [dataset]);
|
||||
|
||||
useEffect(() => {
|
||||
if (warningsIds.length === 20) {
|
||||
async function getWarningsContent(id: string) {
|
||||
const response = await fetch(`https://api.dane.gov.pl/1.4/resources/${id}/data?page=1&per_page=20`);
|
||||
const data = await response.json();
|
||||
|
||||
setWarningsContent(previousWarningsContent => [...previousWarningsContent, data.data[0].attributes]);
|
||||
};
|
||||
|
||||
for (let i = 0; i < warningsIds.length; i++) {
|
||||
getWarningsContent(warningsIds[i]);
|
||||
};
|
||||
|
||||
console.log("First content request");
|
||||
}
|
||||
}, [warningsIds]);
|
||||
|
||||
return warningsContent.length > 0 ? (
|
||||
<>
|
||||
<IonList lines="full">
|
||||
{warningsContent.map((warningContent, key) => (
|
||||
<IonItem key={key}>
|
||||
<IonLabel>
|
||||
{warningContent.col7.val}
|
||||
</IonLabel>
|
||||
</IonItem>
|
||||
))}
|
||||
</IonList>
|
||||
</>
|
||||
) : <></>;
|
||||
};
|
||||
|
||||
export default WarningsList;
|
||||
|
|
@ -4,8 +4,4 @@ import App from './App';
|
|||
|
||||
const container = document.getElementById('root');
|
||||
const root = createRoot(container!);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
root.render(<App />);
|
||||
|
|
@ -1,5 +1,8 @@
|
|||
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
|
||||
import ExploreContainer from '../components/ExploreContainer';
|
||||
|
||||
import WarningsList from '../components/WarningsList/WarningsList';
|
||||
import Search from '../components/Search/Search';
|
||||
|
||||
import './Home.css';
|
||||
|
||||
const Home: React.FC = () => {
|
||||
|
|
@ -7,16 +10,17 @@ const Home: React.FC = () => {
|
|||
<IonPage>
|
||||
<IonHeader>
|
||||
<IonToolbar>
|
||||
<IonTitle>Blank</IonTitle>
|
||||
<IonTitle>Bezpieczna żywnosc</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent fullscreen>
|
||||
<IonHeader collapse="condense">
|
||||
<IonToolbar>
|
||||
<IonTitle size="large">Blank</IonTitle>
|
||||
<IonTitle size="large">Bezpieczna żywnosc</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<ExploreContainer />
|
||||
<Search />
|
||||
<WarningsList />
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue