Skip to content
Snippets Groups Projects
Commit 16c84462 authored by YAHYAOUI Firas's avatar YAHYAOUI Firas
Browse files

add: list nearby stops

parent d4d89875
No related branches found
No related tags found
1 merge request!8Dev/client
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import { getNearbyStops, getStopsPaginated } from "../../utils";
import { useState } from "react";
import { Button, Col, Form, Spinner } from "react-bootstrap";
const FormArretProche = () => {
const [page, setPage] = useState(1);
const [filter, setFilter] = useState("");
const [showResult, setShowResult] = useState(false);
const [latitude, setLatitude] = useState("47,264");
const [longitude, setLongitude] = useState("-1,585");
const { data: listArrets, isFetched } = useQuery({
queryKey: ["arrets_proches", { latitude, longitude }],
enabled: showResult,
queryFn: async () => getNearbyStops(latitude, longitude),
});
const { isPending, isError, error, data } = useQuery({
queryKey: ["arrets_proches", { page, filter, latitude, longitude }],
placeholderData: keepPreviousData,
enabled: isFetched,
queryFn: () => getStopsPaginated(listArrets!, page, filter),
});
return (
<>
<Form
onSubmit={(e) => {
e.preventDefault();
setShowResult(true);
}}
>
<h1>Recherche arrêts proches d'une latitude/longitude</h1>
<Col xs={4}>
<Form.Group className="mb-3" controlId="formLatitude">
<Form.Label>Latitude</Form.Label>
<Form.Control
type="text"
defaultValue={latitude}
onChange={(e) => setLatitude(e.target.value)}
pattern="-?\d+(,\d+)?(\.\d+)?"
step="any"
required
/>
<Form.Text className="text-muted">
Doit être un nombre décimal ex "47,264"
</Form.Text>
</Form.Group>
<Form.Group className="mb-3" controlId="formLongitude">
<Form.Label>Longitude</Form.Label>
<Form.Control
type="text"
defaultValue={longitude}
onChange={(e) => setLongitude(e.target.value)}
pattern="-?\d+(,\d+)?(\.\d+)?"
step="any"
required
/>
<Form.Text className="text-muted">
Doit être un nombre décimal ex "-1,585"
</Form.Text>
</Form.Group>
</Col>
<Form.Group className="mb-3" controlId="ArretSearchBar">
<Form.Label>Barre de recherche</Form.Label>
<Form.Control
type="text"
placeholder="Ecrire ici pour filtrer"
onChange={(e) => {
setPage(1);
setFilter(e.target.value);
}}
/>
</Form.Group>
<Button className="mt-1" variant="primary" type="submit">
Submit
</Button>
<Button
className="mt-1"
variant="primary"
type="reset"
onClick={() => setShowResult(false)}
>
Clear
</Button>
</Form>
{!showResult ? (
<></>
) : isPending ? (
<Spinner animation="border" role="status">
<span className="visually-hidden">Loading...</span>
</Spinner>
) : isError ? (
<p>
An error has occured: {error.name} - {error.message}
</p>
) : (
<Col md={4} className="mt-3">
{data.arrets.map((arret) => (
<p key={arret.id}>{arret.libelle}</p>
))}
<Button
disabled={data.previousPage === undefined}
onClick={() => setPage(page - 1)}
>
Previous
</Button>
<Button
disabled={data.nextPage === undefined}
onClick={() => setPage(page + 1)}
>
Next
</Button>
</Col>
)}
</>
);
};
export default FormArretProche;
...@@ -3,7 +3,7 @@ import { getStops, getStopsPaginated } from "../../utils"; ...@@ -3,7 +3,7 @@ import { getStops, getStopsPaginated } from "../../utils";
import { useState } from "react"; import { useState } from "react";
import { Button, Col, Form, Spinner } from "react-bootstrap"; import { Button, Col, Form, Spinner } from "react-bootstrap";
const FormulaireArret = () => { const FormArret = () => {
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const [filter, setFilter] = useState(""); const [filter, setFilter] = useState("");
const [showResult, setShowResult] = useState(false); const [showResult, setShowResult] = useState(false);
...@@ -85,4 +85,4 @@ const FormulaireArret = () => { ...@@ -85,4 +85,4 @@ const FormulaireArret = () => {
); );
}; };
export default FormulaireArret; export default FormArret;
import { Col, Container, Form, Row } from "react-bootstrap"; import { Col, Container, Form, Row } from "react-bootstrap";
import FormulaireArret from "./Formulaires/Formulaire-Arret"; import FormArret from "./Forms/Form-Arret";
import FormArretProche from "./Forms/Form-Arret-Proche";
type FormulaireProps = { type FormulaireProps = {
selection: number; selection: number;
}; };
const Formulaire = ({ selection }: FormulaireProps) => { const Formulaire = ({ selection }: FormulaireProps) => {
const getFormsGroups = (selection: number) => { const getFormsGroups = (selection: number) => {
switch (selection) { switch (selection) {
case 0: case 0:
return ( return <FormArretProche />;
<>
<h1>Recherche arrêts proches d'une latitude/longitude</h1>
<Col xs={4}>
<Form.Group className="mb-3" controlId="formLatitude">
<Form.Label>Latitude</Form.Label>
<Form.Control
type="text"
defaultValue="47,264"
pattern="-?\d+(,\d+)?(\.\d+)?"
step="any"
required
/>
<Form.Text className="text-muted">
Doit être un nombre décimal ex "47,264"
</Form.Text>
</Form.Group>
<Form.Group className="mb-3" controlId="formLongitude">
<Form.Label>Longitude</Form.Label>
<Form.Control
type="text"
defaultValue="-1,585"
pattern="-?\d+(,\d+)?(\.\d+)?"
step="any"
required
/>
<Form.Text className="text-muted">
Doit être un nombre décimal ex "-1,585"
</Form.Text>
</Form.Group>
</Col>
</>
);
case 1: case 1:
return <FormulaireArret />; return <FormArret />;
case 2: case 2:
return ( return (
<> <>
...@@ -90,9 +57,7 @@ const Formulaire = ({ selection }: FormulaireProps) => { ...@@ -90,9 +57,7 @@ const Formulaire = ({ selection }: FormulaireProps) => {
return ( return (
<Container> <Container>
<Row> <Row>{getFormsGroups(selection)}</Row>
{getFormsGroups(selection)}
</Row>
</Container> </Container>
); );
}; };
......
...@@ -24,3 +24,8 @@ export const getStops = async () => { ...@@ -24,3 +24,8 @@ export const getStops = async () => {
const result = await axios.get<Omit<Arret, "id">[]>(`${URL}/get_all_stations/`); const result = await axios.get<Omit<Arret, "id">[]>(`${URL}/get_all_stations/`);
return result.data.map((arret, i) => { return { ...arret, id: i } as Arret }); return result.data.map((arret, i) => { return { ...arret, id: i } as Arret });
} }
export const getNearbyStops = async (latitude: string, longitude: string) => {
const result = await axios.get<Omit<Arret, "id">[]>(`${URL}/get_nearest_stations/${latitude}/${longitude}`);
return result.data.map((arret, i) => { return { ...arret, id: i } as Arret })
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment