Sprint#3

e-commerce-app/src/App.css

@@ -1,5 +1,5 @@
-.App {
-  text-align: center;
+.app {
+  min-height: max-content;
 }
 
 .App-logo {

e-commerce-app/src/App.tsx

@@ -6,11 +6,13 @@ import { useLocalToken } from './hooks/useLocalToken';
 import { useAppDispatch, useAppSelector } from './store/hooks';
 import { getAccessToken, setAuth, setLogIn, setLogOut } from './store/slices/userSlice';
 import { useGetMyCustomerDetailsMutation } from './api/myCustomerApi';
+import LoadingProgress from './components/LoadingProgress/LoadingProgress';
 
 export const App = () => {
   const [getAnonymousToken] = useGetAnonymousTokenMutation();
   const { isTokenInStorage, getTokenFromStorage, delTokenFromStorage } = useLocalToken();
-  const [getAccessTokenApi, { data, isSuccess, isError }] = useGetAccessTokenFromRefreshMutation();
+  const [getAccessTokenApi, { data, isSuccess, isError, isLoading }] =
+    useGetAccessTokenFromRefreshMutation();
   const [getDetails] = useGetMyCustomerDetailsMutation();
   const dispatch = useAppDispatch();
   const accessToken = useAppSelector(getAccessToken);
@@ -52,6 +54,10 @@ export const App = () => {
     }
   }, [accessToken]);
 
+  if (isLoading) {
+    return <LoadingProgress />;
+  }
+
   return (
     <>
       <AppRoutes />

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

@@ -0,0 +1,27 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import { IGetAllCategoriesResponse } from '../types/slicesTypes/categoriesApiTypes';
+
+export const categoriesApi = createApi({
+  reducerPath: 'categoriesApi',
+  baseQuery: fetchBaseQuery({
+    baseUrl: `${process.env.REACT_APP_CTP_API_URL}/${process.env.REACT_APP_CTP_PROJECT_KEY}/categories`,
+  }),
+  tagTypes: ['categories'],
+  endpoints: (build) => ({
+    getAllCategories: build.query<IGetAllCategoriesResponse, string>({
+      query(token: string) {
+        return {
+          url: '',
+          method: 'GET',
+          headers: {
+            Authorization: `Bearer ${token}`,
+            'Content-Type': 'application/json',
+          },
+        };
+      },
+      providesTags: ['categories'],
+    }),
+  }),
+});
+
+export const { useGetAllCategoriesQuery } = categoriesApi;

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

@@ -0,0 +1,29 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import { IGetAllProductsRequest } from '../types/slicesTypes/productsApiTypes';
+import { ISearchProductsResponse } from '../types/slicesTypes/productProjectionsApiTypes';
+
+export const productProjectionApi = createApi({
+  reducerPath: 'productProjectionApi',
+  baseQuery: fetchBaseQuery({
+    baseUrl: `${process.env.REACT_APP_CTP_API_URL}/${process.env.REACT_APP_CTP_PROJECT_KEY}/product-projections`,
+  }),
+  endpoints: (build) => ({
+    searchProducts: build.mutation<ISearchProductsResponse, IGetAllProductsRequest>({
+      query(queryObject) {
+        let path = '';
+        if (queryObject.params && queryObject.params.resultPath) {
+          path = queryObject.params.resultPath;
+        }
+        return {
+          url: '/search' + path,
+          method: 'GET',
+          headers: {
+            Authorization: `Bearer ${queryObject.token}`,
+          },
+        };
+      },
+    }),
+  }),
+});
+// ,'variants.price.centAmount:range+(1200+to+*)'].join('&filter=')
+export const { useSearchProductsMutation } = productProjectionApi;

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

@@ -0,0 +1,45 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import {
+  IGetAllProductsRequest,
+  IGetAllProductsResponse,
+  IGetProductByIdRequest,
+  IProductApiResponse,
+} from '../types/slicesTypes/productsApiTypes';
+
+export const productsApi = createApi({
+  reducerPath: 'productsApi',
+  baseQuery: fetchBaseQuery({
+    baseUrl: `${process.env.REACT_APP_CTP_API_URL}/${process.env.REACT_APP_CTP_PROJECT_KEY}/products`,
+  }),
+  endpoints: (build) => ({
+    getAllProducts: build.mutation<IGetAllProductsResponse, IGetAllProductsRequest>({
+      query(queryObject) {
+        return {
+          url: '',
+          method: 'GET',
+          params: {
+            ...queryObject.params,
+          },
+          headers: {
+            Authorization: `Bearer ${queryObject.token}`,
+            'Content-Type': 'application/json',
+          },
+        };
+      },
+    }),
+    getProductById: build.query<IProductApiResponse, IGetProductByIdRequest>({
+      query(queryObject) {
+        return {
+          url: `/${queryObject.productId}`,
+          method: 'GET',
+          headers: {
+            Authorization: `Bearer ${queryObject.token}`,
+            'Content-Type': 'application/json',
+          },
+        };
+      },
+    }),
+  }),
+});
+
+export const { useGetAllProductsMutation, useGetProductByIdQuery } = productsApi;

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

@@ -0,0 +1,24 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import { IGetAllTaxesResponse } from '../types/slicesTypes/taxApiTypes';
+
+export const taxApi = createApi({
+  reducerPath: 'taxApi',
+  baseQuery: fetchBaseQuery({
+    baseUrl: `${process.env.REACT_APP_CTP_API_URL}/${process.env.REACT_APP_CTP_PROJECT_KEY}/tax-categories`,
+  }),
+  endpoints: (build) => ({
+    getAllTaxes: build.query<IGetAllTaxesResponse, string>({
+      query(token: string) {
+        return {
+          url: '',
+          method: 'GET',
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        };
+      },
+    }),
+  }),
+});
+
+export const { useGetAllTaxesQuery } = taxApi;

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

@@ -0,0 +1,61 @@
+import { FC } from 'react';
+import { Typography, Box, Paper, IconButton } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import type { Board } from '../../pages/UserPage/UserAddresses';
+import { IMyCustomerApiAddressRequest } from '../../types/addressesTypes';
+
+interface addressItemProps {
+  todo: Board;
+  onDeleteAddr: (id: Board['id']) => void;
+  onCheckAddr: (id: Board['id']) => void;
+  onEdit: (id: Board['id']) => void;
+  address: IMyCustomerApiAddressRequest | undefined;
+}
+
+export const AddressItem: FC<addressItemProps> = ({
+  todo,
+  onDeleteAddr,
+  onCheckAddr,
+  onEdit,
+  address,
+}) => (
+  <Paper
+    elevation={1}
+    sx={{
+      marginBottom: '5px',
+      width: '100%',
+      padding: '5px 10px',
+      borderRadius: 1,
+      gap: 1,
+      opacity: todo.checked ? 0.5 : 1,
+    }}
+  >
+    <Box textAlign="left">
+      <Typography
+        onClick={() => onCheckAddr(todo.id)}
+        sx={{ cursor: 'pointer', textDecorationLine: todo.checked ? 'line-through' : 'none' }}
+        variant="h6"
+        component="h6"
+        gutterBottom
+      >
+        {todo.name}
+      </Typography>
+    </Box>
+    <Box display="flex" textAlign="left">
+      {address && (
+        <Typography variant="subtitle1" component="div" gutterBottom>
+          {address.streetName}, {address.city}, {address.country}, {address.postalCode}
+        </Typography>
+      )}
+    </Box>
+    <Box display="flex" justifyContent="flex-end">
+      <IconButton onClick={() => onEdit(todo.id)} color="primary" aria-label="edit">
+        <EditIcon />
+      </IconButton>
+      <IconButton onClick={() => onDeleteAddr(todo.id)} color="error" aria-label="delete">
+        <DeleteIcon />
+      </IconButton>
+    </Box>
+  </Paper>
+);

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

@@ -0,0 +1,43 @@
+import { FC } from 'react';
+import { Box } from '@mui/material';
+import { AddressItem } from '../AddressItem/AddressItem';
+import type { Board } from '../../pages/UserPage/UserAddresses';
+import { AddressPanel } from '../Panel/Panel';
+import { IMyCustomerApiAddressRequest } from '../../types/addressesTypes';
+
+interface TodoListProps {
+  editTodoId: Board['id'] | null;
+  todoList: Board[];
+  onDeleteAddr: (id: Board['id']) => void;
+  onCheckAddr: (id: Board['id']) => void;
+  onEdit: (id: Board['id']) => void;
+  onChangeAddr: ({ name, street, city, country, postcode }: Omit<Board, 'id' | 'checked'>) => void;
+  address: IMyCustomerApiAddressRequest | undefined;
+}
+
+export const BoardList: FC<TodoListProps> = ({
+  todoList,
+  editTodoId,
+  onChangeAddr,
+  onDeleteAddr,
+  onCheckAddr,
+  onEdit,
+  address,
+}) => (
+  <Box>
+    {todoList.map((todo) => {
+      if (todo.id === editTodoId)
+        return <AddressPanel mode="edit" onChangeAddr={onChangeAddr} editTodo={todo} />;
+      return (
+        <AddressItem
+          key={todo.id}
+          todo={todo}
+          onDeleteAddr={onDeleteAddr}
+          onCheckAddr={onCheckAddr}
+          onEdit={onEdit}
+          address={address}
+        />
+      );
+    })}
+  </Box>
+);

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

@@ -83,11 +83,11 @@ export const Header: React.FC = () => {
               <MenuLinks navigation={navigationRoutes} handler={handleCloseNavMenu} />
             </Menu>
           </Box>
-          <Link to={'/'}>
+          <Link to={'/'} style={{ textDecoration: 'none' }}>
             <Typography
               variant="h5"
               noWrap
-              component="a"
+              component="span"
               sx={{
                 mr: 2,
                 display: { xs: 'flex', md: 'none' },

e-commerce-app/src/components/LoadingProgress/LoadingProgress.module.scss

@@ -0,0 +1,8 @@
+.box {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  overflow: hidden;
+}

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

@@ -0,0 +1,16 @@
+import React, { JSX } from 'react';
+import { Box, CircularProgress, Typography } from '@mui/material';
+
+import styles from './LoadingProgress.module.scss';
+
+const LoadingProgress = (): JSX.Element => {
+  return (
+    <Box display="flex" justifyContent="center" alignItems="center" className={styles.box}>
+      <CircularProgress size={200} thickness={10} />
+      <Typography position="absolute" variant="h4">
+        Loading...
+      </Typography>
+    </Box>
+  );
+};
+export default LoadingProgress;

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

@@ -16,7 +16,7 @@ const MenuLinks: FC<IMenuLinksProps> = ({ navigation, handler }): JSX.Element =>
     <>
       {Object.entries(navigation).map(([title, path]) => (
         <MenuItem key={title} onClick={handler}>
-          <Button onClick={() => navigate(path)} sx={{ color: 'green' }}>
+          <Button fullWidth onClick={() => navigate(path)} sx={{ color: 'green' }}>
             {title}
           </Button>
         </MenuItem>