Fix components & slices errors

src/App.js

@@ -12,7 +12,7 @@ import AddCar from "./components/car/AddCar";
 import CarDetail from "./components/car/CarDetail";
 import DeleteCar from "./components/car/DeleteCar";
 
-function App() {
+const App = () => {
   const loginData = useSelector((state) => state.login);
   const dispatch = useDispatch();
   useEffect(() => {
@@ -45,6 +45,6 @@ function App() {
       </Routes>
     </main>
   );
-}
+};
 
 export default App;

src/components/Slider.js

@@ -1,12 +1,8 @@
 import React from "react";
-// import { useDispatch, useSelector } from "react-redux";
-// import { nextCar } from "../redux/cars/carsSlice";
 import styles from "../CSS/Slider.module.css";
 import arrow from "../assets/arrow.png";
 
 const Slider = () => {
-  // const sliderIndex = useSelector((state) => state.cars.value);
-  // const dispatch = useDispatch();
   const slider = document.querySelector("#slider");
   const slideLeft = () => {
     const leftMargin = +window.getComputedStyle(slider).marginLeft.slice(0, -2);

src/components/car/AddCar.js

@@ -3,7 +3,9 @@ import { useDispatch, useSelector } from "react-redux";
 import { addCar } from "../../redux/cars/carsSlice";
 
 const AddCar = () => {
-  const { isLoading } = useSelector((state) => state.cars);
+  const { isLoading, isCreated, isCreatedError } = useSelector(
+    (state) => state.cars,
+  );
   const { userId } = useSelector((state) => state.login);
   const dispatch = useDispatch();
 
@@ -153,6 +155,8 @@ const AddCar = () => {
           </li>
           <input type="submit" value="Add Car" />
         </ul>
+        {isCreated && <p>Car added successfully</p>}
+        {isCreatedError && <p>{isCreatedError}</p>}
       </form>
     </section>
   );

src/components/car/DeleteCar.js

@@ -4,6 +4,7 @@ import { deleteCar, getCars } from "../../redux/cars/carsSlice";
 
 const DeleteCar = () => {
   const { cars, isLoading, isUpdated } = useSelector((state) => state.cars);
+  const { userId } = useSelector((state) => state.login);
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -15,7 +16,7 @@ const DeleteCar = () => {
   }
 
   const handleDeleteCar = (carId) => {
-    dispatch(deleteCar({ carId }));
+    dispatch(deleteCar({ userId, carId }));
   };
 
   if (isLoading) {
@@ -35,7 +36,11 @@ const DeleteCar = () => {
           {cars.map((car) => (
             <div className="delete-car-item" key={car.id}>
               <p>{car.name}</p>
-              <button className="delete-btn" onClick={() => handleDeleteCar(car.id)} type="button">
+              <button
+                className="delete-btn"
+                onClick={() => handleDeleteCar(car.id)}
+                type="button"
+              >
                 Delete
               </button>
             </div>

src/components/login/login.js

@@ -1,9 +1,9 @@
-import { Link, useLocation } from 'react-router-dom';
-import { useDispatch, useSelector } from 'react-redux';
-import Signup from '../signup/signup';
-import { logIn } from '../../redux/login/loginSlice';
+import { Link, useLocation } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import Signup from "../signup/signup";
+import { logIn } from "../../redux/login/loginSlice";
 
-function Login() {
+const Login = () => {
   const loginData = useSelector((state) => state.login);
   const dispatch = useDispatch();
   const location = useLocation();
@@ -15,9 +15,9 @@ function Login() {
   };
 
   // Checking if user is already login, if yes redirect to home page
-  if (loginData.isLogIn) window.location.pathname = '/';
+  if (loginData.isLogIn) window.location.pathname = "/";
 
-  if (location.pathname === '/signup') {
+  if (location.pathname === "/signup") {
     return <Signup />;
   }
 
@@ -39,6 +39,6 @@ function Login() {
       </Link>
     </section>
   );
-}
+};
 
 export default Login;

src/components/reservation/AddReservation.js

@@ -4,7 +4,7 @@ import { useSearchParams } from "react-router-dom";
 import { getCars } from "../../redux/cars/carsSlice";
 import { addReservation } from "../../redux/reservations/reservationSlice";
 
-function AddReservation() {
+const AddReservation = () => {
   const { cars, isLoading } = useSelector((state) => state.cars);
   const { isCreated, isError } = useSelector((state) => state.reservations);
   const { userId } = useSelector((state) => state.login);
@@ -81,6 +81,6 @@ function AddReservation() {
       </div>
     </section>
   );
-}
+};
 
 export default AddReservation;

src/components/reservation/ReservationList.js

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { getReservations } from "../../redux/reservations/reservationSlice";
 import { getCars } from "../../redux/cars/carsSlice";
 
-function ReservationList() {
+const ReservationList = () => {
   const { userId } = useSelector((state) => state.login);
   const { reservations, isLoading, isError } = useSelector(
     (state) => state.reservations,
@@ -47,6 +47,6 @@ function ReservationList() {
   }
 
   return <p>No reservations available</p>;
-}
+};
 
 export default ReservationList;

src/redux/cars/carsSlice.js

@@ -3,8 +3,6 @@ import axios from "axios";
 import { getLocalStorageAuth } from "../../utility/helper";
 import { API_URL } from "../../utility/globalVariable";
 
-axios.defaults.headers.common.Authorization = getLocalStorageAuth();
-
 const initialState = {
   cars: [],
   isLoading: false,
@@ -15,6 +13,8 @@ const initialState = {
   isUpdated: false,
   displayedCars: [],
   removedCars: [],
+  isCreated: false,
+  isCreatedError: null,
 };
 
 export const getCars = createAsyncThunk("cars/getCars", async (_, thunkAPI) => {
@@ -63,6 +63,7 @@ export const addCar = createAsyncThunk(
         {
           headers: {
             "Content-Type": "multipart/form-data",
+            Authorization: getLocalStorageAuth(),
           },
         },
       );
@@ -80,6 +81,11 @@ export const deleteCar = createAsyncThunk(
     try {
       const response = await axios.delete(
         `${API_URL}/users/${userId}/cars/${carId}`,
+        {
+          headers: {
+            Authorization: getLocalStorageAuth(),
+          },
+        },
         {
           data: {
             id: carId,
@@ -100,6 +106,11 @@ export const getCarById = createAsyncThunk(
     try {
       const response = await axios.get(
         `${API_URL}/users/${userId}/cars/${carId}`,
+        {
+          headers: {
+            Authorization: getLocalStorageAuth(),
+          },
+        },
       );
       return response;
     } catch (error) {
@@ -146,11 +157,13 @@ const carsSlice = createSlice({
     },
     [addCar.fulfilled]: (state, action) => {
       state.isLoading = false;
+      state.isCreated = true;
       state.cars = action.payload.status.data;
     },
     [addCar.rejected]: (state, action) => {
       state.isLoading = false;
-      state.error = action.payload;
+      state.isCreatedError = action.payload;
+      state.isCreated = false;
     },
     [getCarById.pending]: (state) => {
       state.isLoading = true;