Time slots are now shown dynamically, depending on the date

Relates #48
FACN7 · Dec 1, 2019 · a79afbb · a79afbb
1 parent 62e438f
commit a79afbb
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git a/barberia/src/App/pages/Calendar.js b/barberia/src/App/pages/Calendar.js
@@ -35,7 +35,7 @@ function Calendar({
         inline
       />
 
-      <AppoPicker time={time} setTime={setTime} />
+      <AppoPicker time={time} setTime={setTime} baseDate={baseDate} />
       <p>
         time picked is {time.toString()}
         <br />

diff --git a/barberia/src/App/pages/TimePicker.js b/barberia/src/App/pages/TimePicker.js
@@ -2,7 +2,7 @@ import React from "react";
 import AppointmentPicker from "appointment-picker";
 import "appointment-picker/dist/appointment-picker.css";
 
-const AppoPicker = props => {
+const AppoPicker = ({ baseDate, ...props }) => {
   const [options, setOptions] = React.useState({
     leadingZero: true,
     interval: 30,
@@ -17,15 +17,20 @@ const AppoPicker = props => {
   const [time, setTime] = React.useState({});
 
   React.useEffect(() => {
-    fetch("/api/getBusyTimeSlots")
+    fetch("/api/getBusyTimeSlots/" + baseDate)
       .then(res => res.json())
       .then(obj => obj.map(x => x.booking_time))
       .then(arr => {
         const newOptions = JSON.parse(JSON.stringify(options));
         newOptions.disabled = arr;
         setOptions(newOptions);
+      })
+      .catch(err => {
+        const newOptions = JSON.parse(JSON.stringify(options));
+        newOptions.disabled = [];
+        setOptions(newOptions);
       });
-  }, []);
+  }, [baseDate]);
 
   const pickerRef = React.createRef();
 

diff --git a/src/controllers/index.js b/src/controllers/index.js
@@ -19,9 +19,10 @@ router.post("/savenewbooking", (req, res) => {
   queries.saveNewBooking(data).catch(err => console.log(err));
 });
 
-router.get("/getBusyTimeSlots", (req, res) => {
+router.get("/getBusyTimeSlots/:date", (req, res) => {
+  const date = req.params.date;
   queries
-    .getBusyTimeSlots()
+    .getBusyTimeSlots(date)
     .then(times => times.rows)
     .then(rows => res.json(rows))
     .catch(err => console.log(err));

diff --git a/src/queries/getUnavailableTimes.js b/src/queries/getUnavailableTimes.js
@@ -1,8 +1,8 @@
 const databaseConnection = require("../database/db_connection.js");
 
-const getBusyTimeSlots = () => {
+const getBusyTimeSlots = baseDate => {
   return databaseConnection.query(
-    `SELECT booking_time FROM bookings WHERE booking_date='20191203'`
+    `SELECT booking_time FROM bookings WHERE booking_date='${baseDate}'`
   );
 };