Feat(JSX) Added pagination

package.json

@@ -20,6 +20,7 @@
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
     "react-select": "^5.7.7",
+    "react-toastify": "^9.1.3",
     "redux-persist": "^6.0.0",
     "web-vitals": "^2.1.4"
   },

src/pages/Catalog/Catalog.jsx

@@ -1,19 +1,27 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import CarItem from 'components/CarItem/CarItem';
-import { WrapperFilter, WrapperList, LoadMoreButton } from './Catalog.styled'; // Добавьте импорт для кнопки LoadMore
+import { WrapperFilter, WrapperList, LoadMore } from './Catalog.styled'; // Добавьте импорт для кнопки LoadMore
 import Filter from 'components/Filter/Filter';
 
 import { useGetCarsByPageQuery } from '../../redux/operations';
+import { Loader } from 'components/Loader/Loader';
 
 export default function Catalog() {
   const [page, setPage] = useState(1);
+  const [allCars, setAllCars] = useState([]); // Стейт для хранения всех карточек
+
   const { data, error, isLoading, isFetching } = useGetCarsByPageQuery(page);
 
   const loadMore = () => {
     setPage(page + 1);
   };
 
-  const allCars = data ? data.reduce((acc, curr) => acc.concat(curr), []) : [];
+  useEffect(() => {
+    if (data) {
+      // Обновляем стейт allCars, добавляя новые карточки
+      setAllCars(prevCars => [...prevCars, ...data]);
+    }
+  }, [data]);
 
   return (
     <>
@@ -22,9 +30,9 @@ export default function Catalog() {
       </WrapperFilter>
       <WrapperList>
         {error ? (
-          <>Ой, произошла ошибка</>
+          <>Oops, there was an error...</>
         ) : isLoading ? (
-          <>Загрузка...</>
+          <Loader />
         ) : allCars.length > 0 ? (
           <>
             {allCars.map(car => (
@@ -34,9 +42,9 @@ export default function Catalog() {
         ) : null}
       </WrapperList>
       {data && data.length >= 8 && (
-        <LoadMoreButton onClick={loadMore} disabled={isFetching}>
-          Load More
-        </LoadMoreButton>
+        <LoadMore onClick={loadMore} disabled={isFetching}>
+          Load more
+        </LoadMore>
       )}
     </>
   );

src/pages/Catalog/Catalog.styled.jsx

@@ -18,23 +18,22 @@ export const WrapperList = styled.div`
   margin-top: 50px;
 `;
 
-export const LoadMoreButton = styled.button`
-  background-color: #007bff;
-  color: #fff;
-  padding: 10px 20px;
-  border: none;
-  cursor: pointer;
+export const LoadMore = styled.a`
+  color: #3470ff;
+  font-family: 'Manrope';
   font-size: 16px;
-  border-radius: 5px;
-  margin-top: 20px;
-  transition: background-color 0.3s ease;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.5;
+  text-decoration-line: underline;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 100px;
+  padding-bottom: 100px;
+  cursor: pointer;
 
   &:hover {
-    background-color: #0056b3;
-  }
-
-  &:disabled {
-    background-color: #ccc;
-    cursor: not-allowed;
+    color: #0b44cd;
   }
 `;