Merge pull request #188 from rolling-scopes-school/cart-api

Add cart api integration

Author: SergeyKovalchuk

src/components/MainLayout/components/Cart.tsx

@@ -1,20 +1,35 @@
 import Badge from "@material-ui/core/Badge";
 import CartIcon from "@material-ui/icons/ShoppingCart";
 import IconButton from "@material-ui/core/IconButton";
-import React from "react";
-import { useSelector } from "react-redux";
-import { selectCartItems } from "store/cartSlice";
+import React, { useEffect } from "react";
+import axios from 'axios';
+import { useDispatch, useSelector } from "react-redux";
+import { selectCartItems, updateFromApi } from "store/cartSlice";
 import { Link } from 'react-router-dom';
+import API_PATHS from "../../../constants/apiPaths";
 
 export default function Cart() {
+  const dispatch = useDispatch();
+  useEffect(() => {
+    axios.get(
+        `${API_PATHS.cart}/profile/cart`,
+        {
+          headers: {
+            Authorization: `Basic ${localStorage.getItem('authorization_token')}`
+          }
+        }
+    ).then(({ data: { data: { cart } } }) => {
+      dispatch(updateFromApi(cart))
+    });
+  }, []);
   const cartItems = useSelector(selectCartItems);
   const badgeContent = cartItems.length || undefined;
 
   return (
-    <IconButton 
-      aria-label="show 4 new mails" 
-      color="inherit" 
-      component={Link} 
+    <IconButton
+      aria-label="show 4 new mails"
+      color="inherit"
+      component={Link}
       to="/cart"
     >
       <Badge badgeContent={badgeContent} color="secondary">

src/constants/apiPaths.ts

@@ -3,7 +3,8 @@ const API_PATHS = {
   product: 'https://.execute-api.eu-west-1.amazonaws.com/dev',
   order: 'https://.execute-api.eu-west-1.amazonaws.com/dev',
   import: 'https://.execute-api.eu-west-1.amazonaws.com/dev',
-  bff: 'https://.execute-api.eu-west-1.amazonaws.com/dev'
+  bff: 'https://.execute-api.eu-west-1.amazonaws.com/dev',
+  cart: 'https://.execute-api.eu-west-1.amazonaws.com/dev',
 };
 
 export default API_PATHS;

src/store/cartSlice.ts

@@ -2,6 +2,8 @@ import {createSlice, PayloadAction} from '@reduxjs/toolkit';
 import {RootState} from 'store/store';
 import {Product} from "models/Product";
 import {CartItem} from "models/CartItem";
+import API_PATHS from "../constants/apiPaths";
+import axios from 'axios';
 
 interface CartState {
   items: CartItem[]
@@ -15,6 +17,13 @@ export const cartSlice = createSlice({
   name: 'cart',
   initialState,
   reducers: {
+    updateFromApi: (state, { payload: { items } }: PayloadAction<CartState>) => {
+      return {
+        items: [
+            ...items,
+        ],
+      }
+    },
     // Use the PayloadAction type to declare the contents of `action.payload`
     addToCart: (state, action: PayloadAction<Product>) => {
       const {items} = state;
@@ -44,7 +53,37 @@ export const cartSlice = createSlice({
   },
 });
 
-export const {addToCart, removeFromCart, clearCart} = cartSlice.actions;
+export const addToCart = (product: Product) => async (dispatch: any, getState: any) => {
+  dispatch(cartSlice.actions.addToCart(product));
+  const { cart: { items } } = getState();
+  await axios.put(`${API_PATHS.cart}/profile/cart`, { items }, {
+    headers: {
+      Authorization: `Basic ${localStorage.getItem('authorization_token')}`,
+    },
+  })
+};
+
+export const removeFromCart = (product: Product) => async (dispatch: any, getState: any) => {
+  dispatch(cartSlice.actions.removeFromCart(product));
+  const { cart: { items } } = getState();
+  await axios.put(`${API_PATHS.cart}/profile/cart`, { items }, {
+    headers: {
+      Authorization: `Basic ${localStorage.getItem('authorization_token')}`,
+    },
+  })
+};
+
+export const clearCart = () => async (dispatch: any, getState: any) => {
+  dispatch(cartSlice.actions.clearCart());
+  const { cart: { items } } = getState();
+  await axios.put(`${API_PATHS.cart}/profile/cart`, { items }, {
+    headers: {
+      Authorization: `Basic ${localStorage.getItem('authorization_token')}`,
+    },
+  })
+};
+
+export const {updateFromApi} = cartSlice.actions;
 
 
 // The function below is called a selector and allows us to select a value from