clean up • any cart counter to header (styling counter in future)

AnselmMarie · Sep 7, 2024 · c1f9bf4 · c1f9bf4
1 parent efabf05
commit c1f9bf4
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 22 deletions.
diff --git a/libs/features/src/lib/navigation/header/header.tsx b/libs/features/src/lib/navigation/header/header.tsx
@@ -1,4 +1,7 @@
+import { useMemo } from 'react';
+
 import { pokeshopLogo } from '@pokemon-pet-shop/assets';
+import { useGetCart } from '@pokemon-pet-shop/services';
 import {
   UiElementLayout,
   ElementLayoutTypeEnum,
@@ -16,6 +19,17 @@ import {
 import { styles } from './header.module';
 
 const Header = () => {
+  const { data } = useGetCart();
+
+  const getCartCounter = useMemo(() => {
+    let counter = 0;
+    (data || []).forEach((el) => {
+      counter = counter + el.quantity;
+    });
+
+    return counter;
+  }, [data]);
+
   return (
     <UiElementLayout layoutType={ElementLayoutTypeEnum.HEADER} className={styles.headerWrapper}>
       <UiContainer className={styles.container}>
@@ -39,7 +53,10 @@ const Header = () => {
           />
         </UiHideInMobile>
 
-        <UiIcon classNameIcon={styles.iconCart} />
+        <UiElementLayout>
+          <UiTypography>{getCartCounter}</UiTypography>
+          <UiIcon classNameIcon={styles.iconCart} />
+        </UiElementLayout>
       </UiContainer>
     </UiElementLayout>
   );

diff --git a/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.view.tsx b/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.view.tsx
@@ -22,15 +22,15 @@ import { styles } from './pokemon.card.module';
 import usePokemonCard from './use.pokemon.card.logic';
 
 const PokemonCard = ({ data = {} }: CardProps): ReactElement => {
-  const { getPokemonDetail, getThemeClass } = usePokemonCard(data);
+  const { getThemeClass, onHandleUpdateCartSubmit } = usePokemonCard(data);
   const openModal = useModalStore((state) => state.openModal);
 
   const handleOpenDetailModalClick = () => {
     openModal({
       content: <UiPokemonDetailModal />,
       options: {
         title: 'Here',
-        data: getPokemonDetail,
+        data: data,
         classNameShadow: '',
         classNameModal: '',
         isModalShown: false,
@@ -43,18 +43,14 @@ const PokemonCard = ({ data = {} }: CardProps): ReactElement => {
     });
   };
 
-  const handleAddPetInCartClick = () => {
-    console.log('handleAddPetInCartClick');
-  };
-
   return (
     <UiCard className={classNamesUtil(styles.cardWrapper, styles?.[`${getThemeClass}Wrapper`])}>
       <UiElementLayout className={styles.imgCardWrapper}>
         <UiTypography typographyType={TypographyTypeEnum.SPAN} className={styles.price}>
           $500.00
         </UiTypography>
         <UiImage
-          src={getPokemonDetail?.sprites?.other?.['official-artwork']?.front_default}
+          src={data?.sprites?.other?.['official-artwork']?.front_default}
           className={styles.image}
           alt={`${data?.name} Image`}
           mobSrcType={mobSrcTypeEnum.URI}
@@ -85,7 +81,7 @@ const PokemonCard = ({ data = {} }: CardProps): ReactElement => {
               )}
               typographyType={TypographyTypeEnum.SPAN}
             >
-              NO. {getPokemonDetail?.order}
+              NO. {data?.order}
             </UiTypography>
           </UiElementLayout>
           <UiTypography
@@ -98,7 +94,7 @@ const PokemonCard = ({ data = {} }: CardProps): ReactElement => {
             {data?.name}
           </UiTypography>
 
-          {(getPokemonDetail?.abilities || []).map(
+          {(data?.abilities || []).map(
             (abilityObj: PokemonDetailAbilityObj, i: number): ReactElement | null => {
               if (i > 1) {
                 return null;
@@ -107,7 +103,7 @@ const PokemonCard = ({ data = {} }: CardProps): ReactElement => {
                 <UiPokemonAbilityName
                   key={i}
                   abilityData={abilityObj}
-                  typeData={getPokemonDetail?.types}
+                  typeData={data?.types}
                   getThemeClass={getThemeClass}
                 />
               );
@@ -116,7 +112,7 @@ const PokemonCard = ({ data = {} }: CardProps): ReactElement => {
         </UiElementLayout>
 
         <UiElementLayout className={styles.btnWrapper}>
-          <UiButton className={styles.btn} text="Get Pet" onClick={handleAddPetInCartClick} />
+          <UiButton className={styles.btn} text="Get Pet" onClick={onHandleUpdateCartSubmit} />
           <UiButton
             className={styles.btn}
             type={ButtonTypeEnum.SECONDARY}

diff --git a/libs/features/src/lib/pokemon/pokemon.card/use.pokemon.card.logic.ts b/libs/features/src/lib/pokemon/pokemon.card/use.pokemon.card.logic.ts
@@ -1,23 +1,27 @@
-import { useMemo } from 'react';
+import { useUpdateCart } from '@pokemon-pet-shop/services';
+import { PokemonListApi } from '@pokemon-pet-shop/typing';
 
 import { usePokemonTheme } from '../hooks/use.pokemone.theme.logic';
 
 interface UseCardReturn {
-  getPokemonDetail: any;
   getThemeClass: any;
+  onHandleUpdateCartSubmit: any;
 }
 
-const usePokemonCard = (dataDetail: any): UseCardReturn => {
-  /** This needs to change once the apps calls multiple different detail */
-  const getPokemonDetail = useMemo(() => {
-    return dataDetail;
-  }, [dataDetail]);
+const usePokemonCard = (data: PokemonListApi): UseCardReturn => {
+  const { getThemeClass } = usePokemonTheme(data?.types);
+  const updateCartMutation = useUpdateCart();
 
-  const { getThemeClass } = usePokemonTheme(getPokemonDetail?.types);
+  const handleUpdateCartSubmit = () => {
+    updateCartMutation.mutate({
+      id: data?.id,
+      quantity: 1,
+    });
+  };
 
   return {
-    getPokemonDetail,
     getThemeClass,
+    onHandleUpdateCartSubmit: handleUpdateCartSubmit,
   };
 };
 

diff --git a/libs/features/src/lib/pokemon/pokemon.detail.modal/use.pokemon.detail.modal.logic.ts b/libs/features/src/lib/pokemon/pokemon.detail.modal/use.pokemon.detail.modal.logic.ts
@@ -11,8 +11,8 @@ interface PokemonDetailModalReturn {
 
 const usePokemonDetailModalLogic = (modalData: PokemonListApi): PokemonDetailModalReturn => {
   const res = useGetPokemonSpecies([String(modalData?.id)]);
-  const updateCartMutation = useUpdateCart();
   const { data, isError, isLoading, isFetching } = res[0];
+  const updateCartMutation = useUpdateCart();
 
   const handleUpdateCartSubmit = () => {
     updateCartMutation.mutate({