add: fetch timetable for stop

src/components/Forms/Form-Horaire.tsx

+import { useQuery } from "@tanstack/react-query";
+import { getHoraires } from "../../utils";
+import { useState } from "react";
+import { Button, Col, Form, Spinner } from "react-bootstrap";
+
+const FormHoraire = () => {
+  const [showResult, setShowResult] = useState(false);
+  const [codeArret, setCodeArret] = useState("HBLI2");
+  const [numLigne, setNumLigne] = useState("C5");
+  const [sens, setSens] = useState<"1" | "2">("1");
+
+  const { isPending, isError, error, data } = useQuery({
+    queryKey: ["horaires", { codeArret, numLigne, sens }],
+    enabled: showResult,
+    queryFn: () => getHoraires(codeArret, numLigne, sens),
+  });
+
+  return (
+    <>
+      <Form
+        onSubmit={(e) => {
+          e.preventDefault();
+          setShowResult(true);
+        }}
+      >
+        <h1>Horaires (théoriques)</h1>
+            <Col xs={4}>
+              <Form.Group className="mb-3" controlId="formCodeArret">
+                <Form.Label>Code Arrêt</Form.Label>
+                <Form.Control type="text" defaultValue="HBLI2" onChange={(e) => setCodeArret(e.target.value)} required />
+              </Form.Group>
+
+              <Form.Group className="mb-3" controlId="formNumLigne">
+                <Form.Label>Numéro Ligne</Form.Label>
+                <Form.Control type="text" defaultValue="C5" onChange={(e) => setNumLigne(e.target.value)} required />
+              </Form.Group>
+
+              <Form.Group className="mb-3" controlId="formSens">
+                <Form.Label>Sens</Form.Label>
+                <Form.Select aria-label="Default select example" onChange={(e) => setSens(e.target.value === "2" ?  "2" : "1")}>
+                  <option value="1">Un</option>
+                  <option value="2">Deux</option>
+                </Form.Select>
+              </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">
+          {<p>{data.ligne.numLigne}</p>}
+        </Col>
+      )}
+    </>
+  );
+};
+
+export default FormHoraire;

src/components/Formulaire.tsx

 import { Col, Container, Form, Row } from "react-bootstrap";
 import FormArret from "./Forms/Form-Arret";
 import FormArretProche from "./Forms/Form-Arret-Proche";
+import FormHoraire from "./Forms/Form-Horaire";
 
 type FormulaireProps = {
   selection: number;
@@ -14,30 +15,7 @@ const Formulaire = ({ selection }: FormulaireProps) => {
       case 1:
         return <FormArret />;
       case 2:
-        return (
-          <>
-            <h1>Horaires (théoriques)</h1>
-            <Col xs={4}>
-              <Form.Group className="mb-3" controlId="formCodeArret">
-                <Form.Label>Code Arrêt</Form.Label>
-                <Form.Control type="text" defaultValue="HBLI2" required />
-              </Form.Group>
-
-              <Form.Group className="mb-3" controlId="formNumLigne">
-                <Form.Label>Numéro Ligne</Form.Label>
-                <Form.Control type="text" defaultValue="C5" required />
-              </Form.Group>
-
-              <Form.Group className="mb-3" controlId="formSens">
-                <Form.Label>Sens</Form.Label>
-                <Form.Select aria-label="Default select example">
-                  <option value="1">Un</option>
-                  <option value="2">Deux</option>
-                </Form.Select>
-              </Form.Group>
-            </Col>
-          </>
-        );
+        return <FormHoraire />;
       case 3:
         return (
           <>

src/models/Horaire.model.ts

+export type Horaire = {
+    "ligne": {
+        "numLigne": string,
+        "typeligne": 0,
+        "directionSens1": string,
+        "directionSens2": string,
+        "accessible": string,
+        "etatTrafic": 0
+    },
+    "arret": {
+        "codeArret": string,
+        "libelle": string,
+        "accessible": true
+    },
+    "codeCouleur": string,
+    "notes": [
+        {
+            "code": string,
+            "libelle": string
+        }
+    ],
+    "horaires": [
+        {
+            "heure": string,
+            "passages": [
+                string
+            ]
+        }
+    ],
+    "prochainsHoraires": [
+        {
+            "heure": string,
+            "passages": [
+                string
+            ]
+        }
+    ],
+    "plageDeService": 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";
 
 const URL = `https://hackathon-login.osc-fr1.scalingo.io`;
 
@@ -28,4 +29,13 @@ export const getStops = async () => {
 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 })
+}
+
+export const getHoraires = async (codeArret: string, numLigne: string, sense: "1" | "2", date?: string) => {
+    if (!date) {
+        const result = await axios.get<Horaire>(`${URL}/get_timetable/${codeArret}/${numLigne}/${sense}`);
+        return result.data;
+    }
+    const result = await axios.get<Horaire>(`${URL}/get_timetable_by_date/${codeArret}/${numLigne}/${sense}/${date}`);
+    return result.data;
 }
\ No newline at end of file