using useSyncExternalStore hook

caish-cloud · May 10, 2024 · 16bae94 · 16bae94
1 parent b1dc21d
commit 16bae94
Show file tree

Hide file tree

Showing 16 changed files with 120 additions and 53 deletions.
diff --git a/src/features/alert/alert-actions.tsx b/src/features/alert/alert-actions.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Container } from '../../components/Container';
 import { ThemeStyles } from '../../constants/types';
-import { useStore } from '../../services/zustand/store';
+import { useAlertTheme } from '../../services/zustand/hooks';
 
 export type AlertActionsProps = {
   /**
@@ -20,15 +20,15 @@ export type AlertActionsProps = {
  * @param props - The properties to pass to the component.
  */
 export function AlertActions(props: AlertActionsProps) {
-  const store = useStore();
+  const alertTheme = useAlertTheme();
 
   return (
     <Container
       flexBasis={{ base: 0, lg: '215px' }}
       flexDirection={{ base: 'row', lg: 'column' }}
       justifyContent={{ base: 'left', lg: 'center' }}
       gap={2}
-      theme={store.alertTheme}
+      theme={alertTheme}
       userDefinedStyle={props.containerStyle}
     >
       {props.children}

diff --git a/src/features/alert/alert-button.tsx b/src/features/alert/alert-button.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button, ButtonProps } from '../../components/Button';
 import { ThemeStyles } from '../../constants/types';
+import { useAlertTheme } from '../../services/zustand/hooks';
 import { useStore } from '../../services/zustand/store';
 
 export interface AlertButtonProps extends Omit<ButtonProps, 'theme'> {
@@ -30,6 +31,7 @@ export function AlertButton(props: AlertButtonProps) {
     ...rest
   } = props;
 
+  const alertTheme = useAlertTheme();
   const store = useStore();
 
   /**
@@ -68,7 +70,7 @@ export function AlertButton(props: AlertButtonProps) {
       {...rest}
       containerStyle={getContainerStyle()}
       onClick={handleOnClick}
-      theme={store.alertTheme}
+      theme={alertTheme}
       variant={variant}
     />
   );

diff --git a/src/features/alert/alert-content.tsx b/src/features/alert/alert-content.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Container } from '../../components/Container';
 import { ThemeStyles } from '../../constants/types';
-import { useStore } from '../../services/zustand/store';
+import { useAlertTheme } from '../../services/zustand/hooks';
 
 export type AlertContentProps = {
   /**
@@ -20,13 +20,13 @@ export type AlertContentProps = {
  * @param props - The properties to pass to the component.
  */
 export function AlertContent(props: AlertContentProps) {
-  const store = useStore();
+  const alertTheme = useAlertTheme();
 
   return (
     <Container
       flexDirection="column"
       flexGrow={1}
-      theme={store.alertTheme}
+      theme={alertTheme}
       userDefinedStyle={props.containerStyle}
     >
       {props.children}

diff --git a/src/features/alert/alert-description.tsx b/src/features/alert/alert-description.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Container } from '../../components/Container';
 import { Text } from '../../components/Text';
 import { ThemeStyles } from '../../constants/types';
-import { useStore } from '../../services/zustand/store';
+import { useAlertTheme } from '../../services/zustand/hooks';
 
 export type AlertDescriptionProps = {
   /**
@@ -26,13 +26,13 @@ export type AlertDescriptionProps = {
  * @param props - The properties to pass to the component.
  */
 export function AlertDescription(props: AlertDescriptionProps) {
-  const store = useStore();
+  const alertTheme = useAlertTheme();
 
   return (
-    <Container theme={store.alertTheme} userDefinedStyle={props.containerStyle}>
+    <Container theme={alertTheme} userDefinedStyle={props.containerStyle}>
       <Text
         fontSize={{ base: 'sm', lg: 'md' }}
-        theme={store.alertTheme}
+        theme={alertTheme}
         userDefinedStyle={props.textStyle}
       >
         {props.text}

diff --git a/src/features/alert/alert-root.tsx b/src/features/alert/alert-root.tsx
@@ -5,6 +5,7 @@ import { Container } from '../../components/Container';
 import { MotionBox } from '../../components/MotionBox';
 import { LocalStorageKeys } from '../../constants/settings';
 import { Theme, ThemeStyles } from '../../constants/types';
+import { useAlertDismissed } from '../../services/zustand/hooks';
 import { useStore } from '../../services/zustand/store';
 
 export type AlertRootRef = {
@@ -78,6 +79,7 @@ export const AlertRoot = React.forwardRef<AlertRootRef, AlertRootProps>(
     },
     ref
   ) => {
+    const alertDismissed = useAlertDismissed();
     const store = useStore();
 
     // Update the stored theme when the theme prop changes
@@ -185,7 +187,7 @@ export const AlertRoot = React.forwardRef<AlertRootRef, AlertRootProps>(
     return (
       <ChakraProvider>
         <AnimatePresence>
-          {!store.alertDismissed && (
+          {!alertDismissed && (
             <MotionBox
               animate={enterExitAnimationEnabled ? 'visible' : 'disabled'}
               bottom={6}

diff --git a/src/features/alert/alert-title.tsx b/src/features/alert/alert-title.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Container } from '../../components/Container';
 import { Text } from '../../components/Text';
 import { ThemeStyles } from '../../constants/types';
-import { useStore } from '../../services/zustand/store';
+import { useAlertTheme } from '../../services/zustand/hooks';
 
 export type AlertTitleProps = {
   /**
@@ -26,14 +26,14 @@ export type AlertTitleProps = {
  * @param props - The properties to pass to the component.
  */
 export function AlertTitle(props: AlertTitleProps) {
-  const store = useStore();
+  const alertTheme = useAlertTheme();
 
   return (
-    <Container theme={store.alertTheme} userDefinedStyle={props.containerStyle}>
+    <Container theme={alertTheme} userDefinedStyle={props.containerStyle}>
       <Text
         fontSize={{ base: 'md', lg: 'lg' }}
         fontWeight="semibold"
-        theme={store.alertTheme}
+        theme={alertTheme}
         userDefinedStyle={props.textStyle}
       >
         {props.text}

diff --git a/src/features/modal/modal-body.tsx b/src/features/modal/modal-body.tsx
@@ -1,7 +1,7 @@
 import { ModalBody as ChakraUiModalBody } from '@chakra-ui/react';
 import React from 'react';
 import { ThemeStyles } from '../../constants/types';
-import { useStore } from '../../services/zustand/store';
+import { useModalTheme } from '../../services/zustand/hooks';
 
 export type ModalBodyProps = {
   /**
@@ -20,21 +20,21 @@ export type ModalBodyProps = {
  * @param props - The properties to pass to the component.
  */
 export function ModalBody(props: ModalBodyProps) {
-  const store = useStore();
+  const modalTheme = useModalTheme();
 
   /**
    * Gets the styles for the modal body container based on the theme.
    * @returns The styles for the modal body container.
    */
   function getContainerStyle(): React.CSSProperties | undefined {
     let tempStyle: React.CSSProperties = {
-      ...defaultContainerStyle[store.modalTheme]
+      ...defaultContainerStyle[modalTheme]
     };
 
     if (props.containerStyle) {
       tempStyle = {
         ...tempStyle,
-        ...(props.containerStyle[store.modalTheme] ?? {})
+        ...(props.containerStyle[modalTheme] ?? {})
       };
     }
 

diff --git a/src/features/modal/modal-button.tsx b/src/features/modal/modal-button.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button, ButtonProps } from '../../components/Button';
 import { ThemeStyles } from '../../constants/types';
+import { useModalTheme } from '../../services/zustand/hooks';
 import { useStore } from '../../services/zustand/store';
 
 export interface ModalButtonProps extends Omit<ButtonProps, 'theme'> {
@@ -29,7 +30,7 @@ export function ModalButton(props: ModalButtonProps) {
     variant = 'regular',
     ...rest
   } = props;
-
+  const modalTheme = useModalTheme();
   const store = useStore();
 
   /**
@@ -67,7 +68,7 @@ export function ModalButton(props: ModalButtonProps) {
       {...rest}
       containerStyle={getContainerStyle()}
       onClick={handleOnClick}
-      theme={store.modalTheme}
+      theme={modalTheme}
       variant={variant}
     />
   );

diff --git a/src/features/modal/modal-cookie-action.tsx b/src/features/modal/modal-cookie-action.tsx
@@ -2,7 +2,7 @@ import { Flex, Switch } from '@chakra-ui/react';
 import React from 'react';
 import { Text } from '../../components/Text';
 import { ThemeStyles } from '../../constants/types';
-import { useStore } from '../../services/zustand/store';
+import { useModalTheme } from '../../services/zustand/hooks';
 
 export type ModalCookieActionProps = {
   /**
@@ -73,7 +73,7 @@ export function ModalCookieAction({
   switchToggledOnColor = '#0082ba',
   ...props
 }: ModalCookieActionProps) {
-  const store = useStore();
+  const modalTheme = useModalTheme();
 
   const [isSwitchOn, setIsSwitchOn] = React.useState(false);
 
@@ -83,13 +83,13 @@ export function ModalCookieAction({
    */
   function getContainerStyle(): React.CSSProperties | undefined {
     let tempStyle: React.CSSProperties = {
-      ...defaultContainerStyle[store.modalTheme]
+      ...defaultContainerStyle[modalTheme]
     };
 
     if (props.containerStyle) {
       tempStyle = {
         ...tempStyle,
-        ...(props.containerStyle[store.modalTheme] ?? {})
+        ...(props.containerStyle[modalTheme] ?? {})
       };
     }
 
@@ -128,7 +128,7 @@ export function ModalCookieAction({
         <Text
           fontSize={{ base: 'sm', lg: 'md' }}
           fontWeight="semibold"
-          theme={store.modalTheme}
+          theme={modalTheme}
           userDefinedStyle={props.titleStyle}
         >
           {props.title}
@@ -138,7 +138,7 @@ export function ModalCookieAction({
           <Text
             fontSize={{ base: 'xs', lg: 'sm' }}
             userDefinedStyle={props.descriptionStyle}
-            theme={store.modalTheme}
+            theme={modalTheme}
           >
             {props.description}
           </Text>

diff --git a/src/features/modal/modal-cookie-actions.tsx b/src/features/modal/modal-cookie-actions.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Container } from '../../components/Container';
 import { ThemeStyles } from '../../constants/types';
-import { useStore } from '../../services/zustand/store';
+import { useModalTheme } from '../../services/zustand/hooks';
 
 export type ModalCookieActionsProps = {
   /**
@@ -21,15 +21,15 @@ export type ModalCookieActionsProps = {
  * @param props - The properties to pass to the component.
  */
 export function ModalCookieActions(props: ModalCookieActionsProps) {
-  const store = useStore();
+  const modalTheme = useModalTheme();
 
   return (
     <Container
       flexDirection="column"
       gap={4}
       mb={4}
       mt={8}
-      theme={store.modalTheme}
+      theme={modalTheme}
       userDefinedStyle={props.containerStyle}
     >
       {props.children}

diff --git a/src/features/modal/modal-cta-actions.tsx b/src/features/modal/modal-cta-actions.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Container } from '../../components/Container';
 import { ThemeStyles } from '../../constants/types';
-import { useStore } from '../../services/zustand/store';
+import { useModalTheme } from '../../services/zustand/hooks';
 
 export type ModalCtaActionsProps = {
   /**
@@ -21,13 +21,13 @@ export type ModalCtaActionsProps = {
  * @param props - The properties to pass to the component.
  */
 export function ModalCtaActions(props: ModalCtaActionsProps) {
-  const store = useStore();
+  const modalTheme = useModalTheme();
 
   return (
     <Container
       gap={2}
       my={2}
-      theme={store.modalTheme}
+      theme={modalTheme}
       userDefinedStyle={props.containerStyle}
     >
       {props.children}

diff --git a/src/features/modal/modal-footer.tsx b/src/features/modal/modal-footer.tsx
@@ -1,7 +1,7 @@
 import { ModalFooter as ChakraUiModalFooter } from '@chakra-ui/react';
 import React from 'react';
 import { ThemeStyles } from '../../constants/types';
-import { useStore } from '../../services/zustand/store';
+import { useModalTheme } from '../../services/zustand/hooks';
 
 export type ModalFooterProps = {
   /**
@@ -20,21 +20,21 @@ export type ModalFooterProps = {
  * @param props - The properties to pass to the component.
  */
 export function ModalFooter(props: ModalFooterProps) {
-  const store = useStore();
+  const modalTheme = useModalTheme();
 
   /**
    * Gets the styles for the modal footer container based on the theme.
    * @returns The styles for the modal footer container.
    */
   function getContainerStyle(): React.CSSProperties | undefined {
     let tempStyle: React.CSSProperties = {
-      ...defaultContainerStyle[store.modalTheme]
+      ...defaultContainerStyle[modalTheme]
     };
 
     if (props.containerStyle) {
       tempStyle = {
         ...tempStyle,
-        ...(props.containerStyle[store.modalTheme] ?? {})
+        ...(props.containerStyle[modalTheme] ?? {})
       };
     }
 

diff --git a/src/features/modal/modal-header.tsx b/src/features/modal/modal-header.tsx
@@ -1,7 +1,7 @@
 import { ModalHeader as ChakraUiModalHeader } from '@chakra-ui/react';
 import React from 'react';
 import { ThemeStyles } from '../../constants/types';
-import { useStore } from '../../services/zustand/store';
+import { useModalTheme } from '../../services/zustand/hooks';
 
 export type ModalHeaderProps = {
   /**
@@ -25,29 +25,29 @@ export type ModalHeaderProps = {
  * @param props - The properties to pass to the component.
  */
 export function ModalHeader(props: ModalHeaderProps) {
-  const store = useStore();
+  const modalTheme = useModalTheme();
 
   /**
    * Gets the styles for the modal header container and text based on the theme.
    * @returns The styles for the modal header container and text.
    */
   function getContainerAndTextStyle(): React.CSSProperties | undefined {
     let tempStyle: React.CSSProperties = {
-      ...defaultContainerStyle[store.modalTheme],
-      ...defaultTextStyle[store.modalTheme]
+      ...defaultContainerStyle[modalTheme],
+      ...defaultTextStyle[modalTheme]
     };
 
     if (props.containerStyle) {
       tempStyle = {
         ...tempStyle,
-        ...(props.containerStyle[store.modalTheme] ?? {})
+        ...(props.containerStyle[modalTheme] ?? {})
       };
     }
 
     if (props.textStyle) {
       tempStyle = {
         ...tempStyle,
-        ...(props.textStyle[store.modalTheme] ?? {})
+        ...(props.textStyle[modalTheme] ?? {})
       };
     }