Style

jsconfig.json

@@ -0,0 +1,7 @@
+{
+    "compilerOptions": {
+        "baseUrl": "./src",
+        "checkJs": true,
+        "jsx": "react"
+    }
+}

src/components/Form/FormComponent2.js

@@ -27,15 +27,15 @@ FormComponent2.propTypes = {
     pricePerHr: PropTypes.string.isRequired,
     seating_capacity: PropTypes.number.isRequired,
     rental_duration: PropTypes.number.isRequired,
-    // image: PropTypes.string.isRequired,
+    image: PropTypes.string.isRequired,
   }).isRequired,
   schema: PropTypes.shape({
     name: PropTypes.string.isRequired,
     description: PropTypes.string.isRequired,
     pricePerHr: PropTypes.string.isRequired,
     seating_capacity: PropTypes.number.isRequired,
     rental_duration: PropTypes.number.isRequired,
-    // image: PropTypes.string.isRequired,
+    image: PropTypes.string.isRequired,
   }).isRequired,
   onSubmit: PropTypes.func.isRequired,
   children: PropTypes.node.isRequired,

src/components/Form/FormField.js

@@ -157,21 +157,21 @@ TextAreaInputField.propTypes = {
 export const FileInputField = ({
   id, label, name, className, ...props
 }) => {
-  const [field, meta, helpers] = useField(name);
+  const [, meta, helpers] = useField(name);
 
   const handleChange = (event) => {
     const file = event.currentTarget.files[0];
     helpers.setValue(file);
-    // console.log('FIle', file);
+    console.log('FIle', file);
+    // return file;
   };
 
   return (
     <FileInputWrapper className={className}>
       <InputLabel htmlFor={props.name || props.id}>{label}</InputLabel>
       <StyledFileInput
         type="file"
-        {...field}
-        {...props}
+        accept="image/*"
         onChange={handleChange}
         onBlur={() => helpers.setTouched(true)}
       />

src/models/car.model.js

@@ -6,7 +6,7 @@ export const CarSchema = Yup.object().shape({
   pricePerHr: Yup.string().required('Price is required'),
   seating_capacity: Yup.number().required('State sitting capacity'),
   rental_duration: Yup.number().required('State the duration'),
-  image: Yup.string(),
+  image: Yup.string().required('Add Image'),
 });
 
 export const carInitialValues = {

src/pages/LandingPage/Contact/Contact.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const Contact = () => (
-  <div className='contact-page-container'>
+  <div className="contact-page-container">
     <p>CaBooky Vehicle Booking Services.</p>
     <p>@2023</p>
   </div>

src/pages/UserDashboard/AddNewCar/AddNewCarForm.js

@@ -12,13 +12,32 @@ const AddNewCarForm = () => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const status = useSelector((state) => state.cars.status);
-  const handleSubmit = (values) => {
-    dispatch(postNewCar(values));
-  };
 
-  if (status === 'succeeded') {
-    navigate(`${USERS_DASHBOARD}`);
-  }
+  const handleSubmit = (values, { setSubmitting }) => {
+    const data = new FormData();
+
+    data.append('car[name]', values.name);
+    data.append('car[description]', values.description);
+    data.append('car[pricePerHr]', values.pricePerHr);
+    data.append('car[seating_capacity]', values.seating_capacity);
+    data.append('car[rental_duration]', values.rental_duration);
+
+    if (values.image) {
+      data.append('car[image]', values.image);
+    }
+
+    dispatch(postNewCar(data)).then(() => {
+      setSubmitting(false);
+      if (status === 'succeeded') {
+        navigate(`${USERS_DASHBOARD}`);
+      }
+    }).catch((error) => {
+      if (error) {
+        return error;
+      }
+      return setSubmitting(false);
+    });
+  };
 
   return (
     <FormComponent2
@@ -32,7 +51,7 @@ const AddNewCarForm = () => {
       <TextInputField label="Price/Hour" name="pricePerHr" placeholder="Price of rent/hr" className="add-new-string" id="add-new-car-form-price" />
       <TextInputField label="Seating Capacity" name="seating_capacity" placeholder="Seating Capacity of Car" className="add-new-string" id="add-new-car-form-cap" />
       <TextInputField label="Minimum Rent Duration" name="rental_duration" placeholder="Minimum Reantal Duration" className="add-new-string" id="add-new-car-form-duration" />
-      <FileInputField label="Add Image of Car" name="Add Image" className="add-new-string" id="add-new-car-form-image" />
+      <FileInputField label="Add Image of Car" name="image" className="add-new-string" id="add-new-car-form-image" />
       <FormSubmitButton type="submit" className="add-new-car-submit">
         Create Car
       </FormSubmitButton>

src/pages/UserDashboard/DashboardHome.js

@@ -51,7 +51,6 @@ const DashboardHome = () => {
               name={data.name}
               shortNote={data.description}
               imgSrc={colorWheel}
-              deletedAt={data.deleted_at}
             />
           ))}
         </CardContainer>

src/redux/cars/carsSlice.js

@@ -56,6 +56,7 @@ const carsSlice = createSlice({
       .addCase(postNewCar.fulfilled, (state, action) => {
         state.status = 'succeeded';
         state.cars = [...state.cars, action.payload];
+        console.log('Car state :', state.cars);
       })
       .addCase(postNewCar.rejected, (state, action) => {
         state.status = 'failed';

src/redux/thunk.js

@@ -122,6 +122,7 @@ export const postNewCar = createAsyncThunk(
           Authorization: token,
         },
       });
+      console.log('Car Response', response);
       return response.data;
     } catch (error) {
       return thunkAPI.rejectWithValue(error);