Merge pull request #4 from tan12082001/reserve-item-component

Reserve item component

package.json

@@ -11,9 +11,11 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.2",
+    "date-fns": "^2.30.0",
     "formik": "^2.4.5",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-datepicker": "^4.24.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",
     "react-redux": "^9.0.0",

src/App.js

@@ -1,3 +1,4 @@
+import './styles/App.css';
 import React from 'react';
 import Router from './routes/routes';
 

src/components/Card/DisplayItemCard.js

@@ -50,7 +50,7 @@ const DisplayItemCard = ({ name, imgSrc, amount, description }) => {
             <SettingIcon>
             <FaCog />
             </SettingIcon>
-            Configure
+            Reserve
             <ArrowIcon>
             <FaArrowRight />
             </ArrowIcon>

src/components/Form/FormComponent.js

@@ -26,12 +26,16 @@ FormComponent.propTypes = {
     email: PropTypes.string.isRequired,
     password: PropTypes.string.isRequired,
     confirm_password: PropTypes.string.isRequired,
+    selectedDate: PropTypes.instanceOf(Date).isRequired,
+    selectedCity: PropTypes.string.isRequired,
   }).isRequired,
   schema: PropTypes.shape({
     userName: PropTypes.string.isRequired,
     email: PropTypes.string.isRequired,
     password: PropTypes.string.isRequired,
     confirm_password: PropTypes.string.isRequired,
+    selectedDate: PropTypes.instanceOf(Date).isRequired,
+    selectedCity: PropTypes.string.isRequired,
   }).isRequired,
   onSubmit: PropTypes.func.isRequired,
   children: PropTypes.node.isRequired,

src/components/Form/FormField.js

@@ -1,20 +1,61 @@
 import { useField } from 'formik';
 import React from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
 import PropTypes from 'prop-types';
 
 import styled from '@emotion/styled';
 
+export const DateField = ({
+  label, name, className, ...props
+}) => {
+  const [field, meta, helpers] = useField(name);
+
+  const handleChange = (date) => {
+    helpers.setValue(date);
+  };
+
+  const handleDatePickerChange = (date) => {
+    handleChange(date);
+  };
+
+  console.log('value fromt eh field', field.value);
+  return (
+    <DateFieldWrapper className={className}>
+      <InputLabel htmlFor={props.name || props.id}>{label}</InputLabel>
+      <StyledDatePicker {...field} {...props} selected={field.value} onChange={handleDatePickerChange} onBlur={() => helpers.setTouched(true)} />
+      {meta.touched && meta.error ? (
+        <FieldErrorInfo>{meta.error}</FieldErrorInfo>
+      ) : null}
+    </DateFieldWrapper>
+  );
+};
+
+DateField.propTypes = {
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  className: PropTypes.string.isRequired,
+};
+
 export const SelectField = ({
-  label, lpiSrc, rpiSrc, className, name, id, ...props
+  label, lpiSrc, rpiSrc, className, name, id, options, ...props
 }) => {
   const [field, meta] = useField(name);
+  console.log('selected city', field.value);
   return (
     <InputWrapper className={className}>
       <InputLabel htmlFor={props.name || props.id}>
         {label}
       </InputLabel>
       <InputContainer>
-        <Select {...field} {...props} />
+        <Select {...field} {...props}>
+          {options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </Select>
         {lpiSrc ? <LeftPlaceHolderCardIcon alt="icon" src={lpiSrc} /> : null}
         {lpiSrc ? <RightPlaceHolderCardIcon alt="icon" src={lpiSrc} /> : null}
       </InputContainer>
@@ -32,6 +73,12 @@ SelectField.propTypes = {
   className: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+    })
+  ).isRequired,
 };
 
 export const TextInputField = ({
@@ -106,6 +153,29 @@ TextAreaInputField.propTypes = {
   id: PropTypes.string.isRequired,
 };
 
+const DateFieldWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+
+  label {
+    margin-bottom: 0.5rem;
+  }
+
+  .react-datepicker-wrapper,
+  .react-datepicker__input-container {
+    width: 100%;
+  }
+`;
+
+const StyledDatePicker = styled(DatePicker)`
+  width: 100%;
+  padding: 0.5rem;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+`;
+
 export const InputWrapper = styled.div`
   width: 100%;
 `;

src/components/MyReservations/MyReservationsList.js

@@ -1 +1,35 @@
-// my reservations list component
+import React, {useEffect} from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { fetchCarReservations } from '../../redux/thunk';
+
+const MyReservationsList = () => {
+    const dispatch = useDispatch();
+    const myReservations = useSelector((state) => state.reservation.reservations);
+    const status = useSelector((state) => state.reservation.status);
+    const error = useSelector((state) => state.reservation.error);
+
+    useEffect(() => {
+        dispatch(fetchCarReservations());
+    }, [dispatch]);
+
+    if (status === 'loading') {
+    return <p>Loading...</p>;
+    }
+
+    if (status === 'failed') {
+    return <p>Error: {error}</p>;
+    }
+
+    return (
+    <div>
+        <h1>My Reservations</h1>
+        {myReservations.map((reservation) => (
+        <div key={reservation.id}>
+            <p>{`Car: ${reservation.car.name}, Date: ${reservation.date}, City: ${reservation.city}`}</p>
+        </div>
+        ))}
+    </div>
+    );
+};
+
+export default MyReservationsList;

src/components/ReserveCars/ReserveCar.js

@@ -1 +1,28 @@
-// reserve item page component
+import React from 'react';
+import ReserveCarFrom from './ReserveCarForm';
+
+const ReserveCar = () => (
+  <div className="reserve-car-outer">
+    <div className="testing-backdrop">
+      <div className="reserve-car-inner">
+        <h1 id="reserve-car-head-title">Book A Car on Hourly bases!</h1>
+        <div className="blank-div" />
+        <p id="reserve-page-head-description">
+          You can reserve a car from the list of cars present. You can Book the car by selecting the
+          {' '}
+          <i>City</i>
+          {' '}
+          and the
+          <i>Date</i>
+          {' '}
+          you want to book
+          the Vehicle. We have services all over the globe which some include test-riding facilites.
+          To book the car select both City and Date, please use the selector below.
+        </p>
+        <ReserveCarFrom />
+      </div>
+    </div>
+  </div>
+);
+
+export default ReserveCar;