feat(carpool-search): Added data filtering and pagination using bookm…

…arks.
UTT-GL03 · Dec 17, 2024 · 954de8b · 954de8b
1 parent 724624c
commit 954de8b
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 46 deletions.
diff --git a/frontend/src/components/CarpoolEntry.jsx b/frontend/src/components/CarpoolEntry.jsx
@@ -1,7 +1,7 @@
 import "../styles/CarpoolSearch.css";
 
 export default function CarpoolEntry({ carpool }) {
-  const date = new Date(carpool.date);
+  const date = new Date(carpool.date * 1000);
   const formattedDate = `${date.getDay()}/${date.getMonth()}/${date.getFullYear()}`;
   const formattedHour = `${date.getHours()}:${date.getMinutes()}`;
 

diff --git a/frontend/src/components/CarpoolInfoForm.jsx b/frontend/src/components/CarpoolInfoForm.jsx
@@ -2,28 +2,28 @@ import "../styles/CarpoolInfoForm.css";
 
 export default function CarpoolInfoForm({ create = false, onSubmit }) {
   return (
-    <form className="form" method="post" onSubmit={onSubmit}>
+    <form className="form" method="post" onSubmit={(e) => onSubmit(e)}>
       <div className="form-container">
         <div className="input-container">
-          <label htmlFor="destination1">De:</label>
-          <input type="text" name="destination1" id="destination1" />
+          <label htmlFor="from">De:</label>
+          <input type="text" name="from" id="from" />
         </div>
         <div className="input-container">
-          <label htmlFor="destination2">A:</label>
-          <input type="text" name="destination2" id="destination2" />
+          <label htmlFor="to">A:</label>
+          <input type="text" name="to" id="to" />
         </div>
         <div className="input-container">
-          <label htmlFor="destination2">Date:</label>
+          <label htmlFor="to">Date:</label>
           <input type="date" id="date" name="date" />
         </div>
         {create && (
           <>
             <div className="input-container">
-              <label htmlFor="destination2">Prix (en euros):</label>
+              <label htmlFor="price">Prix (en euros):</label>
               <input type="number" id="price" name="price" min={0} />
             </div>
             <div className="input-container">
-              <label htmlFor="destination2">
+              <label htmlFor="availablePlaces">
                 Nombre de places disponibles:
               </label>
               <input

diff --git a/frontend/src/routes/CarpoolSearch.jsx b/frontend/src/routes/CarpoolSearch.jsx
@@ -1,59 +1,94 @@
-import { Link } from "react-router-dom";
 import Header from "../components/Header.jsx";
 import "../styles/CarpoolSearch.css";
 import CarpoolEntry from "../components/CarpoolEntry.jsx";
 import { useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
 
 const LIMIT = 10;
 
 export default function CarpoolSearch() {
   const [carpools, setCarpools] = useState([]);
-  const [currentPage, setCurrentPage] = useState(1);
-  const [maxItems, setMaxItems] = useState();
+  const [carpoolsLoading, setCarpoolsLoading] = useState(false);
+
+  const [bookmarks, setBookmarks] = useState([]);
+  const [currentBookmark, setCurrentBookmark] = useState(0);
+
+  const [searchParams] = useSearchParams();
 
   const previousPage = () => {
-    if (currentPage !== 0) setCurrentPage(currentPage - 1);
+    if (currentBookmark >= 0) setCurrentBookmark(currentBookmark - 1);
   };
 
   const nextPage = () => {
-    setCurrentPage(currentPage + 1);
+    setCurrentBookmark(currentBookmark + 1);
   };
 
   useEffect(() => {
-    console.log("HELLO");
-    fetch(
-      `http://localhost:5984/blutt/_all_docs?include_docs=true&limit=${LIMIT}&skip=${(currentPage - 1) * LIMIT}`,
-    )
+    const date = new Date(searchParams.get("date"));
+    const SECONDS_IN_A_DAY = 86400;
+
+    setCarpoolsLoading(true);
+
+    fetch(`http://localhost:5984/blutt/_find`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        selector: {
+          from: {
+            $eq: searchParams.get("from"),
+          },
+          to: {
+            $eq: searchParams.get("to"),
+          },
+          date: {
+            $gt: (date.getTime() / 1000).toString(),
+            $lt: (date.getTime() / 1000 + 100 * SECONDS_IN_A_DAY).toString(),
+          },
+        },
+        limit: LIMIT,
+        bookmark: bookmarks[currentBookmark],
+      }),
+    })
       .then((res) => res.json())
       .then((data) => {
-        setCarpools(data.rows);
-        setMaxItems(data.total_rows);
+        setCarpoolsLoading(false);
+
+        setCarpools(data.docs);
+        if (currentBookmark === bookmarks.length - 1) {
+          setBookmarks([...bookmarks, data.bookmark]);
+        }
         window.scrollTo(0, 0);
       });
-  }, [currentPage]);
+  }, [currentBookmark]);
 
   return (
     <div className="container">
       <Header />
-      <div className="carpool-container">
-        {carpools.map((carpool) => (
-          <CarpoolEntry key={carpool.id} carpool={carpool.doc} />
-        ))}
-      </div>
+      {carpoolsLoading ? (
+        <div className="center-text">Chargement...</div>
+      ) : carpools.length === 0 ? (
+        <div className="center-text">Aucun résultat.</div>
+      ) : (
+        <div className="carpool-container">
+          {carpools.map((carpool) => (
+            <CarpoolEntry key={carpool.id} carpool={carpool} />
+          ))}
+        </div>
+      )}
       <div className="page-selector">
         <button
           type="button"
-          disabled={currentPage === 1}
+          disabled={currentBookmark === 0}
           className="button"
           onClick={previousPage}
         >
           Précédent
         </button>
         <a onClick={nextPage} className={"current-page"}>
-          {currentPage}
+          {currentBookmark + 1}
         </a>
         <button
-          disabled={currentPage * LIMIT >= maxItems}
+          disabled={false}
           type="button"
           className="button"
           onClick={nextPage}

diff --git a/frontend/src/routes/Home.jsx b/frontend/src/routes/Home.jsx
@@ -7,16 +7,23 @@ import CarpoolInfoForm from "../components/CarpoolInfoForm.jsx";
 export default function Home() {
   const navigate = useNavigate();
 
-  const handleSubmit = () => {
-    navigate("/carpool-search");
-  }
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    const formData = new FormData(e.target);
+    const formJSON = Object.fromEntries(formData.entries());
+
+    navigate(
+      `/carpool-search?from=${formJSON.from}&to=${formJSON.to}&date=${formJSON.date}`,
+    );
+  };
 
   return (
     <>
       <Header />
       <div className="home-container">
         <h2>Sélectionnez votre trajet:</h2>
-        <CarpoolInfoForm onSubmit={handleSubmit}/>
+        <CarpoolInfoForm onSubmit={handleSubmit} />
       </div>
       <Link to="carpool-creation">
         <button type="button" className="button">

diff --git a/frontend/src/styles/CarpoolSearch.css b/frontend/src/styles/CarpoolSearch.css
@@ -1,9 +1,23 @@
+.container {
+  flex: 1;
+  flex-direction: column;
+  display: flex;
+}
+
 .carpool-container {
   display: flex;
+  flex: 1;
   flex-direction: column;
   gap: 1rem;
 }
 
+.center-text {
+  flex: 1;
+  font-weight: bold;
+  text-align: center;
+  align-content: center;
+}
+
 .carpool-entry-container {
   background-color: #d1ebce;
   border-radius: 1rem;

diff --git a/frontend/src/styles/Global.css b/frontend/src/styles/Global.css
@@ -13,16 +13,21 @@
 }
 
 .button {
-    color: white;
-    align-self: center;
-    background-color: green;
-    padding: var(--button-vertical-padding) var(--button-horizontal-padding);
-    margin: var(--button-vertical-margin) 0;
-    font-size: var(--button-font-size);
-    border-radius: calc(
-            var(--button-font-size) + 2 * var(--button-vertical-padding)
-    );
-    border: none;
-    cursor: pointer;
-    font-weight: bolder;
-}
+  color: white;
+  align-self: center;
+  background-color: green;
+  padding: var(--button-vertical-padding) var(--button-horizontal-padding);
+  margin: var(--button-vertical-margin) 0;
+  font-size: var(--button-font-size);
+  border-radius: calc(
+    var(--button-font-size) + 2 * var(--button-vertical-padding)
+  );
+  border: none;
+  cursor: pointer;
+  font-weight: bolder;
+}
+
+.button:disabled {
+  color: grey;
+  background-color: lightgray;
+}