Merge pull request #81 from Lor3wp/improvements-and-fixes

Improvements and fixes

src/components/BankType.jsx

@@ -2,14 +2,7 @@ import PropTypes from 'prop-types';
 import BankButton from './BankButton';
 import styles from '../css/BankButton.module.css';
 
-const BankType = ({
-  gridName,
-  title,
-  arrayName,
-  paymentName,
-  rentId,
-  randomUUID,
-}) => {
+const BankType = ({ gridName, title, arrayName, paymentName, randomUUID }) => {
   return (
     <div className={styles.titleButtonContainer}>
       <h3>{title}</h3>
@@ -20,9 +13,8 @@ const BankType = ({
               logo={item.logo}
               bankName={item.bankName}
               key={item.bankName}
-              rentId={rentId}
               randomUUID={randomUUID}
-            ></BankButton>
+            />
           </div>
         ))}
       </div>

src/components/SelectProduct.jsx

@@ -10,28 +10,27 @@ import { useTranslation } from 'react-i18next';
 import useApi from '../hooks/useApi';
 import PropTypes from 'prop-types';
 
-const SelectProduct = ({ stationName, setFutureDates, futureDates }) => {
+const SelectProduct = ({ setFutureDates, futureDates }) => {
   const {
     selectedProduct,
     setSelectedProduct,
     selectAdaptor,
     setSelectAdaptor,
-    stationsData
+    stationsData,
   } = useStepper();
   const { getRequest } = useApi();
   const { t } = useTranslation();
   const [localFutureDates, setLocalFutureDates] = useState(futureDates);
   const [selectedStation, setSelectedStation] = useState([]);
 
-
   const handleProductClick = async (product) => {
     console.log('stationsdata', stationsData);
-      stationsData.map((station) => {
-        if(station.selected) {
-          console.log("stations", station.stationName);
-          setSelectedStation(station.stationName);
-        }
-      })
+    stationsData.map((station) => {
+      if (station.selected) {
+        console.log('stations', station.stationName);
+        setSelectedStation(station.stationName);
+      }
+    });
 
     setSelectedProduct(product);
     const response = await getRequest('/reserved-dates', {

src/components/TimeForm.jsx

@@ -58,6 +58,8 @@ const ProductAndTime = ({
     setShowWarningModal(true);
   };
 
+  console.log('SELECTED STATIONS', stationsData);
+
   // TODO add before unload delete temp reservation with uuid
   useEffect(() => {
     const sendDeleteRequestOnUnload = async () => {
@@ -81,6 +83,7 @@ const ProductAndTime = ({
       window.removeEventListener('beforeunload', sendDeleteRequestOnUnload);
     };
   }, []);
+
   return (
     <>
       <PopUpWarningModal
@@ -95,9 +98,7 @@ const ProductAndTime = ({
       />
       <div className={rentStyle.rentBox}>
         <div className={rentStyle.productBox}>
-
-                <SelectProduct
-                />
+          <SelectProduct />
         </div>
         <hr />
         <div className={rentStyle.calendarBox}>
@@ -113,20 +114,21 @@ const ProductAndTime = ({
         <hr className={rentStyle.hr} />
         <p>{t('Valitse sinulle sopiva 3 tunnin vuokraus ajankohta tästä:')}</p>
         <div className={rentStyle.selectTimeBox}>
-          {stationsData.map((station) => {
-            if (station.selected) {
-              return (
-                <SelectTime
-                  randomUUID={randomUUID}
-                  timeSlots={station.timeSlots}
-                  setSelectedStationAndTime={setSelectedStationAndTime}
-                  selectedStationAndTime={selectedStationAndTime}
-                  stationName={station.stationName}
-                  key={station.stationName}
-                />
-              );
-            }
-          })}
+          {selectedDate &&
+            stationsData.map((station) => {
+              if (station.selected) {
+                return (
+                  <SelectTime
+                    randomUUID={randomUUID}
+                    timeSlots={station.timeSlots}
+                    setSelectedStationAndTime={setSelectedStationAndTime}
+                    selectedStationAndTime={selectedStationAndTime}
+                    stationName={station.stationName}
+                    key={station.stationName}
+                  />
+                );
+              }
+            })}
         </div>
         <div className={rentStyle.buttonsContainer}>
           <div className={rentStyle.leftButtons}>

src/context/StepperContext.jsx

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 export const StepperContext = createContext();
 
 export const StepperProvider = ({ children }) => {
-  // TODO: Probably stations needs to be fetched from the backend at some point
   const [stationsData, setStationsData] = useState([
     {
       stationName: 'Ruskeasanta',

src/hooks/useApi.js

@@ -7,6 +7,7 @@ import {
   getRequest,
 } from '../services/ApiServices';
 import { useNavigate } from 'react-router-dom';
+
 const useApi = () => {
   const [error, setError] = useState(null);
 
@@ -86,4 +87,4 @@ const useApi = () => {
   };
 };
 
-export default useApi;
+export default useApi;

src/pages/RentInfo.jsx

@@ -17,15 +17,6 @@ import useApi from '../hooks/useApi';
 import Spinner from 'react-bootstrap/Spinner';
 
 const RentInfoPage = ({ handleItemReturned }) => {
-  const mockRentInfo = {
-    rentDate: '2023-09-17',
-    //rentStartTime: new Date(),
-    rentStartTime: '2023-12-01T18:07:00',
-    rentEndTime: '2023-12-01T23:01:00',
-    itemType: 'Peräkärry',
-    stationLocation: 'Kivikon Sortti-asema',
-  };
-
   const [timeStarted, setTimeStarted] = useState(false);
   const [canCancelRent, setCanCancelRent] = useState(true);
   const [showModal, setShowModal] = useState(false);

src/pages/RentProcess.jsx

@@ -26,6 +26,7 @@ import BankType from '../components/BankType';
 import PopUpWarningModal from '../components/PopUpWarningModal';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuidv4 } from 'uuid';
+
 const RentProcessPage = () => {
   const countdownDuration = 20 * 60 * 1000;
 
@@ -40,10 +41,6 @@ const RentProcessPage = () => {
     calculateReservationDeadline(),
   );
 
-  const mockRentData = {
-    id: '656e0884162df1917d30e826',
-  };
-
   const { t } = useTranslation();
 
   function calculateReservationDeadline() {
@@ -140,31 +137,27 @@ const RentProcessPage = () => {
     return (
       <div className={styles.bankContainer}>
         <BankType
-          rentId={mockRentData.id}
           gridName={styles.mobileGrid}
           title={t('Mobiilimaksutavat')}
           arrayName={mobileBanks}
           paymentName={styles.mobilePayment}
           randomUUID={randomUUID}
         />
         <BankType
-          rentId={mockRentData.id}
           gridName={styles.cardGrid}
           title={t('Korttimaksutavat')}
           arrayName={cardPayments}
           paymentName={styles.cardPayment}
           randomUUID={randomUUID}
         />
         <BankType
-          rentId={mockRentData.id}
           gridName={styles.bankGrid}
           title={t('Pankkimaksutavat')}
           arrayName={bankPayments}
           paymentName={styles.bankPayment}
           randomUUID={randomUUID}
         />
         <BankType
-          rentId={mockRentData.id}
           gridName={styles.irlGrid}
           title={t('Maksu paikan päällä')}
           arrayName={irlPayments}
@@ -184,7 +177,6 @@ const RentProcessPage = () => {
             onStationSelected={handleStationSelected}
           />
         );
-
       case 1:
         return (
           <ProductAndTime

src/services/ApiServices.js

@@ -1,4 +1,4 @@
-const API_BASE_URL = 'https://hsytrailerapi.azurewebsites.net/api/';
+import { API_BASE_URL } from '../utils/constants';
 
 export const postRequest = async (endpoint, data) => {
   const response = await fetch(`${API_BASE_URL}${endpoint}`, {

src/utils/axios.js

@@ -1,9 +1,8 @@
 import axios from 'axios';
-
-const baseURL = 'https://hsytrailerapi.azurewebsites.net/api/';
+import { API_BASE_URL } from './constants';
 
 const axiosInstance = axios.create({
-  baseURL: baseURL,
+  baseURL: API_BASE_URL,
 });
 
 export default axiosInstance;

src/utils/constants.js

@@ -1,5 +1,3 @@
-const NODE_ENV = import.meta.env.NODE_ENV;
-const PUBLIC_DOMAIN = import.meta.env.VITE_PUBLIC_DOMAIN;
-const PUBLIC_PORT = import.meta.env.VITE_PUBLIC_PORT;
+const API_BASE_URL = 'https://hsytrailerapi.azurewebsites.net/api/';
 
-export { NODE_ENV, PUBLIC_DOMAIN, PUBLIC_PORT };
+export { API_BASE_URL };