Adding disabled and loading states in the Ui

AnselmMarie · Oct 1, 2024 · bb8498e · bb8498e
1 parent 41484e8
commit bb8498e
Show file tree

Hide file tree

Showing 13 changed files with 107 additions and 33 deletions.
diff --git a/libs/features/src/lib/cart/cart.modal/cart.modal.item.view.tsx b/libs/features/src/lib/cart/cart.modal/cart.modal.item.view.tsx
@@ -20,8 +20,13 @@ import { styles } from './cart.modal.module';
 import useCartModalItemLogic from './use.cart.modal.item.logic';
 
 const CartModalItem = ({ el }: any): ReactElement => {
-  const { onHandleRemoveFromCart, onHandleAddToCart, onHandleRemoveCartItem } =
-    useCartModalItemLogic();
+  const {
+    updateIsPending,
+    deleteIsPending,
+    onHandleRemoveFromCart,
+    onHandleAddToCart,
+    onHandleRemoveCartItem,
+  } = useCartModalItemLogic();
   const { newStyles } = useRenderStyles(styles);
   const { getThemeClass } = usePokemonThemeLogic(el?.types);
 
@@ -56,12 +61,14 @@ const CartModalItem = ({ el }: any): ReactElement => {
             <UiIcon
               icon={IconTypeEnum.ICON_MINUS}
               classNameIcon={styles.quantityIcon}
+              isDisabled={el?.quantity === 1 || updateIsPending}
               onClick={() => onHandleRemoveFromCart(el?.id)}
             />
             <UiTypography>{el?.quantity}</UiTypography>
             <UiIcon
               icon={IconTypeEnum.ICON_PLUS}
               classNameIcon={styles.quantityIcon}
+              isDisabled={updateIsPending}
               onClick={() => onHandleAddToCart(el?.id)}
             />
           </UiElementLayout>
@@ -70,6 +77,7 @@ const CartModalItem = ({ el }: any): ReactElement => {
         <UiIcon
           icon={IconTypeEnum.ICON_TRASH}
           color={IconColorEnum.RED}
+          isDisabled={deleteIsPending}
           onClick={() => onHandleRemoveCartItem(el?.id)}
         />
       </UiElementLayout>

diff --git a/libs/features/src/lib/cart/cart.modal/use.cart.modal.item.logic.ts b/libs/features/src/lib/cart/cart.modal/use.cart.modal.item.logic.ts
@@ -1,7 +1,11 @@
+import { useEffect } from 'react';
+
 import { useDeleteCartItem, useUpdateCart } from '@pokemon-pet-shop/services';
 import { GenericNonReturnType } from '@pokemon-pet-shop/typing';
 
 interface UseCartModalReturn {
+  updateIsPending: boolean;
+  deleteIsPending: boolean;
   onHandleRemoveFromCart: GenericNonReturnType;
   onHandleAddToCart: GenericNonReturnType;
   onHandleRemoveCartItem: GenericNonReturnType;
@@ -31,7 +35,14 @@ const useCartModalItemLogic = (): UseCartModalReturn => {
     });
   };
 
+  useEffect(() => {
+    console.log('updateCartMutation.error', updateCartMutation.error);
+    console.log('deleteCartMutation.error', deleteCartMutation.error);
+  }, [updateCartMutation.error, deleteCartMutation.error]);
+
   return {
+    updateIsPending: updateCartMutation.isPending,
+    deleteIsPending: deleteCartMutation.isPending,
     onHandleRemoveFromCart: handleRemoveFromCart,
     onHandleAddToCart: handleAddToCart,
     onHandleRemoveCartItem: handleRemoveCartItem,

diff --git a/libs/features/src/lib/footer/footer.tsx b/libs/features/src/lib/footer/footer.tsx
@@ -1,4 +1,10 @@
-import { IconTypeEnum, UiElementLayout, UiIcon, UiTypography } from '@pokemon-pet-shop/ui';
+import {
+  IconColorEnum,
+  IconTypeEnum,
+  UiElementLayout,
+  UiIcon,
+  UiTypography,
+} from '@pokemon-pet-shop/ui';
 
 import { styles } from './footer.module';
 
@@ -10,10 +16,16 @@ const Footer = () => {
   return (
     <UiElementLayout className={styles.footerWrapper}>
       <UiElementLayout className={styles.githubWrapper} onClick={goToGithubProject}>
-        <UiIcon icon={IconTypeEnum.ICON_GITHUB} size={20} classNameIcon={styles.githubIcon} />
+        <UiIcon
+          icon={IconTypeEnum.ICON_GITHUB}
+          size={20}
+          classNameIcon={styles.githubIcon}
+          color={IconColorEnum.BLACK}
+        />
         <UiTypography>Github Project</UiTypography>
       </UiElementLayout>
-      <UiTypography className={styles.footerDivider}>|</UiTypography> <UiIcon />
+      <UiTypography className={styles.footerDivider}>|</UiTypography>
+      <UiIcon color={IconColorEnum.BLACK} />
       <UiTypography>Scan QR code for mobile app</UiTypography>
     </UiElementLayout>
   );

diff --git a/libs/features/src/lib/pokemon/pokemon.detail.modal/pokemon.detail.modal.view.tsx b/libs/features/src/lib/pokemon/pokemon.detail.modal/pokemon.detail.modal.view.tsx
@@ -12,6 +12,7 @@ import {
   UiTagWrapper,
   UiTagItem,
   ButtonSizeEnum,
+  UiSkeleton,
 } from '@pokemon-pet-shop/ui';
 import { globalStyles } from '@pokemon-pet-shop/ui/styles/global';
 import {
@@ -31,6 +32,9 @@ const PokemonDetailModal = (): ReactElement => {
   const {
     modalData,
     speciesData,
+    isPendingUpdateCart,
+    speciesIsLoading,
+    pricingIsLoading,
     onConvertKgToLbs,
     onConvertMetersToFtIn,
     onGetPricingFormat,
@@ -53,7 +57,13 @@ const PokemonDetailModal = (): ReactElement => {
         className={classNamesUtil(newStyles.imageContainer, newStyles?.[`${getThemeClass}ImageBg`])}
       >
         <UiElementLayout className={newStyles.priceWrapper}>
-          <UiTypography className={newStyles.priceText}>{onGetPricingFormat}</UiTypography>
+          <UiTypography className={newStyles.priceText}>
+            {!pricingIsLoading && !speciesIsLoading ? (
+              onGetPricingFormat
+            ) : (
+              <UiSkeleton width="100px" />
+            )}
+          </UiTypography>
         </UiElementLayout>
         <UiImage
           src={modalData?.sprites?.other?.['official-artwork']?.front_default}
@@ -95,7 +105,7 @@ const PokemonDetailModal = (): ReactElement => {
               className={newStyles.cardDescription}
               typographyType={TypographyTypeEnum.P}
             >
-              {removeHtmlCodeInDescription}
+              {!speciesIsLoading ? removeHtmlCodeInDescription : <UiSkeleton count={2} />}
             </UiTypography>
 
             <UiElementLayout className={newStyles.weightHeightWrapper}>
@@ -144,8 +154,9 @@ const PokemonDetailModal = (): ReactElement => {
             <UiButton
               className={newStyles.btn}
               text="Get Pet"
-              onClick={onHandleUpdateCartSubmit}
               size={ButtonSizeEnum.LARGE}
+              isDisabled={isPendingUpdateCart}
+              onClick={onHandleUpdateCartSubmit}
             />
           </UiElementLayout>
         </UiElementLayout>

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
@@ -12,14 +12,13 @@ import { pricingFormatUtil } from '@pokemon-pet-shop/utils';
 
 interface PokemonDetailModalReturn {
   modalData: PokemonListApi;
+  isPendingUpdateCart: boolean;
   speciesData: PokemonSpeciesApi | undefined;
   speciesIsError: boolean;
   speciesIsLoading: boolean;
-  speciesIsFetching: boolean;
   pricingData: PricingApi | undefined;
   pricingIsError: boolean;
   pricingIsLoading: boolean;
-  pricingIsFetching: boolean;
   onConvertKgToLbs: any;
   onConvertMetersToFtIn: any;
   onGetPricingFormat: any;
@@ -130,16 +129,17 @@ const usePokemonDetailModalLogic = (): PokemonDetailModalReturn => {
     pricingData,
   ]);
 
+  console.log('updateCartMutation', updateCartMutation);
+
   return {
     modalData,
     speciesData,
+    isPendingUpdateCart: updateCartMutation?.isPending,
     speciesIsError,
-    speciesIsLoading,
-    speciesIsFetching,
+    speciesIsLoading: speciesIsLoading || speciesIsFetching,
     pricingData,
     pricingIsError,
-    pricingIsLoading,
-    pricingIsFetching,
+    pricingIsLoading: pricingIsLoading || pricingIsFetching,
     onConvertKgToLbs: convertKgToLbs,
     onConvertMetersToFtIn: convertMetersToFtIn,
     onGetPricingFormat: getPricingFormat,

diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
@@ -15,3 +15,4 @@ export * from './lib-base/ui/card';
 export * from './lib-base/ui/hide.in.mobile';
 export * from './lib-base/ui/tag';
 export * from './lib-base/ui/switch';
+export * from './lib-base/ui/skeleton';
diff --git a/libs/ui/src/lib-base/styles/css/global.module.css b/libs/ui/src/lib-base/styles/css/global.module.css
@@ -1,7 +1,24 @@
 .fontBold {
-  font-weight: bold;
+  font-weight: bold !important;
 }
 
 .pointerCursor {
-  cursor: pointer;
+  cursor: pointer !important;
+}
+
+.disabledElement {
+  cursor: not-allowed !important;
+
+  /* opacity: 0.5 !important; */
+}
+
+.disabledElementText {
+  cursor: not-allowed !important;
+  color: var(--theme-netural-600) !important;
+}
+
+.disabledElementBg {
+  cursor: not-allowed !important;
+  color: var(--theme-netural-100) !important;
+  background-color: var(--theme-netural-600) !important;
 }
diff --git a/libs/ui/src/lib-base/ui/button/button.module.css b/libs/ui/src/lib-base/ui/button/button.module.css
@@ -1,7 +1,6 @@
 .button {
   border-radius: var(--theme-radius-pill);
   cursor: pointer;
-  background: none;
   border: 0;
   text-align: center;
 }

diff --git a/libs/ui/src/lib-base/ui/button/button.view.tsx b/libs/ui/src/lib-base/ui/button/button.view.tsx
@@ -3,6 +3,8 @@ import { memo, ReactElement, useMemo } from 'react';
 import { useRenderStyles } from '@pokemon-pet-shop/hooks';
 import { classNamesUtil } from '@pokemon-pet-shop/utils';
 
+import { globalStyles } from '../../styles/css/global.module';
+
 import ButtonElement from './button.element.view';
 import { ButtonSizeEnum, ButtonTypeEnum } from './button.enum';
 import { ButtonProps } from './button.interface';
@@ -38,10 +40,20 @@ const Button = ({
     }
   }, [size, newStyles]);
 
+  const getDisabledStyles = useMemo(() => {
+    return isDisabled ? globalStyles.disabledElementBg : '';
+  }, [isDisabled]);
+
   return (
     <ButtonElement
       text={text}
-      className={classNamesUtil(className, newStyles.button, getTypeStyles, getSizeStyles)}
+      className={classNamesUtil(
+        className,
+        newStyles.button,
+        getTypeStyles,
+        getSizeStyles,
+        getDisabledStyles
+      )}
       isDisabled={isDisabled}
       onClick={onClick}
     />

diff --git a/libs/ui/src/lib-base/ui/icon/icon.enum.ts b/libs/ui/src/lib-base/ui/icon/icon.enum.ts
@@ -1,4 +1,9 @@
-import { THEME_NETURAL_100, THEME_RED_600, THEME_BLUE_600 } from '../../styles/ts/variables';
+import {
+  THEME_NETURAL_100,
+  THEME_RED_600,
+  THEME_BLUE_600,
+  THEME_NETURAL_900,
+} from '../../styles/ts/variables';
 
 export enum IconTypeEnum {
   ICON_SHOPPING_CART = 'IconShoppingCart',
@@ -18,4 +23,5 @@ export enum IconColorEnum {
   BLUE = THEME_BLUE_600,
   RED = THEME_RED_600,
   WHITE = THEME_NETURAL_100,
+  BLACK = THEME_NETURAL_900,
 }
diff --git a/libs/ui/src/lib-base/ui/icon/icon.module.css b/libs/ui/src/lib-base/ui/icon/icon.module.css
diff --git a/libs/ui/src/lib-base/ui/icon/icon.view.tsx b/libs/ui/src/lib-base/ui/icon/icon.view.tsx
@@ -2,11 +2,12 @@ import { memo, ReactElement, useCallback, useMemo } from 'react';
 
 import { classNamesUtil } from '@pokemon-pet-shop/utils';
 
+import { globalStyles } from '../../styles/css/global.module';
+import { THEME_NETURAL_600 } from '../../styles/ts/variables';
 import { UiElementLayout } from '../element.layout';
 
 import { IconColorEnum, IconTypeEnum } from './icon.enum';
 import { IconProps } from './icon.interface';
-import styles from './icon.module.css';
 import { IconMap } from './icon.util';
 
 const Icon = ({
@@ -36,20 +37,23 @@ const Icon = ({
   }, [onClick, isDisabled]);
 
   const renderIcon = useMemo(() => {
+    const disabledStyles = isDisabled ? globalStyles.disabledElement : '';
+    const clickableStyles = onClick ? globalStyles.pointerCursor : '';
+
     return (
       <IconComponent
         size={size}
-        color={color}
-        className={classNamesUtil(classNameIcon, onClick ? styles.icon : '')}
+        color={isDisabled ? THEME_NETURAL_600 : color}
+        className={classNamesUtil(classNameIcon, clickableStyles, disabledStyles)}
         onClick={iconClick}
       />
     );
-  }, [size, IconComponent, classNameIcon, iconClick, onClick]);
+  }, [size, IconComponent, color, classNameIcon, iconClick, isDisabled, onClick]);
 
   if (displayWrapper) {
     return (
       <UiElementLayout
-        className={classNamesUtil(classNameWrapper, styles.iconWrapper)}
+        className={classNamesUtil(classNameWrapper, globalStyles.pointerCursor)}
         onClick={wrapperClick}
       >
         {renderIcon}

diff --git a/libs/ui/src/lib-base/ui/skeleton/skeleton.view.tsx b/libs/ui/src/lib-base/ui/skeleton/skeleton.view.tsx
@@ -2,8 +2,7 @@ import { ReactElement } from 'react';
 
 import Skeleton from 'react-loading-skeleton';
 
-import { THEME_RADIUS_8, THEME_RADIUS_CIRCLE } from '../../styles/ts/variables';
-import { UiElementLayout } from '../element.layout';
+import { THEME_RADIUS_8 } from '../../styles/ts/variables';
 
 import { SkeletonProps } from './skeleton.interface';
 
@@ -31,6 +30,7 @@ const SkeletonView = ({
         return (
           <Skeleton
             key={i}
+            width={width}
             height={circle ? '100%' : height}
             borderRadius={THEME_RADIUS_8}
             circle={circle}