Basic functionalities

This commit is contained in:
Jakub Cywka 2023-10-21 18:50:56 +02:00
parent a5618d0301
commit 37146702fb
11 changed files with 130 additions and 48 deletions

View file

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ionic App</title>
<title>BezpiecznaZywnosc</title>
<base href="/" />

View file

@ -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;
}

View file

@ -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;

View file

@ -0,0 +1,8 @@
.search {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-right: 12px;
}

View 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;

View file

@ -0,0 +1,9 @@
.searchfilter {
width: 64px;
height: 36px;
}
ion-button.searchfilter {
--padding-start: 0px !important;
--padding-end: 0px !important;
}

View file

@ -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;

View file

@ -0,0 +1,9 @@
import { IonSearchbar } from "@ionic/react";
export const Searchbar: React.FC = () => {
return (
<IonSearchbar placeholder="Wpisz słowo kluczowe" />
)
};
export default Searchbar;

View file

@ -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;

View file

@ -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 />);

View file

@ -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>
);