Merge pull request #21 from flemton/feature/add-cars

Request to merge Feature/add cars to development

src/components/Menu/BurgerMenu.jsx

@@ -42,27 +42,27 @@ const BurgerMenu = () => {
             <div className="d-flex flex-column justify-content-between align-items-center gap-4">
               <Logo />
               <div className="sidebar-menu-ul d-flex flex-column align-self-start my-3">
-                <NavLink to="/" className="sidebar-menu-navlink text-end" activeClassName="active">
+                <NavLink to="/home" className="sidebar-menu-navlink text-end" activeclassname="active">
                   HOME
                 </NavLink>
                 <NavLink
                   to="/reserve"
                   className="sidebar-menu-navlink text-end"
-                  activeClassName="active"
+                  activeclassname="active"
                 >
                   RESERVE MODEL
                 </NavLink>
                 <NavLink
                   to="/user_reservations"
                   className="sidebar-menu-navlink text-end"
-                  activeClassName="active"
+                  activeclassname="active"
                 >
                   MY RESERVATIONS
                 </NavLink>
                 <NavLink
                   to="/addcar"
                   className="sidebar-menu-navlink text-end"
-                  activeClassName="active"
+                  activeclassname="active"
                 >
                   ADD CARS
                 </NavLink>

src/components/Menu/Navbar.jsx

@@ -4,16 +4,16 @@ import { NavLink } from 'react-router-dom';
 const Navbar = () => (
   <div className="burger-menu-navbar">
     <div className="sidebar-menu-ul d-flex flex-column align-self-end w-100">
-      <NavLink to="/" activeClassName="active">
+      <NavLink to="/home" activeclassname="active">
         HOME
       </NavLink>
-      <NavLink to="/reserve" activeClassName="active">
+      <NavLink to="/reserve" activeclassname="active">
         RESERVE MODEL
       </NavLink>
-      <NavLink to="/user_reservations" activeClassName="active">
+      <NavLink to="/user_reservations" activeclassname="active">
         MY RESERVATIONS
       </NavLink>
-      <NavLink to="/addcar" activeClassName="active">
+      <NavLink to="/addcar" activeclassname="active">
         ADD CARS
       </NavLink>
       <button type="button">DELETE CAR</button>

src/components/Session/Login.js

@@ -2,14 +2,14 @@ import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import './session.css';
 import { useDispatch, useSelector } from 'react-redux';
-import { selectData, loginAsync } from '../../redux/slices/loginSlice';
+import { loginAsync } from '../../redux/slices/loginSlice';
 
 const Login = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const navigate = useNavigate();
   const dispatch = useDispatch();
-  const data = useSelector(selectData);
+  const { data } = useSelector((state) => state.login);
 
   const handleLogin = (e) => {
     e.preventDefault();

src/components/Sidebar/Sidebar.jsx

@@ -19,16 +19,16 @@ const Sidebar = () => {
           <div className="d-flex flex-column justify-content-between align-items-center gap-5">
             <Logo />
             <div className="sidebar-menu-ul d-flex flex-column align-self-end">
-              <NavLink to="/home" className="sidebar-menu-navlink" activeClassName="active">
+              <NavLink to="/home" className="sidebar-menu-navlink" activeclassname="active">
                 HOME
               </NavLink>
-              <NavLink to="/reserve" activeClassName="active">
+              <NavLink to="/reserve" activeclassname="active">
                 RESERVE MODEL
               </NavLink>
-              <NavLink to="/user_reservations" activeClassName="active">
+              <NavLink to="/user_reservations" activeclassname="active">
                 MY RESERVATIONS
               </NavLink>
-              <NavLink to="/addcar" activeClassName="active">
+              <NavLink to="/addcar" activeclassname="active">
                 ADD CARS
               </NavLink>
               <button type="button">DELETE CAR</button>

src/pages/AddCar/AddCar.jsx

@@ -1,17 +1,22 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
 import Sidebar from '../../components/Sidebar/Sidebar';
+import createCar from '../../redux/requests/createCar';
 
 const AddCar = () => {
   const navigate = useNavigate();
+  const dispatch = useDispatch();
   const [formData, setFormData] = useState({
     name: '',
     description: '',
-    deposit: 0,
-    finance_fee: 0,
-    option_to_purchase_fee: 0,
-    total_amount_payable: 0,
-    duration: 0,
+    deposit: '',
+    finance_fee: '',
+    option_to_purchase_fee: '',
+    total_amount_payable: '',
+    duration: '',
+    removed: false,
+    image: null,
   });
 
   const handleInputChange = (e) => {
@@ -21,10 +26,15 @@ const AddCar = () => {
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-    console.log('form data is ', formData);
+    dispatch(createCar(formData));
     navigate('/home');
   };
 
+  const handleImageChange = (e) => {
+    const imageFile = e.target.files[0];
+    setFormData({ ...formData, image: imageFile });
+  };
+
   return (
     <div className="d-flex justify-content-between align-items-center">
       <div>
@@ -51,6 +61,7 @@ const AddCar = () => {
                       type="text"
                       className="form-control"
                       id="name"
+                      name="name"
                       placeholder="John Doe"
                       value={formData.name}
                       onChange={handleInputChange}
@@ -65,6 +76,7 @@ const AddCar = () => {
                       type="text"
                       className="form-control"
                       id="description"
+                      name="description"
                       placeholder="Tesla cars are ..."
                       value={formData.description}
                       onChange={handleInputChange}
@@ -81,6 +93,7 @@ const AddCar = () => {
                       type="number"
                       className="form-control"
                       id="deposit"
+                      name="deposit"
                       placeholder="0"
                       value={formData.deposit}
                       onChange={handleInputChange}
@@ -95,6 +108,7 @@ const AddCar = () => {
                       type="number"
                       className="form-control"
                       id="finance_fee"
+                      name="finance_fee"
                       placeholder="0"
                       value={formData.finance_fee}
                       onChange={handleInputChange}
@@ -112,6 +126,7 @@ const AddCar = () => {
                       className="form-control"
                       id="option_to_purchase_fee"
                       placeholder="0"
+                      name="option_to_purchase_fee"
                       value={formData.option_to_purchase_fee}
                       onChange={handleInputChange}
                       required
@@ -125,6 +140,7 @@ const AddCar = () => {
                       type="number"
                       className="form-control"
                       id="total_amount_payable"
+                      name="total_amount_payable"
                       placeholder="0"
                       value={formData.total_amount_payable}
                       onChange={handleInputChange}
@@ -139,6 +155,7 @@ const AddCar = () => {
                   <input
                     type="number"
                     className="form-control"
+                    name="duration"
                     id="duration"
                     placeholder="0"
                     value={formData.duration}
@@ -147,9 +164,22 @@ const AddCar = () => {
                   />
                 </label>
               </div>
+              <div>
+                <label htmlFor="image" className=" input-text w-100">
+                  Image:
+                  <input
+                    className="input-field"
+                    type="file"
+                    id="image"
+                    name="image"
+                    onChange={handleImageChange}
+                    accept="image/*"
+                  />
+                </label>
+              </div>
               <div className="row d-flex justify-content-center">
                 <div className="col-md text-center">
-                  <button className="btn btn-primary px-5 mx-5 text-white" type="button">
+                  <button className="btn btn-primary px-5 mx-5 text-white" type="submit">
                     Submit
                   </button>
                 </div>

src/pages/Home/Home.jsx

@@ -1,19 +1,27 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import Sidebar from '../../components/Sidebar/Sidebar';
 import CarDetails from '../../components/CarDetails/CarDetails';
 import BurgerMenu from '../../components/Menu/BurgerMenu';
+import Session from '../../components/Session/Session';
 
-const Home = () => (
-  <div className="d-flex justify-content-between align-items-center background-container">
-    <div>
-      <Sidebar />
-      <BurgerMenu />
-    </div>
+const Home = () => {
+  const user = useSelector((state) => state.login.data);
+
+  return !user?.success ? (
+    <Session />
+  ) : (
+    <div className="d-flex justify-content-between align-items-center background-container">
+      <div>
+        <Sidebar />
+        <BurgerMenu />
+      </div>
 
-    <div className="mx-3">
-      <CarDetails />
+      <div className="mx-3">
+        <CarDetails />
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default Home;

src/redux/requests/createCar.js

@@ -0,0 +1,23 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import apiUrl from '../../misc/apiUrl';
+
+const createCar = createAsyncThunk('car/add', async (formData) => {
+  const teslaData = new FormData();
+  teslaData.append('tesla_model[name]', formData.name);
+  teslaData.append('tesla_model[description]', formData.description);
+  teslaData.append('tesla_model[deposit]', formData.deposit);
+  teslaData.append('tesla_model[finance_fee]', formData.finance_fee);
+  teslaData.append('tesla_model[option_to_purchase_fee]', formData.option_to_purchase_fee);
+  teslaData.append('tesla_model[total_amount_payable]', formData.total_amount_payable);
+  teslaData.append('tesla_model[duration]', formData.duration);
+  teslaData.append('tesla_model[removed]', formData.removed);
+  teslaData.append('tesla_model[image]', formData.image);
+  const response = await fetch(`${apiUrl}/tesla_models`, {
+    method: 'POST',
+    body: teslaData,
+  });
+  const data = await response.json();
+  return data;
+});
+
+export default createCar;

src/redux/slices/carSlice.js

@@ -0,0 +1,22 @@
+import { createSlice } from '@reduxjs/toolkit';
+import createCar from '../requests/createCar';
+
+const initialState = {
+  cars: [],
+  loading: false,
+  error: null,
+};
+
+const carSlice = createSlice({
+  name: 'car',
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(createCar.fulfilled, (state) => ({
+      ...state,
+      loading: false,
+    }));
+  },
+});
+
+export default carSlice.reducer;

src/redux/slices/loginSlice.js

@@ -54,8 +54,4 @@ export const loginAsync = (email, password) => async (dispatch) => {
   }
 };
 
-export const selectData = (state) => state.login.data;
-export const selectLoading = (state) => state.login.loading;
-export const selectError = (state) => state.login.error;
-
 export default loginSlice.reducer;