Merge pull request #78 from Lor3wp/dbAddReservation

Db add reservation

.env

@@ -0,0 +1 @@
+VITE_API_BASE_URL=https://hsytrailerapi.azurewebsites.net/api/

package.json

@@ -17,6 +17,7 @@
     "axios": "^1.6.2",
     "bootstrap": "^5.3.2",
     "bootstrap-icons": "^1.11.1",
+    "dotenv": "^16.3.1",
     "geolib": "^3.3.4",
     "i18next": "^23.7.6",
     "i18next-browser-languagedetector": "^7.2.0",
@@ -35,7 +36,8 @@
     "react-i18next": "^13.5.0",
     "react-router-dom": "^6.16.0",
     "react-simple-star-rating": "^5.1.7",
-    "react-toastify": "^9.1.3"
+    "react-toastify": "^9.1.3",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

src/App.jsx

@@ -13,6 +13,7 @@ import { StepperProvider } from './context/StepperContext';
 import { useTranslation } from 'react-i18next';
 import { useState } from 'react';
 
+
 function App() {
   const [itemReturned, setItemReturned] = useState(false);
 

src/components/BankButton.jsx

@@ -4,18 +4,41 @@ import { useState } from 'react';
 import PopUpWarningModal from '../components/PopUpWarningModal';
 import { useNavigate } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
-
-const BankButton = ({ logo, bankName, rentId }) => {
+import useApi from '../hooks/useApi';
+import { useStepper } from '../hooks/useStepper';
+const BankButton = ({ logo, bankName, randomUUID }) => {
   const [showWarningModal, setShowWarningModal] = useState(false);
+
   const navigate = useNavigate();
 
   const { t } = useTranslation();
+  const { userData } = useStepper();
+  const { postRequest } = useApi();
 
-  const handleClick = (bankName) => {
+  const handleClick = async (bankName) => {
     if (bankName === 'HSY') {
       handleOpenWarningModal();
     } else {
-      navigate(`/rent-successful/${rentId}`);
+      try {
+        const bodyData = {
+          customerInfo: {
+            name: userData.firstName,
+            lastName: userData.lastName,
+            phoneNumber: userData.phoneNumber,
+            email: userData.emailAddress,
+            address: userData.streetName,
+            zipCode: userData.postalCode,
+            city: userData.cityName,
+          },
+          uuid: randomUUID,
+        };
+
+        const responce = await postRequest('add-reservation', bodyData);
+        console.log('BankButton.jsx 36', responce.updatedReservation._id);
+        navigate(`/rent-successful/${responce.updatedReservation._id}`);
+      } catch (error) {
+        console.log(error);
+      }
     }
   };
 
@@ -68,7 +91,7 @@ const BankButton = ({ logo, bankName, rentId }) => {
 BankButton.propTypes = {
   logo: PropTypes.any.isRequired,
   bankName: PropTypes.string,
-  rentId: PropTypes.string.isRequired,
+  randomUUID: PropTypes.string.isRequired,
 };
 
 export default BankButton;

src/components/BankType.jsx

@@ -2,7 +2,14 @@ import PropTypes from 'prop-types';
 import BankButton from './BankButton';
 import styles from '../css/BankButton.module.css';
 
-const BankType = ({ gridName, title, arrayName, paymentName, rentId }) => {
+const BankType = ({
+  gridName,
+  title,
+  arrayName,
+  paymentName,
+  rentId,
+  randomUUID,
+}) => {
   return (
     <div className={styles.titleButtonContainer}>
       <h3>{title}</h3>
@@ -14,6 +21,7 @@ const BankType = ({ gridName, title, arrayName, paymentName, rentId }) => {
               bankName={item.bankName}
               key={item.bankName}
               rentId={rentId}
+              randomUUID={randomUUID}
             ></BankButton>
           </div>
         ))}
@@ -28,5 +36,6 @@ BankType.propTypes = {
   arrayName: PropTypes.array,
   paymentName: PropTypes.string,
   rentId: PropTypes.string.isRequired,
+  randomUUID: PropTypes.string.isRequired,
 };
 export default BankType;

src/components/PopUpWarningModal.jsx

@@ -40,7 +40,7 @@ PopUpWarningModal.propTypes = {
   show: PropTypes.bool,
   onHide: PropTypes.func,
   title: PropTypes.string,
-  body: PropTypes.obj,
+  body: PropTypes.string,
   backButton: PropTypes.string,
   acceptButton: PropTypes.string,
   acceptButtonVariant: PropTypes.string,

src/components/SelectTime.jsx

@@ -7,6 +7,7 @@ function SelectTime({
   setSelectedStationAndTime,
   stationName,
   timeSlots,
+  randomUUID,
 }) {
   const handleClick = (stationName, timeSlot) => {
     setSelectedStationAndTime({
@@ -16,6 +17,7 @@ function SelectTime({
 
   const itemElements = timeSlots.map((item, index) => (
     <TimePeriodButton
+      randomUUID={randomUUID}
       buttonText={item}
       setSelectedTime={handleClick}
       key={index}
@@ -35,12 +37,13 @@ function SelectTime({
 }
 
 SelectTime.propTypes = {
-  selectedStationAndTime: PropTypes.obj,
+  selectedStationAndTime: PropTypes.object,
   setSelectedStationAndTime: PropTypes.func,
   setSelectedStation: PropTypes.func,
   stationName: PropTypes.string.isRequired, // Expect a string prop, and it's required
-  selectedTime: PropTypes.string,
   timeSlots: PropTypes.array.isRequired,
+  randomUUID: PropTypes.string,
 };
 
+
 export default SelectTime;

src/components/TimeForm.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import RentCalendar from '../components/Calendar';
 import SelectTime from '../components/SelectTime';
 import timeStyle from '../css/SelectTime.module.css';
@@ -12,12 +12,17 @@ import { ChevronCompactLeft } from 'react-bootstrap-icons';
 import { ChevronCompactRight } from 'react-bootstrap-icons';
 import { useStepper } from '../hooks/useStepper';
 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,
   handleWarningModal,
+  randomUUID,
 }) => {
+  const { deleteRequest } = useApi();
   const [showWarningModal, setShowWarningModal] = useState(false);
 
   const { t } = useTranslation();
@@ -31,20 +36,8 @@ const ProductAndTime = ({
     selectedProduct,
   } = useStepper();
 
-  // values will be used in future
-  const currentDate = new Date();
-  const currentMonth = currentDate.getMonth();
-  const currentYear = currentDate.getFullYear();
-  const currentDay = currentDate.getDate();
-  const futureDates = [];
-
   const navigate = useNavigate();
 
-  for (let i = 1; i < 4; i++) {
-    const randomDate = new Date(currentYear, currentMonth, currentDay + i);
-    futureDates.push(randomDate);
-  }
-
   // handling the button click for selecting a time and date
   const handleSubmit = () => {
     if (
@@ -66,6 +59,29 @@ const ProductAndTime = ({
     setShowWarningModal(true);
   };
 
+  // TODO add before unload delete temp reservation with uuid
+  useEffect(() => {
+    const sendDeleteRequestOnUnload = async () => {
+      window.addEventListener('beforeunload', async () => {
+        try {
+          const responce = await deleteRequest(
+            'delete-temp-reservation/',
+            randomUUID,
+          );
+          console.log('TimeForm.jsx 72 ', responce);
+        } catch (error) {
+          console.error('Error sending DELETE request:', error);
+        }
+      });
+    };
+
+    sendDeleteRequestOnUnload();
+
+    // Cleanup the event listener when the component unmounts
+    return () => {
+      window.removeEventListener('beforeunload', sendDeleteRequestOnUnload);
+    };
+  }, []);
   return (
     <>
       <PopUpWarningModal
@@ -100,6 +116,7 @@ const ProductAndTime = ({
             if (station.selected) {
               return (
                 <SelectTime
+                  randomUUID={randomUUID}
                   timeSlots={station.timeSlots}
                   setSelectedStationAndTime={setSelectedStationAndTime}
                   selectedStationAndTime={selectedStationAndTime}
@@ -134,6 +151,7 @@ ProductAndTime.propTypes = {
   onProductAndTimeSelected: PropTypes.func.isRequired,
   onPrevStep: PropTypes.func.isRequired,
   handleWarningModal: PropTypes.func,
+  randomUUID: PropTypes.string.isRequired,
 };
 
 export default ProductAndTime;

src/components/TimePeriodButton.jsx

@@ -1,15 +1,38 @@
 import Button from 'react-bootstrap/Button';
 import PropTypes from 'prop-types';
 import style from '../css/TimeButton.module.css';
+import useApi from '../hooks/useApi';
+import { useStepper } from '../hooks/useStepper';
 
 function TimePeriodButton({
   buttonText,
   setSelectedTime,
   selectedTime,
   stationName,
+  randomUUID,
 }) {
-  const handleClick = () => {
+  const { postRequest } = useApi();
+  const { selectedDate, selectedProduct, selectAdaptor } = useStepper();
+
+  const handleClick = async () => {
     setSelectedTime(stationName, buttonText);
+    try {
+      const bodyData = {
+        uuid: randomUUID,
+        station: stationName,
+        timeSlot: buttonText,
+        product: selectedProduct,
+        date: selectedDate,
+        isAdapter: selectAdaptor,
+      };
+      const isEmptyField = Object.values(bodyData).some((value) => !value);
+      if (isEmptyField) {
+        const response = await postRequest('add-temp-reservation', bodyData);
+        console.log('TimePeriodButton.jsx 30 ', response);
+      }
+    } catch (error) {
+      console.error('api error: ', error);
+    }
   };
 
   return (
@@ -35,6 +58,7 @@ TimePeriodButton.propTypes = {
   stationName: PropTypes.string.isRequired,
   setSelectedTime: PropTypes.func.isRequired,
   setSelectedStation: PropTypes.func,
+  randomUUID: PropTypes.string,
 };
 
 export default TimePeriodButton;

src/components/UserForm.jsx

@@ -13,7 +13,6 @@ import PopUpWarningModal from '../components/PopUpWarningModal';
 import hsyLogo from '../assets/hsy_logo_dark.png';
 import { useStepper } from '../hooks/useStepper';
 import { useTranslation } from 'react-i18next';
-
 const UserForm = ({ onSubmit, onPrevStep }) => {
   const [validated, setValidated] = useState(false);
   const [showInfoModal, setShowInfoModal] = useState(false);