Continuing work the theming work

libs/ui/src/lib-base/ui/switch.theme/index.ts → libs/features/src/lib/navigation/component/switch.theme/index.ts

@@ -1,4 +1,3 @@
 import UiSwitchTheme from './switch.theme.view';
 
 export { UiSwitchTheme };
-// export * from './switch.enum';

libs/ui/src/lib-base/ui/switch.theme/switch.theme.interface.ts → libs/features/src/lib/navigation/component/switch.theme/switch.theme.interface.ts

@@ -1,6 +1,5 @@
 import { ThemeTypeEnum } from '@pokemon-pet-shop/store';
-
-import { IconType } from '../icon/icon.interface';
+import { IconType } from '@pokemon-pet-shop/ui';
 
 export interface SwitchProps {
   className?: string;

libs/features/src/lib/navigation/component/switch.theme/switch.theme.view.tsx

@@ -0,0 +1,49 @@
+import { memo, ReactElement, useEffect } from 'react';
+
+import { ThemeTypeEnum, useThemeStore } from '@pokemon-pet-shop/store';
+import { IconTypeEnum, SwitchStatusEnum, UiSwitch } from '@pokemon-pet-shop/ui';
+
+import { SwitchProps } from './switch.theme.interface';
+
+const SwitchTheme = ({ className }: SwitchProps): ReactElement => {
+  const { theme, updateTheme } = useThemeStore();
+
+  const updateTheming = (newTheme: ThemeTypeEnum) => {
+    updateTheme(newTheme);
+    const el = document.querySelector('html');
+
+    el?.classList.toggle(ThemeTypeEnum.DARK);
+    el?.classList.toggle(ThemeTypeEnum.LIGHT);
+  };
+
+  const turnLightOnClick = () => {
+    updateTheming(ThemeTypeEnum.LIGHT);
+  };
+
+  const turnDarkOnClick = () => {
+    updateTheming(ThemeTypeEnum.DARK);
+  };
+
+  useEffect(() => {
+    const el = document.querySelector('html');
+
+    el?.classList.add(theme);
+
+    return () => {
+      el?.classList.remove(theme);
+    };
+  }, [theme]);
+
+  return (
+    <UiSwitch
+      className={className}
+      iconLeft={IconTypeEnum.ICON_SUN}
+      iconRight={IconTypeEnum.ICON_MOON}
+      val={theme === ThemeTypeEnum.LIGHT ? SwitchStatusEnum.ON : SwitchStatusEnum.OFF}
+      onLeftClick={turnLightOnClick}
+      onRightClick={turnDarkOnClick}
+    />
+  );
+};
+
+export default memo(SwitchTheme);

libs/features/src/lib/navigation/header/header.tsx

@@ -9,7 +9,6 @@ import {
   UiIcon,
   IconTypeEnum,
   UiInput,
-  UiSwitchTheme,
   UiTypography,
   TypographyTypeEnum,
   UiContainer,
@@ -18,6 +17,7 @@ import {
 import { noopUtil } from '@pokemon-pet-shop/utils';
 
 import { UiCartModal } from '../../cart';
+import { UiSwitchTheme } from '../component/switch.theme';
 
 import { styles } from './header.module';
 
@@ -59,11 +59,8 @@ const Header = () => {
         </UiElementLayout>
 
         <UiHideInMobile>
-          <UiSwitchTheme
-            className={styles.switchTheme}
-            iconLeft={IconTypeEnum.ICON_SUN}
-            iconRight={IconTypeEnum.ICON_MOON}
-          />
+          <UiSwitchTheme className={styles.switchTheme} />
+          <UiSwitchTheme className={styles.switchTheme} />
         </UiHideInMobile>
 
         <UiElementLayout onClick={handleOpenDetailModalClick}>

libs/features/src/lib/navigation/nav.mobile/nav.mobile.tsx

@@ -1,14 +1,9 @@
 import { ReactElement } from 'react';
 
 import { AlignmentEnum } from '@pokemon-pet-shop/typing';
-import {
-  UiElementLayout,
-  UiIcon,
-  IconTypeEnum,
-  UiTypography,
-  UiModal,
-  UiSwitchTheme,
-} from '@pokemon-pet-shop/ui';
+import { UiElementLayout, UiIcon, IconTypeEnum, UiTypography, UiModal } from '@pokemon-pet-shop/ui';
+
+import { UiSwitchTheme } from '../component/switch.theme';
 
 import { NavMobileModalProps } from './nav.mobile.interface';
 import styles from './nav.mobile.module.css';
@@ -27,11 +22,7 @@ const NavMobileModal = ({ isModalShown = false }: NavMobileModalProps): ReactEle
         </UiElementLayout>
       </UiElementLayout>
       <UiElementLayout className={styles.dropdownBtm}>
-        <UiSwitchTheme
-          className={styles.switchTheme}
-          iconLeft={IconTypeEnum.ICON_SUN}
-          iconRight={IconTypeEnum.ICON_MOON}
-        />
+        <UiSwitchTheme className={styles.switchTheme} />
       </UiElementLayout>
     </UiModal>
   );

libs/services/src/lib/cart/api.cart.service.ts

@@ -1,7 +1,9 @@
+import { CartDataApi } from '@pokemon-pet-shop/typing';
+
 import { axiosInstance } from '../common/utils/api.util';
 
 export const getCart = async () => {
-  return (await axiosInstance.get<any[]>('cart')).data;
+  return (await axiosInstance.get<CartDataApi>('cart')).data;
 };
 
 export const updateCart = async (data: any) => {

libs/ui/src/index.ts

@@ -11,11 +11,11 @@ export * from './lib-base/ui/typography';
 export * from './lib-base/ui/image';
 export * from './lib-base/ui/icon';
 export * from './lib-base/ui/input';
-export * from './lib-base/ui/switch.theme';
 export * from './lib-base/ui/button';
 export * from './lib-base/ui/icon.poke.type';
 export * from './lib-base/ui/modal';
 export * from './lib-base/ui/card';
 export * from './lib-base/ui/dropdown';
 export * from './lib-base/ui/hide.in.mobile';
 export * from './lib-base/ui/tag';
+export * from './lib-base/ui/switch';

libs/ui/src/lib-base/ui/icon/index.ts

@@ -2,3 +2,4 @@ import UiIcon from './icon.view';
 
 export { UiIcon };
 export * from './icon.enum';
+export * from './icon.interface';

libs/ui/src/lib-base/ui/switch/index.ts

@@ -1,4 +1,4 @@
 import UiSwitch from './switch.view';
 
 export { UiSwitch };
-// export * from './switch.enum';
+export * from './switch.enum';

libs/ui/src/lib-base/ui/switch/switch.enum.ts

@@ -0,0 +1,4 @@
+export enum SwitchStatusEnum {
+  ON = 'ON',
+  OFF = 'OFF',
+}

libs/ui/src/lib-base/ui/switch/switch.interface.ts

@@ -7,7 +7,8 @@ export interface SwitchProps {
   name?: string;
   iconLeft?: IconType | null;
   iconRight?: IconType | null;
-  defaultValue?: boolean;
+  defaultValue?: string;
+  val?: string | null;
   isDisabled?: boolean;
   onLeftClick?: GenericNonReturnType;
   onRightClick?: GenericNonReturnType;