Sprint 4 catalog page lazy loading

e-commerce-app/src/api/myCustomerApi.ts

@@ -7,7 +7,7 @@ import {
 import {
   IChangePasswordMyCustomerRequest,
   IUpdateMyCustomerRequest,
-} from '../store/slices/updateMyCustomerTypes/updateMyCustomerTypes';
+} from '../types/updateMyCustomerTypes/updateMyCustomerTypes';
 
 export const myCustomerApi = createApi({
   reducerPath: 'myCustomerApi',

e-commerce-app/src/components/ProductCard/ProductCard.tsx

@@ -66,61 +66,50 @@ export const ProductCard: FC<ICardProps> = ({ item }) => {
 
   return (
     <Card className={styles.card}>
-      <Box className={styles.card__pointer}
-           width={'100%'}
-           onClick={handlerNavigation}>
-        <CardMedia sx={{ height: 200, width: '100%' }}
-                   image={imgPath}
-                   title={imgDescription}/>
+      <Box className={styles.card__pointer} width={'100%'} onClick={handlerNavigation}>
+        <CardMedia sx={{ height: 200, width: '100%' }} image={imgPath} title={imgDescription} />
       </Box>
-      <CardContent className={`${styles.card__text} ${styles.card__pointer}`}
-                   onClick={handlerNavigation}
-                   sx={{ cursor: 'pointer' }}>
-        <Typography className={styles.card__title}
-                    component="h2">
+      <CardContent
+        className={`${styles.card__text} ${styles.card__pointer}`}
+        onClick={handlerNavigation}
+        sx={{ cursor: 'pointer' }}
+      >
+        <Typography className={styles.card__title} component="h2">
           {item.masterData.current.name.en}
         </Typography>
 
         {tax !== 0 ? (
           <>
-            <Typography className={styles.card__price__marked}
-                        component="h3">
+            <Typography className={styles.card__price__marked} component="h3">
               {salePriceEUR}
             </Typography>
-            <Typography className={styles.card__price__sale}
-                        component="h3">
+            <Typography className={styles.card__price__sale} component="h3">
               {priceEUR}
             </Typography>
           </>
         ) : (
-          <Typography className={styles.card__price}
-                      component="h3">
+          <Typography className={styles.card__price} component="h3">
             {priceEUR}
           </Typography>
         )}
 
         {tax !== 0 ? (
           <>
-            <Typography className={styles.card__price__marked}
-                        component="h3">
+            <Typography className={styles.card__price__marked} component="h3">
               {salePriceUSD}
             </Typography>
-            <Typography className={styles.card__price__sale}
-                        component="h3">
+            <Typography className={styles.card__price__sale} component="h3">
               {priceUSD}
             </Typography>
           </>
         ) : (
-          <Typography className={styles.card__price}
-                      component="h3">
+          <Typography className={styles.card__price} component="h3">
             {priceUSD}
           </Typography>
         )}
       </CardContent>
       <CardActions>
-        <Button color="success"
-                variant="outlined"
-                onClick={handlerAddToCart}>
+        <Button color="success" variant="outlined" onClick={handlerAddToCart}>
           Add to Cart
         </Button>
       </CardActions>

e-commerce-app/src/components/ProductsPagination/ProductsPagination.tsx

@@ -0,0 +1,47 @@
+import { Pagination } from '@mui/material';
+import { JSX, useEffect, useState } from 'react';
+import Box from '@mui/material/Box';
+import { useAppDispatch, useAppSelector } from '../../store/hooks';
+import { getProductsTotal } from '../../store/slices/productsSlice';
+import { getQueryLimit, getQueryOffset, setQueryOffset } from '../../store/slices/queryParamsSlice';
+
+const ProductsPagination = (): JSX.Element => {
+  const totalProductsCount = useAppSelector(getProductsTotal);
+  const queryLimit = useAppSelector(getQueryLimit);
+  const queryOffset = useAppSelector(getQueryOffset);
+  const dispatch = useAppDispatch();
+
+  const [page, setPage] = useState(queryOffset / queryLimit + 1);
+  const [maxPages, setMaxPages] = useState(0);
+
+  useEffect(() => {
+    const totalPagesCount = Math.ceil(totalProductsCount / queryLimit);
+    setMaxPages(totalPagesCount);
+  }, [totalProductsCount]);
+
+  useEffect(() => {
+    const newOffset = (page - 1) * queryLimit;
+    if (newOffset < totalProductsCount) {
+      dispatch(setQueryOffset(newOffset));
+    }
+  }, [page]);
+  const handleChange = (event: React.ChangeEvent<unknown>, value: number) => {
+    setPage(value);
+  };
+
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+      <Pagination
+        count={maxPages}
+        variant="outlined"
+        shape="rounded"
+        showFirstButton
+        showLastButton
+        page={page}
+        onChange={handleChange}
+        color="standard"
+      />
+    </Box>
+  );
+};
+export default ProductsPagination;

e-commerce-app/src/components/UserPersonalAddAddress/UserPersonalAddAddress.tsx

@@ -7,11 +7,11 @@ import countries from '../../data/countries.json';
 import { useValidate } from '../../hooks/useValidate';
 import { validatePostalCode } from '../../validators/validatePostalCode';
 import { validateStrictCity } from '../../validators/validateCity';
-import { IUpdateMyCustomerActionAddAddress } from '../../store/slices/updateMyCustomerTypes/updateMyCustomerActionTypes';
+import { IUpdateMyCustomerActionAddAddress } from '../../types/updateMyCustomerTypes/updateMyCustomerActionTypes';
 import { useAppSelector } from '../../store/hooks';
 import { getAccessToken } from '../../store/slices/userSlice';
 import { useUpdateMyCustomerMutation } from '../../api/myCustomerApi';
-import { IUpdateMyCustomer } from '../../store/slices/updateMyCustomerTypes/updateMyCustomerTypes';
+import { IUpdateMyCustomer } from '../../types/updateMyCustomerTypes/updateMyCustomerTypes';
 import { getMyCustomerVersion } from '../../store/slices/myCustomerSlice';
 
 interface IAddAddressForm {

e-commerce-app/src/pages/ProductsPage/ProductsPage.tsx

@@ -10,6 +10,7 @@ import { SubmitHandler, useForm } from 'react-hook-form';
 import { ISearchProductForm } from '../../types/searchProductsTypes/searchFormTypes';
 import { getQueryText, setQueryText } from '../../store/slices/queryParamsSlice';
 import { useAppSelector } from '../../store/hooks';
+import ProductsPagination from '../../components/ProductsPagination/ProductsPagination';
 
 export const ProductsPage: React.FC = () => {
   const dispatch = useDispatch();
@@ -62,6 +63,7 @@ export const ProductsPage: React.FC = () => {
         <Box className={styles.right}>
           <ProductsList />
         </Box>
+        <ProductsPagination />
       </Grid>
     </Grid>
   );

e-commerce-app/src/pages/UserPage/UserPage.tsx

@@ -44,7 +44,7 @@ import {
 } from '../../store/slices/myCustomerSlice';
 import { useUpdateMyCustomerMutation } from '../../api/myCustomerApi';
 import { getAccessToken } from '../../store/slices/userSlice';
-import { IUpdateMyCustomer } from '../../store/slices/updateMyCustomerTypes/updateMyCustomerTypes';
+import { IUpdateMyCustomer } from '../../types/updateMyCustomerTypes/updateMyCustomerTypes';
 import { IMakeUpdateMyCustomerPersonalQueryObject } from '../../types/utilsTypes/IMakeUpdateMyCustomerPersonalQueryActions';
 import { makeUpdateMyCustomerPersonalQueryActions } from '../../utils/updateMyCustomerUtils/makeUpdateMyCustomerPersonalQueryActions';
 import { capitalizeString } from '../../utils/capitalizeString';

e-commerce-app/src/pages/UserPage/UserPassword.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useEffect, useState } from 'react';
+import React, { ChangeEvent, useState } from 'react';
 import TextField from '@mui/material/TextField';
 import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
@@ -9,10 +9,10 @@ import { validateConfirmPassword } from '../../validators/validateConfirmPasswor
 import {
   IChangePasswordMyCustomer,
   IChangePasswordMyCustomerRequest,
-} from '../../store/slices/updateMyCustomerTypes/updateMyCustomerTypes';
+} from '../../types/updateMyCustomerTypes/updateMyCustomerTypes';
 import { useAppSelector } from '../../store/hooks';
-import { clearMyCustomerData, getMyCustomerVersion } from '../../store/slices/myCustomerSlice';
-import { getAccessToken, getUserEmail, setAuth, setLogOut } from '../../store/slices/userSlice';
+import { getMyCustomerVersion } from '../../store/slices/myCustomerSlice';
+import { getAccessToken, getUserEmail, setAuth } from '../../store/slices/userSlice';
 import { useChangePasswordMyCustomerMutation } from '../../api/myCustomerApi';
 import { useDispatch } from 'react-redux';
 import { useLoginUserMutation } from '../../api/authApi';
@@ -85,7 +85,7 @@ export const UserPassword = () => {
     }
   };
 
-  const submitNewPasswordHandler: SubmitHandler<IResetPasswordForm> = (data) => {
+  const submitNewPasswordHandler: SubmitHandler<IResetPasswordForm> = () => {
     if (
       [
         validateStrictPassword(currentPassword),

e-commerce-app/src/requestsComponents/ProductsQuery/ProductsQuery.tsx

@@ -8,6 +8,8 @@ import { setProducts, startLoadingProducts } from '../../store/slices/productsSl
 import {
   getQueryCategories,
   getQueryCentAmount,
+  getQueryLimit,
+  getQueryOffset,
   getQuerySort,
   getQueryText,
 } from '../../store/slices/queryParamsSlice';
@@ -23,6 +25,9 @@ const ProductsQuery = (): JSX.Element => {
   const searchQueryText = useAppSelector(getQueryText);
   const searchQueryCentAmount = useAppSelector(getQueryCentAmount);
   const searchQueryCategories = useAppSelector(getQueryCategories);
+  const searchQueryLimit = useAppSelector(getQueryLimit);
+  const searchQueryOffset = useAppSelector(getQueryOffset);
+
 
   const [params, setParams] = useState<IBaseQueryParams>({});
 
@@ -84,13 +89,48 @@ const ProductsQuery = (): JSX.Element => {
         delete newState.filter;
         return newState;
       });
+      return;
     }
     setParams((prevState) => ({
       ...prevState,
       filter: filterArr,
     }));
   }, [searchQueryCentAmount, searchQueryCategories]);
 
+  useEffect(() => {
+    if (searchQueryLimit) {
+      setParams((prevState) => ({
+        ...prevState,
+        limit: searchQueryLimit,
+      }));
+      return;
+    }
+    setParams((prevState) => {
+      const newState = {
+        ...prevState,
+      };
+      delete newState.limit;
+      return newState;
+    });
+  }, [searchQueryLimit]);
+
+  useEffect(() => {
+    if (searchQueryOffset) {
+      setParams((prevState) => ({
+        ...prevState,
+        offset: searchQueryOffset,
+      }));
+      return;
+    }
+    setParams((prevState) => {
+      const newState = {
+        ...prevState,
+      };
+      delete newState.offset;
+      return newState;
+    });
+  }, [searchQueryOffset]);
+
   const [
     getAllProducts,
     {

e-commerce-app/src/store/slices/productsSlice.ts

@@ -39,6 +39,9 @@ export const productsSlice = createSlice({
 });
 
 export const getProducts = (state: RootStateType) => state.products.products;
+export const getProductsTotal = (state: RootStateType) => state.products.total;
+export const getProductsLimit = (state: RootStateType) => state.products.limit;
+export const getProductsOffset = (state: RootStateType) => state.products.offset;
 export const isFetchingProducts = (state: RootStateType) => state.products.fetching;
 export const ProductsReducer = productsSlice.reducer;
 export const { startLoadingProducts, setProducts, resetProducts } = productsSlice.actions;

e-commerce-app/src/store/slices/queryParamsSlice.ts

@@ -4,7 +4,7 @@ import { RootStateType } from '../store';
 import { SortFormType } from '../../types/searchProductsTypes/filterFormTypes';
 
 const initialState: IQueryParamsFromSlice = {
-  limit: 500,
+  limit: 12,
   offset: 0,
   sort: '',
   text: '',
@@ -21,20 +21,25 @@ export const queryParamsSlice = createSlice({
     },
     setQuerySort: (state, action: PayloadAction<SortFormType>) => {
       state.sort = action.payload;
+      state.offset = 0;
     },
     setQueryText: (state, action: PayloadAction<string>) => {
       state.text = action.payload;
+      state.offset = 0;
     },
     setEmptySort: (state) => {
       state.sort = '';
       state.categories = '';
       state.centAmount = [0, 100];
+      state.offset = 0;
     },
     setQueryCentAmount: (state, action: PayloadAction<number[]>) => {
       state.centAmount = [...action.payload];
+      state.offset = 0;
     },
     setQueryCategories: (state, action: PayloadAction<string>) => {
       state.categories = action.payload;
+      state.offset = 0;
     },
   },
 });

e-commerce-app/src/store/slices/updateMyCustomerTypes/updateMyCustomerActionTypes.ts → e-commerce-app/src/types/updateMyCustomerTypes/updateMyCustomerActionTypes.ts

@@ -1,6 +1,6 @@
 // IUpdateMyCustomerAction
 
-import { IMyCustomerApiAddressRequest } from '../../../types/addressesTypes';
+import { IMyCustomerApiAddressRequest } from '../addressesTypes';
 
 export interface IUpdateMyCustomerActionChangeEmail {
   action: 'changeEmail';

e-commerce-app/src/types/utilsTypes/IMakeUpdateMyCustomerPersonalQueryActions.ts

@@ -1,4 +1,4 @@
-import { UpdateMyCustomerActionsType } from '../../store/slices/updateMyCustomerTypes/updateMyCustomerActionTypes';
+import { UpdateMyCustomerActionsType } from '../updateMyCustomerTypes/updateMyCustomerActionTypes';
 
 export interface IMakeUpdateMyCustomerPersonalQueryObject {
   firstName: string;

e-commerce-app/src/utils/updateMyCustomerUtils/makeUpdateMyCustomerPersonalQueryActions.ts

@@ -5,7 +5,7 @@ import {
   IUpdateMyCustomerActionSetFirstName,
   IUpdateMyCustomerActionSetLastName,
   UpdateMyCustomerActionsType,
-} from '../../store/slices/updateMyCustomerTypes/updateMyCustomerActionTypes';
+} from '../../types/updateMyCustomerTypes/updateMyCustomerActionTypes';
 
 export const makeUpdateMyCustomerPersonalQueryActions: MakeUpdateMyCustomerPersonalQueryActionsType =
   (initial, current) => {