Merge pull request #79 from Lor3wp/getReservationsCalendar

Get reservations calendar

src/components/Calendar.jsx

@@ -28,14 +28,18 @@ const RentCalendar = ({ futureDates, setSelectedDate }) => {
   };
 
   const handleChange = (date) => {
-    setSelectedDate(date);
+      date.setHours(date.getHours() + 12);
+      setSelectedDate(date);
+      console.log(date.getHours());
   };
 
-  const tileDisabled = ({ date }) => {
-    return futureDates.some(
-      (disabledDate) => date.toDateString() === disabledDate.toDateString(),
-    );
-  };
+const tileDisabled = ({ date }) => {
+  return futureDates.some((disabledDate) => {
+    const disabledDateObject = new Date(disabledDate);
+    return date.toDateString() === disabledDateObject.toDateString();
+  });
+};
+
 
   const tileClassName = ({ date }) => {
     return tileDisabled({ date }) ? 'disabled-tile' : '';

src/components/SelectProduct.jsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Button, Form } from 'react-bootstrap';
 import productStyle from '../css/SelectProduct.module.css';
 import timeStyle from '../css/SelectTime.module.css';
@@ -6,16 +7,36 @@ import Trailer from '../assets/trailer.svg';
 import { useStepper } from '../hooks/useStepper';
 import Checkbox from './Checkbox';
 import { useTranslation } from 'react-i18next';
+import useApi from '../hooks/useApi';
+import PropTypes from 'prop-types';
 
-const SelectProduct = () => {
+const SelectProduct = ({ stationName, setFutureDates, futureDates }) => {
   const {
     selectedProduct,
     setSelectedProduct,
     selectAdaptor,
     setSelectAdaptor,
   } = useStepper();
-
+  const { getRequest } = useApi();
   const { t } = useTranslation();
+  const [localFutureDates, setLocalFutureDates] = useState(futureDates);
+
+  const handleProductClick = async (product) => {
+    setSelectedProduct(product);
+    const response = await getRequest('/reserved-dates', {
+      station: stationName,
+      product: selectedProduct,
+    });
+
+    // Extracting only the dates from the response arrays
+    const newDates = response.map((item) => item.date);
+    console.log(response);
+    // Updating localFutureDates
+    setLocalFutureDates([...localFutureDates, ...newDates]);
+
+    // Updating futureDates
+    setFutureDates([...localFutureDates, ...newDates]);
+  };
 
   return (
     <>
@@ -27,7 +48,7 @@ const SelectProduct = () => {
               ? productStyle.activeProductButton
               : productStyle.productButton
           }
-          onClick={() => setSelectedProduct('trailer')}
+          onClick={() => handleProductClick('trailer')}
         >
           <img src={Trailer} alt="trailer icon" />
         </Button>
@@ -37,7 +58,7 @@ const SelectProduct = () => {
               ? productStyle.activeProductButton
               : productStyle.productButton
           }
-          onClick={() => setSelectedProduct('bike')}
+          onClick={() => handleProductClick('bike')}
         >
           <img src={Bike} alt="cargobike icon" />
         </Button>
@@ -53,4 +74,10 @@ const SelectProduct = () => {
   );
 };
 
+SelectProduct.propTypes = {
+  stationName: PropTypes.string.isRequired,
+  setFutureDates: PropTypes.func.isRequired,
+  futureDates: PropTypes.array.isRequired,
+};
+
 export default SelectProduct;

src/components/TimeForm.jsx

@@ -15,7 +15,6 @@ import { useTranslation } from 'react-i18next';
 import useApi from '../hooks/useApi';
 // create random uuid for user identification in temporary reservation
 // fill with Date values to disable those dates from caledar
-const futureDates = [];
 const ProductAndTime = ({
   onProductAndTimeSelected,
   onPrevStep,
@@ -26,7 +25,7 @@ const ProductAndTime = ({
   const [showWarningModal, setShowWarningModal] = useState(false);
 
   const { t } = useTranslation();
-
+  const [futureDates, setFutureDates] = useState([]);
   const {
     stationsData,
     selectedDate,
@@ -96,7 +95,19 @@ const ProductAndTime = ({
       />
       <div className={rentStyle.rentBox}>
         <div className={rentStyle.productBox}>
-          <SelectProduct />
+          {stationsData.map((station) => {
+            if (station.selected) {
+              return (
+                <SelectProduct
+                  stationName={station.stationName}
+                  setFutureDates={setFutureDates}
+                  futureDates={futureDates}
+                  key={station.stationName}
+                />
+              );
+            }
+            return null;
+          })}{' '}
         </div>
         <hr />
         <div className={rentStyle.calendarBox}>

src/hooks/useApi.js

@@ -1,7 +1,11 @@
 import API from '../utils/axios';
 import { useState } from 'react';
 import { errorHandling } from '../utils/errorHandling';
-import { postRequest, deleteRequest } from '../services/ApiServices';
+import {
+  postRequest,
+  deleteRequest,
+  getRequest,
+} from '../services/ApiServices';
 import { useNavigate } from 'react-router-dom';
 const useApi = () => {
   const [error, setError] = useState(null);
@@ -60,9 +64,21 @@ const useApi = () => {
     }
   };
 
+  const getApiRequest = async (endpoint, queryParams) => {
+    try {
+      const response = await getRequest(endpoint, queryParams);
+      handleApiSuccess(response);
+      return response; // Return the response if needed in the calling code
+    } catch (error) {
+      handleApiError(error);
+      throw error; // Re-throw the error to propagate it to the calling code
+    }
+  };
+
   return {
     postRequest: postApiRequest,
     deleteRequest: deleteApiRequest,
+    getRequest: getApiRequest,
     getRentById,
     updateRent,
     deleteRent,

src/services/ApiServices.js

@@ -29,3 +29,25 @@ export const deleteRequest = async (endpoint, uuid) => {
 
   return response.json();
 };
+
+export const getRequest = async (endpoint, queryParams = {}) => {
+  const url = new URL(`${API_BASE_URL}${endpoint}`);
+
+  // Append query parameters to the URL
+  Object.keys(queryParams).forEach((key) =>
+    url.searchParams.append(key, queryParams[key]),
+  );
+
+  const response = await fetch(url, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`HTTP error! Status: ${response.status}`);
+  }
+
+  return response.json();
+};