From 8e6ac46868dd467f76fd891bf42b2c89a714977b Mon Sep 17 00:00:00 2001 From: Munish Date: Mon, 6 Nov 2023 10:22:55 +0200 Subject: [PATCH 1/4] 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; From 8d930db659842f633d6c995280c9abf4d6f85f58 Mon Sep 17 00:00:00 2001 From: Munish Date: Mon, 6 Nov 2023 10:55:12 +0200 Subject: [PATCH 2/4] Update slider window object --- src/components/Slider.js | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/components/Slider.js b/src/components/Slider.js index 227e27a..6df949b 100644 --- a/src/components/Slider.js +++ b/src/components/Slider.js @@ -1,19 +1,31 @@ -import React from "react"; +import React, { useEffect, useRef } from "react"; +import { useSelector } from "react-redux"; import styles from "../CSS/Slider.module.css"; import arrow from "../assets/arrow.png"; const Slider = () => { const slider = document.querySelector("#slider"); + const win = useRef(0); + const { cars } = useSelector((state) => state.cars); + + useEffect(() => { + win.window = window; + }); + const slideLeft = () => { - const leftMargin = +window.getComputedStyle(slider).marginLeft.slice(0, -2); - if (leftMargin < (slider.childElementCount + 1) * -350) return; + const leftMargin = +win.window + .getComputedStyle(slider) + .marginLeft.slice(0, -2); + if (leftMargin < (cars.length + 1) * -350) return; document.querySelector("#slider").style.marginLeft = `${ leftMargin - 350 }px`; }; const slideRight = () => { - const leftMargin = +window.getComputedStyle(slider).marginLeft.slice(0, -2); + const leftMargin = +win.window + .getComputedStyle(slider) + .marginLeft.slice(0, -2); if (leftMargin >= 0) return; document.querySelector("#slider").style.marginLeft = `${ leftMargin + 350 From fd9810632cfd8e3b89d41c188efce658ef1b4d45 Mon Sep 17 00:00:00 2001 From: Munish Date: Mon, 6 Nov 2023 11:42:32 +0200 Subject: [PATCH 3/4] Fix slider issue --- src/App.css | 4 ++++ src/components/Slider.js | 20 ++++++++++---------- src/components/nav/NavMenu.js | 6 +++++- 3 files changed, 19 insertions(+), 11 deletions(-) diff --git a/src/App.css b/src/App.css index 9b7f1ce..42a0423 100644 --- a/src/App.css +++ b/src/App.css @@ -282,6 +282,10 @@ div.car-details-img { div.car-details-img { background-size: 500px; } + + .sidebar{ + position: fixed; + } } @media screen and (max-width: 600px) { diff --git a/src/components/Slider.js b/src/components/Slider.js index 6df949b..346abfb 100644 --- a/src/components/Slider.js +++ b/src/components/Slider.js @@ -1,35 +1,35 @@ -import React, { useEffect, useRef } from "react"; +import React, { useEffect, useRef, useState } from "react"; import { useSelector } from "react-redux"; import styles from "../CSS/Slider.module.css"; import arrow from "../assets/arrow.png"; const Slider = () => { - const slider = document.querySelector("#slider"); const win = useRef(0); const { cars } = useSelector((state) => state.cars); + const [curIndex, setCurIndex] = useState(0); useEffect(() => { win.window = window; }); const slideLeft = () => { + if (curIndex <= 0) return; + const slider = document.querySelector("#slider"); const leftMargin = +win.window .getComputedStyle(slider) .marginLeft.slice(0, -2); - if (leftMargin < (cars.length + 1) * -350) return; - document.querySelector("#slider").style.marginLeft = `${ - leftMargin - 350 - }px`; + slider.style.marginLeft = `${leftMargin + 350}px`; + setCurIndex((curIndex) => curIndex - 1); }; const slideRight = () => { + if (curIndex >= cars.length + 1) return; + const slider = document.querySelector("#slider"); const leftMargin = +win.window .getComputedStyle(slider) .marginLeft.slice(0, -2); - if (leftMargin >= 0) return; - document.querySelector("#slider").style.marginLeft = `${ - leftMargin + 350 - }px`; + slider.style.marginLeft = `${leftMargin - 350}px`; + setCurIndex((curIndex) => curIndex + 1); }; return (
diff --git a/src/components/nav/NavMenu.js b/src/components/nav/NavMenu.js index a8d7474..83a1a99 100644 --- a/src/components/nav/NavMenu.js +++ b/src/components/nav/NavMenu.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { NavLink } from "react-router-dom"; // eslint-disable-next-line import/no-extraneous-dependencies import { UilTwitter, UilFacebookF, UilSignout } from "@iconscout/react-unicons"; @@ -16,6 +16,10 @@ const NavMenu = () => { setIsOpen(!isOpen); }; + useEffect(() => { + if (document.body.clientWidth <= 750) toggleMenu(); + }, []); + const signout = () => { localStorage.removeItem("authKey"); window.location.pathname = "/"; From 9954185cc038f414352a747204f698996a59ec1d Mon Sep 17 00:00:00 2001 From: Munish Date: Mon, 6 Nov 2023 11:48:58 +0200 Subject: [PATCH 4/4] Fix style errors --- src/App.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.css b/src/App.css index 42a0423..1d6c734 100644 --- a/src/App.css +++ b/src/App.css @@ -283,7 +283,7 @@ div.car-details-img { background-size: 500px; } - .sidebar{ + .sidebar { position: fixed; } }