Merge pull request #19 from fe-may23-dreamTeam/phones-from-api

Phones from api

src/pages/CatalogPage.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { Dropdown } from '../components/Dropdown';
 import { Card } from '../components/Card';
-import axios from 'axios';
 import Pagination from '../components/Pagination';
 import { useSearchParams } from 'react-router-dom';
 import { IProduct } from '../types/Product';
+import { useGetProductsQuery } from '../redux/api/productApi';
 
 const sortOptions = [
   {
@@ -38,35 +38,33 @@ const CatalogPage: React.FC = () => {
   const perPage = Number(searchParams.get('perPage')) || 8;
   const sortBy = searchParams.get('sortBy') || 'Newest';
 
-  // #region Will be replaced to Redux Store
-  const [total, setTotal] = useState<number>(0);
-  const [products, setProducts] = useState<IProduct[]>([]);
-  // #endregion
+  const {
+    data: products,
+    isLoading,
+    isError,
+  } = useGetProductsQuery({
+    perPage,
+    page: currentPage,
+    sortBy,
+  });
+
+  useEffect(() => {
+  }, [currentPage, perPage, sortBy]);
+
+  if (isLoading) {
+    return <p>Loading...</p>;
+  }
+
+  if (isError) {
+    return <p>Error loading products</p>;
+  }
+
+  const total = products ? products.totalProducts : 0;
 
   const handlePageNumber = (pageNo: number) => {
     searchParams.set('page', pageNo.toString());
   };
 
-  // #region rewrite to RTQ Query
-  useEffect(() => {
-    axios
-      .get('https://dreamteam.onrender.com/products', {
-        params: {
-          perPage,
-          page: currentPage,
-          sortBy,
-        },
-      })
-      .then((res) => {
-        setTotal(res.data.totalProducts);
-        setProducts(res.data.data);
-      })
-      .catch((e) => {
-        throw new Error(e);
-      });
-  }, [currentPage, perPage, sortBy]);
-  // #endregion
-
   return (
     <main className="container mx-auto flex flex-col items-center tablet:items-start px-4 pt-6 tablet:px-6 desktop:w-[1200px]">
       <header>
@@ -93,7 +91,7 @@ const CatalogPage: React.FC = () => {
         </div>
       </header>
       <div className="mb-10 grid grid-cols-1 gap-4 tablet:grid-cols-2 desktop:grid-cols-4">
-        {products.map((product) => (
+        {products.data.map((product: IProduct) => (
           <Card product={product} key={product._id} />
         ))}
       </div>

src/redux/api/productApi.ts

@@ -0,0 +1,21 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+export const productApi = createApi({
+  baseQuery: fetchBaseQuery({
+    baseUrl: 'https://dreamteam.onrender.com',
+  }),
+  endpoints: (builder) => ({
+    getProducts: builder.query({
+      query: ({ page, perPage, sortBy }) => ({
+        url: `/products`,
+        params: {
+          page,
+          perPage,
+          sortBy,
+        },
+      }),
+    }),
+  }),
+});
+
+export const { useGetProductsQuery } = productApi;

src/redux/index.ts

@@ -2,13 +2,15 @@ import { configureStore } from '@reduxjs/toolkit';
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
 import { favouritesSlice } from './slices/favouritesSlice';
 import { cartSlice } from './slices/cartSlice';
+import { productApi } from './api/productApi';
 
 const store = configureStore({
   reducer: {
+    [productApi.reducerPath]: productApi.reducer,
     [favouritesSlice.name]: favouritesSlice.reducer,
     [cartSlice.name]: cartSlice.reducer,
   },
-  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(),
+  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(productApi.middleware),
 });
 
 export { store };