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')} > trailer icon @@ -37,7 +58,7 @@ const SelectProduct = () => { ? productStyle.activeProductButton : productStyle.productButton } - onClick={() => setSelectedProduct('bike')} + onClick={() => handleProductClick('bike')} > cargobike icon @@ -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 = ({ />
- + {stationsData.map((station) => { + if (station.selected) { + return ( + + ); + } + return null; + })}{' '}

diff --git a/src/components/UserForm.jsx b/src/components/UserForm.jsx index 57e41f4..0d4399c 100644 --- a/src/components/UserForm.jsx +++ b/src/components/UserForm.jsx @@ -14,7 +14,7 @@ import hsyLogo from '../assets/hsy_logo_dark.png'; import { useStepper } from '../hooks/useStepper'; import { useTranslation } from 'react-i18next'; import useApi from '../hooks/useApi'; -const UserForm = ({ onSubmit, onPrevStep }) => { +const UserForm = ({ onSubmit, onPrevStep, randomUUID }) => { const [validated, setValidated] = useState(false); const [showInfoModal, setShowInfoModal] = useState(false); const [showWarningModal, setShowWarningModal] = useState(false); @@ -31,7 +31,6 @@ const UserForm = ({ onSubmit, onPrevStep }) => { setUserData, acceptTerms, setAcceptTerms, - randomUUID, } = useStepper(); const { postRequest } = useApi(); @@ -202,7 +201,7 @@ const UserForm = ({ onSubmit, onPrevStep }) => { idPrepaid: false, uuid: randomUUID, }; - + console.log(bodyData); const responce = await postRequest('add-reservation', bodyData); console.log('UserForm.jsx 209', responce); } catch (error) { diff --git a/src/hooks/useApi.js b/src/hooks/useApi.js index 9dc52e1..8af56d4 100644 --- a/src/hooks/useApi.js +++ b/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); @@ -58,9 +62,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, diff --git a/src/services/ApiServices.js b/src/services/ApiServices.js index 927c865..fad0579 100644 --- a/src/services/ApiServices.js +++ b/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(); +}; From ffe058725e6db9dab7d280a2e1d2178c53ad953a Mon Sep 17 00:00:00 2001 From: Lor3wp <61760289+Lor3wp@users.noreply.github.com> Date: Thu, 7 Dec 2023 00:23:57 +0200 Subject: [PATCH 2/2] fixed timezone issues with calendar date selection --- src/components/Calendar.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Calendar.jsx b/src/components/Calendar.jsx index 4ff5054..ce69a8e 100644 --- a/src/components/Calendar.jsx +++ b/src/components/Calendar.jsx @@ -28,7 +28,9 @@ const RentCalendar = ({ futureDates, setSelectedDate }) => { }; const handleChange = (date) => { - setSelectedDate(date); + date.setHours(date.getHours() + 12); + setSelectedDate(date); + console.log(date.getHours()); }; const tileDisabled = ({ date }) => {