refactor jamtracks loading

reduce the nertwork calls it had when loading jamtracks on
jamtacks listing which increases the loading time.

jam-ui/src/components/jamtracks/JKJamTrackPurchaseButton.js

@@ -1,58 +1,15 @@
 import React from 'react';
 import { Button } from 'reactstrap';
 import PropTypes from 'prop-types';
-//import { useHistory } from 'react-router-dom';
 import { useAuth } from '../../context/UserAuth';
-//import { toast } from 'react-toastify';
-//import { useShoppingCart } from '../../hooks/useShoppingCart';
 import useJamTrackShopping from '../../hooks/useJamTrackShopping';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import JKTooltip from '../common/JKTooltip';
-//import { placeOrder, updateUser } from '../../helpers/rest';
 
 const JKJamTrackPurchaseButton = ({ jamTrack }) => {
-  //const history = useHistory();
   const { currentUser } = useAuth();
-  //const { addCartItem, getCartItems, hasOnlyFreeItemsInShoppingCart } = useShoppingCart();
   const { t } = useTranslation('jamtracks');
-
-  // const addToCart = async () => {
-  //   if (!currentUser) {
-  //     return;
-  //   }
-  //   const options = {
-  //     id: jamTrack.id,
-  //     variant: 'full'
-  //   };
-
-  //   try {
-  //     const resp = await addCartItem(options);
-  //     if(resp.fast_reedem){ //if this is a free jamtrack
-  //       //get shopping cart items and see if all are free
-  //       if(!hasOnlyFreeItemsInShoppingCart()){
-  //         history.push('/jamtracks');
-  //       }else{
-  //         const purchadeResp = await placeOrder();
-  //         if(purchadeResp.ok){
-  //           const userResp = await updateUser(currentUser.id);
-  //           if(userResp.ok){
-  //             history.push('/checkout/success?free=yes&jamtrackId=' + jamTrack.id);
-  //           }
-  //         }
-  //       }
-
-  //     }else{ //if this is a paid jamtrack
-  //       toast.success(t('search.list.add_success_alert'));
-  //       history.push('/shopping-cart');
-  //     }
-  //   } catch (error) {
-  //     console.log(error);
-  //     toast.error(t('search.list.add_error_alert'));
-
-  //   }
-
-  // };
   const { addToCart } = useJamTrackShopping();
 
   const handleAddToCart = () => {

jam-ui/src/components/jamtracks/JKJamTracksFilter.js

@@ -11,6 +11,7 @@ import JKJamTracksSlider from './JKJamTracksSlider';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useShoppingCart } from '../../hooks/useShoppingCart';
 import { useResponsive } from '@farfetch/react-context-responsive';
+//import { useAppData } from '../../context/AppDataContext';
 
 const JKJamTracksFilter = () => {
   const { t } = useTranslation('jamtracks');
@@ -23,12 +24,17 @@ const JKJamTracksFilter = () => {
   const [autoCompleteInputValue, setAutoCompleteInputValue] = useState('');
   const page = useRef(1);
   const PER_PAGE = 10;
-  const { shoppingCart } = useShoppingCart();
+  const { getCartItems, shoppingCart } = useShoppingCart();
+  // const { shoppingCart } = useAppData();
   const { greaterThan } = useResponsive();
   const queryString = useBrowserQuery();
   const query = queryString.get('query');
   const artist = queryString.get('artist');
 
+  useEffect(() => {
+    getCartItems()
+  }, [])
+
   useEffect(() => {
     if (selected) {
       setSearchTerm(selected.type === 'artist' ? selected.original_artist : selected.name);
@@ -198,7 +204,7 @@ const JKJamTrackFilterLinks = ({ shoppingCart, wrapperClassNames, shoppingCartCl
           <strong>PDF file</strong>
         </a>
       </div>
-      {shoppingCart.length > 0 && (
+      {shoppingCart && shoppingCart.length > 0 && (
         <div className={shoppingCartClassNames}>
           <Link to="shopping-cart" className="btn btn-primary btn-sm">
             <FontAwesomeIcon icon="shopping-cart" className="mr-1" />

jam-ui/src/components/jamtracks/JKJamTracksList.js

@@ -1,8 +1,5 @@
 import React from 'react';
 import { Row, Col, Table, Button } from 'reactstrap';
-import JKJamTrackPreview from './JKJamTrackPreview';
-import JKJamTrackPurchaseButton from './JKJamTrackPurchaseButton';
-import { JamTrackPreviewProvider } from '../../context/JamTrackPreviewContext';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import JKJamTrackItem from './JKJamTrackItem';

jam-ui/src/components/shopping-cart/JKCheckout.js

@@ -32,7 +32,7 @@ import { useCheckout } from '../../hooks/useCheckout';
 
 const JKCheckout = () => {
   const { currency } = useContext(AppContext);
-  const { cartTotal: payableTotal, loading: cartLoading } = useShoppingCart();
+  const { cartTotal: payableTotal, loading: cartLoading, getCartItems, shoppingCart } = useShoppingCart();
   const { greaterThan } = useResponsive();
   const { currentUser } = useAuth();
   const history = useHistory();
@@ -78,6 +78,10 @@ const JKCheckout = () => {
     }
   });
 
+  useEffect(() => {
+      getCartItems()
+    }, [])
+
   useEffect(() => {
     if (shouldPreserveBillingInfo) {
       refreshPreserveBillingInfo();
@@ -313,7 +317,7 @@ const JKCheckout = () => {
         </div>
       )}
       <ContentWithAsideLayout
-        aside={cartLoading ? <div>Cart Loading...</div> : <CheckoutAside />}
+        aside={cartLoading ? <div>Cart Loading...</div> : <CheckoutAside shoppingCart={shoppingCart} />}
         isStickyAside={false}
       >
 

jam-ui/src/components/shopping-cart/JKShoppingCart.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import FalconCardHeader from '../common/FalconCardHeader';
 import { Button, Card, CardBody } from 'reactstrap';
 import { Link } from 'react-router-dom';
@@ -13,7 +13,11 @@ import { useResponsive } from '@farfetch/react-context-responsive';
 
 const JKShoppingCart = () => {
   const { greaterThan } = useResponsive();
-  const { shoppingCart, loading, removeCartItem } = useShoppingCart();
+  const { shoppingCart, loading, removeCartItem, getCartItems } = useShoppingCart();
+
+  useEffect(() => {
+    getCartItems();
+  }, []);
 
   const handleRemoveItem = async id => {
     if (await removeCartItem(id)) {

jam-ui/src/components/shopping-cart/checkout/CheckoutAside.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useContext } from 'react';
+import React, { Fragment, useContext, useEffect } from 'react';
 //import PropTypes from 'prop-types';
 import AppContext from '../../../context/Context';
 import { Alert, Card, CardBody, CardFooter, Media, Table } from 'reactstrap';
@@ -8,9 +8,12 @@ import Flex from '../../common/Flex';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useShoppingCart } from '../../../hooks/useShoppingCart';
 
-const CheckoutAside = () => {
+const CheckoutAside = ({ shoppingCart}) => {
   const { currency } = useContext(AppContext);
-  const { shoppingCart, cartTotal } = useShoppingCart();
+  const { cartTotal } = useShoppingCart();
+  // useEffect(() => {
+  //   getCartItems()
+  // }, [])
   return (
     <Card>
       <FalconCardHeader title="Order Summary" titleTag="h5" light={false}>

jam-ui/src/context/AppDataContext.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import useUserProfile from '../hooks/useUserProfile';
 import { useAuth } from './UserAuth';
+//import { useShoppingCart } from '../hooks/useShoppingCart';
 
 // AppDataContext.js
 // this context is used to store app data that is shared across the app
@@ -10,9 +11,17 @@ export const AppDataProvider = ({ children }) => {
   const [appData, setAppData] = React.useState({});
   const { currentUser } = useAuth();
   const { userProfile, photoUrl } = useUserProfile({ user: currentUser, useCache: false });
+  //const { shoppingCart, getCartItems } = useShoppingCart();
+
+  // React.useEffect(() => {
+  //   getCartItems();
+  // }, [currentUser]);
 
   React.useEffect(() => {
-    setAppData({ userProfile, currentUserPhotoUrl: photoUrl });
+    setAppData({
+      userProfile, currentUserPhotoUrl:
+      photoUrl,
+    });
   }, [currentUser, userProfile, photoUrl]);
 
   return <AppDataContext.Provider value={{ appData, setAppData }}>{children}</AppDataContext.Provider>;

jam-ui/src/hooks/useShoppingCart.js

@@ -7,9 +7,9 @@ export const useShoppingCart = () => {
   const [error, setError] = useState(null);
   const TAX_RATE = 0.1;
 
-  useEffect(() => {
-    getCartItems();
-  }, []);
+  // useEffect(() => {
+  //   getCartItems();
+  // }, []);
 
   const cartTotal = useMemo(() => {
     //calculate total price
@@ -63,6 +63,6 @@ export const useShoppingCart = () => {
   }, [shoppingCart]);
 
   return{
-    shoppingCart, error, loading, removeCartItem, addCartItem, cartTotal, hasOnlyFreeItemsInShoppingCart
+    shoppingCart, error, loading, getCartItems, removeCartItem, addCartItem, cartTotal, hasOnlyFreeItemsInShoppingCart
   }
 }