fixFilterStyle

OlenaIa · Dec 1, 2023 · 5dfe190 · 5dfe190
1 parent 8c4147a
commit 5dfe190
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 39 deletions.
diff --git a/src/components/CarsList/CarsList.jsx b/src/components/CarsList/CarsList.jsx
@@ -4,52 +4,48 @@ import { Container, Section } from "pages/Page.styled";
 import { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { LIMIT, getAllCarsThunk, getCarsThunk, getFilterCarsThunk } from "redux/cars/fetchCar";
-import { selectAllCars, selectBrand, selectCars, selectIsLoading, selectPage } from "redux/selectors";
+import { selectAllCars, selectBrand, selectCars, selectIsLoading } from "redux/selectors";
 import { CarsListStyle, LoadMore } from "./CarsList.styled";
-import { pageSet } from "redux/filter/filterSlice";
 
 export const CarsList = () => {
     const dispatch = useDispatch();
     const isLoading = useSelector(selectIsLoading);
     const cars = useSelector(selectCars);
     const allCars = useSelector(selectAllCars);
     const filterBrand = useSelector(selectBrand);
-    const page = useSelector(selectPage);
-    // const [page, setPage] = useState(0)
+    // const page = useSelector(selectPage);
+    const [page, setPage] = useState(1)
     const [isLoadMore, setIsLoadMore] = useState(false);
 
     useEffect(() => {
         dispatch(getAllCarsThunk())
     }, [dispatch]);
 
-    // useEffect(() => {
-    //     if (page === 0) {
-    //         setPage(page + 1);
-    //         return; 
-    //     };
-
-    //     dispatch(getCarsThunk(page))
-    // }, [dispatch, page]);
-
     useEffect(() => {
-        // if (filterBrand === 'all') {
-        //     setIsLoadMore(false);
-        //     setPage(1);
-        // };
+        if (page === 1) {
+            return; 
+        };
 
+        dispatch(getCarsThunk(page))
+    }, [dispatch, page]);
 
-        dispatch(getFilterCarsThunk({filterBrand, page}))
-        setIsLoadMore(true);
+    useEffect(() => {
+        if (filterBrand.value === 'all') {
+            setIsLoadMore(false);
+            setPage(1);
+        } else {setIsLoadMore(true)};
 
-    }, [dispatch, filterBrand, page]);
+        dispatch(getFilterCarsThunk(filterBrand))
+    }, [dispatch, filterBrand]);
 
     const totalPage = allCars.length / LIMIT;
-     
+
     const onClickLoadMore = () => {
         if (page === totalPage - 1) {
             setIsLoadMore(true);
         };
-        pageSet();
+        setPage(page + 1)
+
         console.log('page', page);
     };
 
@@ -63,7 +59,7 @@ export const CarsList = () => {
                             <CarItem car={car} key={car.id} index={index} />
                         )}
                     </CarsListStyle>
-                    <LoadMore onClick={onClickLoadMore} display={false ? 'none' : 'block'}>Load more</LoadMore>
+                    <LoadMore onClick={onClickLoadMore} display={isLoadMore ? 'none' : 'block'}>Load more</LoadMore>
                 </>
                 )}
             </Container>

diff --git a/src/components/Filters/Filters.jsx b/src/components/Filters/Filters.jsx
@@ -76,9 +76,6 @@ console.log('mileageFrom');
                 value={selectedPrice}
           />
                 </Label>
-                <form
-                    // onSubmit={onSubmitFilter}
-                >
                     <InputWrap>
                         <Label>Сar mileage / km
                             <Input type="number"
@@ -99,8 +96,9 @@ value={mileageTo}
                             step='10'
                             $radius='0px 14px 14px 0px' />
                     </InputWrap>
-                    <ButtonSearch type="submit">Search</ButtonSearch>
-                </form>
+                    <ButtonSearch type="submit"
+                                        // onSubmit={onSubmitFilter}
+>Search</ButtonSearch>
             </Form>
         </>
     )

diff --git a/src/components/Filters/Filters.styled.js b/src/components/Filters/Filters.styled.js
@@ -15,6 +15,8 @@ export const Form = styled.form`
 `;
 
 export const Label = styled.label`
+display: flex;
+    flex-direction: column;
     color: var(--color-text-label);
     font-size: 14px;
     font-weight: 500;

diff --git a/src/redux/cars/fetchCar.js b/src/redux/cars/fetchCar.js
@@ -24,6 +24,7 @@ const getAllCars = async (_, thunkAPI) => {
 
 const getCars = async (page, thunkAPI) => {
     try {
+        console.log('page in getCars', page);
         const response = await axios.get(`/adverts?page=${page}&limit=${LIMIT}`);
         return response.data;
     }
@@ -32,12 +33,12 @@ const getCars = async (page, thunkAPI) => {
     }
 };
 
-const getFilterCars = async ({filterBrand, page}, thunkAPI) => {
+const getFilterCars = async (filterBrand, thunkAPI) => {
     try {
 
-        const endPoint = (filterBrand.value === 'all') ? `page=${page}&limit=${LIMIT}` : `make=${filterBrand.value}`;
+        const endPoint = (filterBrand.value === 'all') ? `page=1&limit=${LIMIT}` : `make=${filterBrand.value}`;
         console.log('filterBrand in getFilterCars', filterBrand);
-        console.log('page in getFilterCars', page);
+        // console.log('page in getFilterCars', page);
         console.log('endPoint', endPoint);
         const response = await axios.get(`/adverts?${endPoint}`);
         return response.data;

diff --git a/src/redux/filter/filterSlice.js b/src/redux/filter/filterSlice.js
@@ -2,7 +2,6 @@ import { createSlice } from '@reduxjs/toolkit';
 
 const filterInitialState = {
     brand: { value: 'all', label: 'Enter the text' },
-    page: 1,
 };
 
 export const filterSlice = createSlice({
@@ -12,13 +11,9 @@ export const filterSlice = createSlice({
         brandSet(state, {payload}) {
             state.brand = payload;
         },
-        pageSet(state, {payload}) {
-            console.log('payload', payload);
-            state.page = 2;
-        },
     },
     });
 
 export const filterReducer = filterSlice.reducer;
 
-export const { brandSet, pageSet } = filterSlice.actions;
+export const { brandSet } = filterSlice.actions;
diff --git a/src/redux/selectors.js b/src/redux/selectors.js
@@ -12,5 +12,4 @@ export const selectFavoriteCars = state => state.favoriteCars.favorites;
 
 // --------------- FILTER -----------------
 
-export const selectBrand = state => state.filter.brand;
-export const selectPage = state => state.filter.page;
+export const selectBrand = state => state.filter.brand;