From 8e6ac46868dd467f76fd891bf42b2c89a714977b Mon Sep 17 00:00:00 2001 From: Munish Date: Mon, 6 Nov 2023 10:22:55 +0200 Subject: [PATCH] Fix components & slices errors --- src/App.js | 4 ++-- src/components/Slider.js | 4 ---- src/components/car/AddCar.js | 6 +++++- src/components/car/DeleteCar.js | 9 +++++++-- src/components/login/login.js | 16 ++++++++-------- src/components/reservation/AddReservation.js | 4 ++-- src/components/reservation/ReservationList.js | 4 ++-- src/redux/cars/carsSlice.js | 19 ++++++++++++++++--- 8 files changed, 42 insertions(+), 24 deletions(-) diff --git a/src/App.js b/src/App.js index 84db15f..cde549f 100644 --- a/src/App.js +++ b/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() { ); -} +}; export default App; diff --git a/src/components/Slider.js b/src/components/Slider.js index 170caea..227e27a 100644 --- a/src/components/Slider.js +++ b/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); diff --git a/src/components/car/AddCar.js b/src/components/car/AddCar.js index 1ef5ec7..e5f25ac 100644 --- a/src/components/car/AddCar.js +++ b/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 = () => { + {isCreated &&

Car added successfully

} + {isCreatedError &&

{isCreatedError}

} ); diff --git a/src/components/car/DeleteCar.js b/src/components/car/DeleteCar.js index 1d08691..5c8af17 100644 --- a/src/components/car/DeleteCar.js +++ b/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) => (

{car.name}

-
diff --git a/src/components/login/login.js b/src/components/login/login.js index 1e2765e..7867a70 100644 --- a/src/components/login/login.js +++ b/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 ; } @@ -39,6 +39,6 @@ function Login() { ); -} +}; export default Login; diff --git a/src/components/reservation/AddReservation.js b/src/components/reservation/AddReservation.js index a92f0b1..801b997 100644 --- a/src/components/reservation/AddReservation.js +++ b/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() { ); -} +}; export default AddReservation; diff --git a/src/components/reservation/ReservationList.js b/src/components/reservation/ReservationList.js index 5cde798..bcc9636 100644 --- a/src/components/reservation/ReservationList.js +++ b/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

No reservations available

; -} +}; export default ReservationList; diff --git a/src/redux/cars/carsSlice.js b/src/redux/cars/carsSlice.js index 0bc0c94..03fa812 100644 --- a/src/redux/cars/carsSlice.js +++ b/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;