From 0048923d6a9e42c1a6afdc11a2fef36364c5a538 Mon Sep 17 00:00:00 2001 From: Lor3wp <61760289+Lor3wp@users.noreply.github.com> Date: Wed, 6 Dec 2023 22:40:30 +0200 Subject: [PATCH 1/2] not ready --- src/components/Calendar.jsx | 12 ++++++----- src/components/SelectProduct.jsx | 35 ++++++++++++++++++++++++++++---- src/components/TimeForm.jsx | 17 +++++++++++++--- src/components/UserForm.jsx | 5 ++--- src/hooks/useApi.js | 18 +++++++++++++++- src/services/ApiServices.js | 22 ++++++++++++++++++++ 6 files changed, 93 insertions(+), 16 deletions(-) diff --git a/src/components/Calendar.jsx b/src/components/Calendar.jsx index 4ff5054..0992008 100644 --- a/src/components/Calendar.jsx +++ b/src/components/Calendar.jsx @@ -31,11 +31,13 @@ const RentCalendar = ({ futureDates, setSelectedDate }) => { setSelectedDate(date); }; - 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' : ''; diff --git a/src/components/SelectProduct.jsx b/src/components/SelectProduct.jsx index 6fd9a21..c5407b0 100644 --- a/src/components/SelectProduct.jsx +++ b/src/components/SelectProduct.jsx @@ -1,3 +1,4 @@ +import React, { 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')} > @@ -37,7 +58,7 @@ const SelectProduct = () => { ? productStyle.activeProductButton : productStyle.productButton } - onClick={() => setSelectedProduct('bike')} + onClick={() => handleProductClick('bike')} > @@ -53,4 +74,10 @@ const SelectProduct = () => { ); }; +SelectProduct.propTypes = { + stationName: PropTypes.string.isRequired, + setFutureDates: PropTypes.func.isRequired, + futureDates: PropTypes.array.isRequired, +}; + export default SelectProduct; diff --git a/src/components/TimeForm.jsx b/src/components/TimeForm.jsx index f3611aa..06756c4 100644 --- a/src/components/TimeForm.jsx +++ b/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 = ({ />