Merge pull request #16 from SVinnik99/working

making adjustments... idk

front-end/src/Edit/EditReservation.js

@@ -2,8 +2,10 @@ import React, { useEffect, useState } from "react";
 import { useParams, useHistory } from "react-router";
 import { getReservation, updateReservation } from "../utils/api";
 import ErrorAlert from "../layout/ErrorAlert";
+import EditReservationForm  from "../reservations/EditReservationForm"
 import ReservationForm from "../reservations/NewReservation";
 
+
 function EditReservation() {
   const { reservation_id } = useParams();
   const [currentReservation, setCurrentReservation] = useState({
@@ -62,7 +64,7 @@ function EditReservation() {
   return (
     <>
       <ErrorAlert error={error} />
-      <ReservationForm
+      <EditReservationForm
         history={history}
         reservation={currentReservation}
         handleChange={handleChange}

front-end/src/dashboard/Dashboard.js

@@ -23,7 +23,7 @@ function Dashboard({ date }) {
   const location = useLocation();
   const searchedDate = location.search.slice(-10);
 
-  useEffect(loadDashboard, [date]);
+  useEffect(loadDashboard, [date],[]);
 
   function loadDashboard() {
     const abortController = new AbortController();
@@ -58,7 +58,7 @@ function Dashboard({ date }) {
     }
     loadReservations();
     return () => abortController.abort();
-  }, [date, currentDate, history.location]);
+  }, [date, currentDate]);
 
   // Load all tables
 

front-end/src/layout/Routes.js

@@ -9,6 +9,8 @@ import tables from "../tables";
 import Seat from "../Seat";
 import Search from "../Search";
 import Edit from "../Edit";
+import EditReservationForm from "../Reservations/EditReservationForm";
+
 
 /**
  * Defines all the routes for the application.
@@ -29,7 +31,7 @@ function Routes() {
         <Redirect to={"/dashboard"} />
       </Route>
       <Route exact={true} path="/reservations/:reservation_id/edit">
-        <Edit />
+        <EditReservationForm />
       </Route>
       <Route exact={true} path="/reservations/:reservation_id/seat">
         <Seat />

front-end/src/reservations/EditReservationForm.js

@@ -0,0 +1,153 @@
+import React, { useEffect, useState } from "react";
+import { useHistory } from "react-router-dom";
+import { createReservation, listReservations } from "../utils/api";
+import ErrorAlert from "../layout/ErrorAlert";
+import { useParams } from "react-router-dom/cjs/react-router-dom.min";
+
+function EditReservationForm() {
+  const history = useHistory();
+  const { reservation_id } = useParams();
+
+  const [reservation, setReservation] = useState({
+    reservation_id: "",
+    first_name: "",
+    last_name: "",
+    mobile_number: "",
+    reservation_date: "",
+    reservation_time: "",
+    people: 0,
+  });
+
+  const [reservationError, setReservationError] = useState(null);
+
+
+
+  const handleChange = (event) => {
+    let { name, value } = event.target;
+    if (name === "people") {
+      value = Number(value);
+    }
+    setReservation((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    const abortController = new AbortController();
+    try {
+      await createReservation(reservation, abortController.signal);
+      history.push(`/dashboard?date=${reservation.reservation_date}`);
+    } catch (error) {
+      setReservationError(error);
+    } finally {
+      abortController.abort();
+    }
+  };
+
+  return (
+    <>
+      <h2>Update Reservation</h2>
+
+
+      <form onSubmit={handleSubmit}>
+        <label htmlFor="first_name" className="mr-5 pr-4">
+          First name:
+        </label>
+        <input
+          className="ml-5 mt-2"
+          type="text"
+          id="first_name"
+          name="first_name"
+          value={reservation.first_name}
+          onChange={handleChange}
+          required
+        />
+        <br />
+        <label htmlFor="last_name" className="mr-5 pr-4">
+          Last name:
+        </label>
+        <input
+          className="ml-5 mt-2"
+          type="text"
+          id="last_name"
+          name="last_name"
+          value={reservation.last_name}
+          onChange={handleChange}
+          required
+        />
+        <br />
+        <label htmlFor="mobile_number" className="mr-4 pr-3">
+          Mobile number:
+        </label>
+        <input
+          className="ml-5 mt-2"
+          type="text"
+          id="mobile_number"
+          name="mobile_number"
+          value={reservation.mobile_number}
+          onChange={handleChange}
+          minLength="10"
+          maxLength="10"
+          required
+        />
+        <br />
+        <label htmlFor="reservation_date" className="mr-4">
+          Reservation Date:
+        </label>
+        <input
+          className="ml-5 mt-2"
+          type="date"
+          placeholder="YYYY-MM-DD"
+          pattern="\d{4}-\d{2}-\d{2}"
+          id="reservation_date"
+          name="reservation_date"
+          value={reservation.reservation_date}
+          onChange={handleChange}
+          required
+        />
+        <br />
+        <label htmlFor="reservation_time" className="mr-4">
+          Reservation Time:
+        </label>
+        <input
+          className="ml-5 mt-2"
+          type="time"
+          placeholder="HH:MM"
+          pattern="[0-9]{2}:[0-9]{2}"
+          id="reservation_time"
+          name="reservation_time"
+          value={reservation.reservation_time}
+          onChange={handleChange}
+          required
+        />
+        <br />
+        <label htmlFor="people">Number of people in party:</label>
+        <input
+          className="ml-2 mt-2"
+          type="number"
+          id="people"
+          name="people"
+          value={reservation.people}
+          onChange={handleChange}
+          required
+          min="1"
+        />
+        <br />
+        <button className="btn btn-primary" type="submit">
+          Submit
+        </button>
+        <button
+          type="button"
+          onClick={() => history.goBack()}
+          className="btn btn-secondary ml-2"
+        >
+          Cancel
+        </button>
+      </form>
+    </>
+  );
+}
+
+export default EditReservationForm;

front-end/src/reservations/NewReservation.js

@@ -34,6 +34,8 @@ function NewReservation() {
     try {
       await createReservation(reservation, abortController.signal);
       history.push(`/dashboard?date=${reservation.reservation_date}`);
+      event.preventDefault();
+
     } catch (error) {
       setReservationError(error);
     }

front-end/src/utils/api.js

@@ -62,13 +62,32 @@ async function fetchJson(url, options, onCancel) {
  */
 
 export async function listReservations(params, signal) {
-  const url = new URL(`${API_BASE_URL}/reservations`);
-  Object.entries(params).forEach(([key, value]) =>
-    url.searchParams.append(key, value.toString())
-  );
-  return await fetchJson(url, { headers, signal }, [])
-    .then(formatReservationDate)
-    .then(formatReservationTime);
+  try {
+    const url = new URL(`${API_BASE_URL}/reservations`);
+    Object.entries(params).forEach(([key, value]) =>
+      url.searchParams.append(key, value.toString())
+    );
+
+    // Making the API request and handling the response
+    const response = await fetchJson(url, { headers, signal }, []);
+
+    if (!response.ok) {
+      // If the response status is not okay, throw an error with the status text
+      throw new Error(`Failed to fetch reservations: ${response.statusText}`);
+    }
+
+    // Assuming the response contains JSON data
+    const data = await response.json();
+
+    // Formatting the reservation data
+    const formattedData = formatReservationTime(formatReservationDate(data));
+
+    return formattedData;
+  } catch (error) {
+    // Handle any errors that occur during the request or formatting
+    console.error("Error in listReservations:", error);
+    throw error; // Rethrow the error for further handling in the calling code
+  }
 }
 
 export async function listTables(signal) {