add: fetch and display waiting time for a stop

src/components/Forms/Form-Arret-Proche.tsx

@@ -81,7 +81,10 @@ const FormArretProche = () => {
           className="mt-1"
           variant="primary"
           type="reset"
-          onClick={() => setShowResult(false)}
+          onClick={() => {
+            setFilter("");
+            setShowResult(false);
+          }}
         >
           Clear
         </Button>

src/components/Forms/Form-Arret.tsx

@@ -47,7 +47,10 @@ const FormArret = () => {
           className="mt-1"
           variant="primary"
           type="reset"
-          onClick={() => setShowResult(false)}
+          onClick={() => {
+            setFilter("");
+            setShowResult(false);
+          }}
         >
           Clear
         </Button>

src/components/Forms/Form-Waiting-Time.tsx

+import { useQuery } from "@tanstack/react-query";
+import { getWaitingTime } from "../../utils";
+import { useState } from "react";
+import { Button, Col, Form, Spinner } from "react-bootstrap";
+
+const FormWaitingTime = () => {
+  const [showResult, setShowResult] = useState(false);
+  const [codeArret, setCodeArret] = useState("HBLI");
+
+  const { isPending, isError, error, data } = useQuery({
+    queryKey: ["tempsAttente", { codeArret }],
+    enabled: showResult,
+    queryFn: async () => getWaitingTime(codeArret),
+  });
+
+  return (
+    <>
+      <Form
+        onSubmit={(e) => {
+          e.preventDefault();
+          setShowResult(true);
+        }}
+      >
+        <h1>Temps d'attente par rapport à un arrêt</h1>
+        <Col xs={4}>
+          <Form.Group className="mb-3" controlId="formCodeArret">
+            <Form.Label>Code Arrêt</Form.Label>
+            <Form.Control
+              type="text"
+              defaultValue="HBLI"
+              onChange={(e) => setCodeArret(e.target.value)}
+              required
+            />
+          </Form.Group>
+        </Col>
+        <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.map((time) => (
+            <p key={time.id}>
+              Ligne: {time.ligne.numLigne} - Sens: {time.sens} - Temps: {time.temps}
+            </p>
+          ))}
+        </Col>
+      )}
+    </>
+  );
+};
+
+export default FormWaitingTime;

src/components/Formulaire.tsx

-import { Col, Container, Form, Row } from "react-bootstrap";
+import { Container, Row } from "react-bootstrap";
 import FormArret from "./Forms/Form-Arret";
 import FormArretProche from "./Forms/Form-Arret-Proche";
 import FormHoraire from "./Forms/Form-Horaire";
+import FormWaitingTime from "./Forms/Form-Waiting-Time";
 
 type FormulaireProps = {
   selection: number;
@@ -17,17 +18,7 @@ const Formulaire = ({ selection }: FormulaireProps) => {
       case 2:
         return <FormHoraire />;
       case 3:
-        return (
-          <>
-            <h1>Temps d'attente par rapport à un arrêt</h1>
-            <Col xs={4}>
-              <Form.Group className="mb-3" controlId="formCodeArret">
-                <Form.Label>Code Arrêt</Form.Label>
-                <Form.Control type="text" defaultValue="HBLI" required />
-              </Form.Group>
-            </Col>
-          </>
-        );
+        return <FormWaitingTime />;
       default:
         return <div>{selection}</div>;
     }

src/components/Sidebar.tsx

@@ -13,7 +13,7 @@ const Sidebar = ({ setSelection }: SidebarProps) => {
         <Navbar.Collapse id="basic-navbar-nav">
           <Nav className="flex-row">
             <NavDropdown
-              title="Temps d'attente"
+              title="Arrêts"
               id="temps-dattente-dropdown"
               className="flex-column"
             >

src/models/Horaire.model.ts

 export type Horaire = {
     "ligne": {
         "numLigne": string,
-        "typeligne": 0,
+        "typeligne": number,
         "directionSens1": string,
         "directionSens2": string,
         "accessible": string,
-        "etatTrafic": 0
+        "etatTrafic": number
     },
     "arret": {
         "codeArret": string,
         "libelle": string,
-        "accessible": true
+        "accessible": boolean
     },
     "codeCouleur": string,
     "notes": [

src/models/RemainingTime.model.ts

+export type RemainingTime = {
+    id: number,
+    "sens": number,
+    "terminus": string,
+    "infotrafic": boolean,
+    "temps": string,
+    "dernierDepart": string,
+    "tempsReel": string,
+    "ligne": {
+        "numLigne": string,
+        "typeLigne": number
+    },
+    "arret": {
+        "codeArret": string
+    }
+}
\ No newline at end of file

src/utils.ts

 import axios from "axios";
 import { Arret } from "./models/Arret.model";
 import { Horaire } from "./models/Horaire.model";
+import { RemainingTime } from "./models/RemainingTime.model";
 
 const URL = `https://hackathon-login.osc-fr1.scalingo.io`;
 
@@ -39,3 +40,8 @@ export const getHoraires = async (codeArret: string, numLigne: string, sense: "1
     const result = await axios.get<Horaire>(`${URL}/get_timetable_by_date/${codeArret}/${numLigne}/${sense}/${date}`);
     return result.data;
 }
+
+export const getWaitingTime = async (codeArret: string) => {
+    const result = await axios.get<Omit<RemainingTime, "id">[]>(`${URL}/get_waitingtime_by_station/${codeArret}`);
+    return result.data.map((time, i) => { return { ...time, id: i } as RemainingTime });
+}
\ No newline at end of file