From 342960e57bb0ef3e82df603c26608a0b56440f07 Mon Sep 17 00:00:00 2001 From: Nuwan Date: Wed, 12 Feb 2025 06:14:12 +0530 Subject: [PATCH] refactor jamtracks loading reduce the nertwork calls it had when loading jamtracks on jamtacks listing which increases the loading time. --- .../jamtracks/JKJamTrackPurchaseButton.js | 43 ------------------- .../components/jamtracks/JKJamTracksFilter.js | 10 ++++- .../components/jamtracks/JKJamTracksList.js | 3 -- .../components/shopping-cart/JKCheckout.js | 8 +++- .../shopping-cart/JKShoppingCart.js | 8 +++- .../shopping-cart/checkout/CheckoutAside.js | 9 ++-- jam-ui/src/context/AppDataContext.js | 11 ++++- jam-ui/src/hooks/useShoppingCart.js | 8 ++-- 8 files changed, 40 insertions(+), 60 deletions(-) diff --git a/jam-ui/src/components/jamtracks/JKJamTrackPurchaseButton.js b/jam-ui/src/components/jamtracks/JKJamTrackPurchaseButton.js index a5c43e253..b6c24dae9 100644 --- a/jam-ui/src/components/jamtracks/JKJamTrackPurchaseButton.js +++ b/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 = () => { diff --git a/jam-ui/src/components/jamtracks/JKJamTracksFilter.js b/jam-ui/src/components/jamtracks/JKJamTracksFilter.js index 8bfb64742..b50db5b84 100644 --- a/jam-ui/src/components/jamtracks/JKJamTracksFilter.js +++ b/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 PDF file - {shoppingCart.length > 0 && ( + {shoppingCart && shoppingCart.length > 0 && (
diff --git a/jam-ui/src/components/jamtracks/JKJamTracksList.js b/jam-ui/src/components/jamtracks/JKJamTracksList.js index d8aae74c6..1a94bfc33 100644 --- a/jam-ui/src/components/jamtracks/JKJamTracksList.js +++ b/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'; diff --git a/jam-ui/src/components/shopping-cart/JKCheckout.js b/jam-ui/src/components/shopping-cart/JKCheckout.js index 3212ee448..85011c01b 100644 --- a/jam-ui/src/components/shopping-cart/JKCheckout.js +++ b/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 = () => {
)} Cart Loading... : } + aside={cartLoading ?
Cart Loading...
: } isStickyAside={false} > diff --git a/jam-ui/src/components/shopping-cart/JKShoppingCart.js b/jam-ui/src/components/shopping-cart/JKShoppingCart.js index 21e10e178..b56f013ad 100644 --- a/jam-ui/src/components/shopping-cart/JKShoppingCart.js +++ b/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)) { diff --git a/jam-ui/src/components/shopping-cart/checkout/CheckoutAside.js b/jam-ui/src/components/shopping-cart/checkout/CheckoutAside.js index 934938f18..f501ab74c 100644 --- a/jam-ui/src/components/shopping-cart/checkout/CheckoutAside.js +++ b/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 ( diff --git a/jam-ui/src/context/AppDataContext.js b/jam-ui/src/context/AppDataContext.js index b2983a52e..1ed6f92eb 100644 --- a/jam-ui/src/context/AppDataContext.js +++ b/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 {children}; diff --git a/jam-ui/src/hooks/useShoppingCart.js b/jam-ui/src/hooks/useShoppingCart.js index 3440effc9..f5c4bf8b9 100644 --- a/jam-ui/src/hooks/useShoppingCart.js +++ b/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 } } \ No newline at end of file