Sprint#4

e-commerce-app/package.json

@@ -11,19 +11,22 @@
     "@mui/material": "^5.14.4",
     "@reduxjs/toolkit": "^1.9.5",
     "classnames": "^2.3.2",
+    "history": "^5.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.11",
     "react-hook-form": "^7.45.4",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",
+    "react-toastify": "^9.1.3",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --coverage",
+    "test": "react-scripts test --coverage --watchAll",
     "eject": "react-scripts eject",
     "lint": "eslint src/**/*.{js,jsx,ts,tsx}",
     "lint:fix": "eslint --fix src/**/*.{js,jsx,ts,tsx}",
@@ -37,6 +40,12 @@
       "react-app/jest"
     ]
   },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!src/**/*.test.{js,jsx,ts,tsx}"
+    ]
+  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -50,7 +59,6 @@
     ]
   },
   "devDependencies": {
-    "sass": "^1.66.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -59,10 +67,13 @@
     "@types/react": "^18.2.18",
     "@types/react-dom": "^18.2.7",
     "@types/react-router-dom": "^5.3.3",
+    "@types/redux-mock-store": "^1.0.3",
     "eslint": "^8.46.0",
     "eslint-config-prettier": "^8.9.0",
     "eslint-plugin-prettier": "^5.0.0",
     "husky": "^8.0.3",
-    "prettier": "^3.0.0"
+    "prettier": "^3.0.0",
+    "redux-mock-store": "^1.5.4",
+    "sass": "^1.66.1"
   }
 }

e-commerce-app/src/App.tsx

@@ -10,7 +10,14 @@ import LoadingProgress from './components/LoadingProgress/LoadingProgress';
 
 export const App = () => {
   const [getAnonymousToken] = useGetAnonymousTokenMutation();
-  const { isTokenInStorage, getTokenFromStorage, delTokenFromStorage } = useLocalToken();
+  const {
+    isTokenInStorage,
+    getTokenFromStorage,
+    delTokenFromStorage,
+    setTokenInSessionStorage,
+    getTokenFromSessionStorage,
+    isTokenInLocalStorage,
+  } = useLocalToken();
   const [getAccessTokenApi, { data, isSuccess, isError, isLoading }] =
     useGetAccessTokenFromRefreshMutation();
   const [getDetails] = useGetMyCustomerDetailsMutation();
@@ -23,9 +30,9 @@ export const App = () => {
       getDetails(data.access_token).then((res) => {
         if ('data' in res) {
           dispatch(setAuth({ email: res.data.email }));
+          dispatch(setLogIn());
         }
       });
-      dispatch(setLogIn());
     }
   }, [isSuccess, data]);
 
@@ -37,21 +44,34 @@ export const App = () => {
   }, [isError]);
 
   useEffect(() => {
-    if (accessToken) return;
+    if (accessToken) {
+      return;
+    }
+
+    if (isTokenInLocalStorage()) {
+      const token = getTokenFromSessionStorage();
+      if (token) {
+        getAccessTokenApi(token);
+      }
+      return;
+    }
+
     if (isTokenInStorage()) {
       const token = getTokenFromStorage();
       if (token) {
         getAccessTokenApi(token);
       }
-    } else {
-      getAnonymousToken().then((res) => {
-        if ('data' in res) {
-          dispatch(
-            setAuth({ access_token: res.data.access_token, refresh_token: res.data.refresh_token }),
-          );
-        }
-      });
+      return;
     }
+
+    getAnonymousToken().then((res) => {
+      if ('data' in res) {
+        dispatch(
+          setAuth({ access_token: res.data.access_token, refresh_token: res.data.refresh_token }),
+        );
+        setTokenInSessionStorage(res.data.refresh_token);
+      }
+    });
   }, [accessToken]);
 
   if (isLoading) {

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

@@ -0,0 +1,92 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+import { ICartApiResponse } from '../types/slicesTypes/cart';
+import { IUpdateCartApiObjectRequest } from '../types/slicesTypes/cart/updateCartApiTypes';
+import { RootStateType } from '../store/store';
+
+export const cartApi = createApi({
+  reducerPath: 'cartApi',
+  baseQuery: fetchBaseQuery({
+    baseUrl: `${process.env.REACT_APP_CTP_API_URL}/${process.env.REACT_APP_CTP_PROJECT_KEY}`,
+  }),
+  tagTypes: ['activeCart'],
+  endpoints: (build) => ({
+    getMyActiveCart: build.query<ICartApiResponse, string>({
+      query(token: string) {
+        return {
+          url: '/me/active-cart',
+          method: 'GET',
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        };
+      },
+      providesTags: ['activeCart'],
+      async onQueryStarted(token, { queryFulfilled, dispatch }) {
+        try {
+          queryFulfilled.catch(() => dispatch(cartApi.endpoints.createCart.initiate(token)));
+        } catch (e) {
+          dispatch(cartApi.endpoints.createCart.initiate(token));
+        }
+      },
+    }),
+    createCart: build.mutation<ICartApiResponse, string>({
+      query(token: string) {
+        return {
+          url: '/me/carts',
+          method: 'POST',
+          headers: {
+            Authorization: `Bearer ${token}`,
+            'Content-Type': 'application/json',
+          },
+          body: {
+            currency: 'EUR',
+          },
+        };
+      },
+      invalidatesTags: ['activeCart'],
+    }),
+    updateCart: build.mutation({
+      query(queryObj: IUpdateCartApiObjectRequest) {
+        return {
+          url: `/me/carts/${queryObj.cartId}`,
+          method: 'POST',
+          headers: {
+            Authorization: `Bearer ${queryObj.token}`,
+            'Content-Type': 'application/json',
+          },
+          body: queryObj.data,
+        };
+      },
+      invalidatesTags: ['activeCart'],
+    }),
+    deleteCart: build.mutation({
+      query(queryObj: { cartId: string; token: string }) {
+        return {
+          url: `/me/carts/${queryObj.cartId}`,
+          method: 'DELETE',
+          headers: {
+            Authorization: `Bearer ${queryObj.token}`,
+          },
+        };
+      },
+    }),
+  }),
+});
+
+export const { useLazyGetMyActiveCartQuery, useCreateCartMutation, useUpdateCartMutation } =
+  cartApi;
+
+export const selectCart = (state: RootStateType) =>
+  cartApi.endpoints.getMyActiveCart.select(state.user.access_token as string)(state).data;
+export const findProductInCart = (state: RootStateType, productId: string) =>
+  cartApi.endpoints.getMyActiveCart
+    .select(state.user.access_token as string)(state)
+    .data?.lineItems.find((item) => item.productId === productId);
+
+export const getTotalQuantityLineItemsInCart = (state: RootStateType) =>
+  cartApi.endpoints.getMyActiveCart.select(state.user.access_token as string)(state).data
+    ?.totalLineItemQuantity;
+
+export const getLineItemsInCart = (state: RootStateType) =>
+  cartApi.endpoints.getMyActiveCart.select(state.user.access_token as string)(state).data
+    ?.lineItems;

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

@@ -0,0 +1,25 @@
+import { createApi } from '@reduxjs/toolkit/query/react';
+import { fetchBaseQuery } from '@reduxjs/toolkit/dist/query/react';
+import { IGetDiscountCodesResponse } from '../types/slicesTypes/DiscountCodesTypes/DiscountCodesApiTypes';
+
+export const discountCodesApi = createApi({
+  reducerPath: 'discountCodesApi',
+  baseQuery: fetchBaseQuery({
+    baseUrl: `${process.env.REACT_APP_CTP_API_URL}/${process.env.REACT_APP_CTP_PROJECT_KEY}/discount-codes`,
+  }),
+  endpoints: (build) => ({
+    getDiscountCodes: build.query<IGetDiscountCodesResponse, string>({
+      query(token) {
+        return {
+          url: '',
+          method: 'GET',
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        };
+      },
+    }),
+  }),
+});
+
+export const { useGetDiscountCodesQuery, useLazyGetDiscountCodesQuery } = discountCodesApi;