Merge pull request #132 from Crossbell-Box/develop

fix: solved the theme changing problem.
Crossbell-Box · Jun 18, 2023 · 788b357 · 788b357
2 parents ae6f111 + 1c40b14
commit 788b357
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 47 deletions.
diff --git a/.changeset/fair-shrimps-compete.md b/.changeset/fair-shrimps-compete.md
@@ -0,0 +1,5 @@
+---
+"xlog": patch
+---
+
+Solved the theme changing problem.
diff --git a/src/hooks/use-storage.ts b/src/hooks/use-storage.ts
@@ -4,9 +4,6 @@ import { useAsyncStorage } from "@react-native-async-storage/async-storage";
 
 interface UseStorageOptions<T> {
   defaultValue?: T
-  /**
-   * @description If the value is not in the list, it will fallback to the previous value or the default value
-   * */
   validationValues?: unknown[]
 }
 
@@ -18,45 +15,42 @@ export function useStorage<T>(
   const storageController = useAsyncStorage(key);
   const [value, _setValue] = useState<T | undefined>(defaultValue);
 
-  const validateValue = (_value?: T) => {
-    if (typeof defaultValue === "undefined" || !validationValues?.length) {
+  const validateValue = useCallback((_value?: T) => {
+    if (!validationValues?.length)
       return _value;
-    }
+
     const isValid = validationValues?.includes(_value);
-    if (isValid) {
+    if (isValid)
       return _value;
-    }
-
-    if (value !== undefined) {
-      console.warn(`Invalid value for ${key}: ${_value}, falling back to previous value: ${value}`);
-      return value;
-    }
 
-    console.warn(`Invalid value for ${key}: ${_value}, falling back to default value: ${defaultValue}`);
-    return defaultValue;
-  };
+    console.warn(`Invalid value for ${key}: ${_value}, falling back to previous value: ${value}`);
+    return value || defaultValue;
+  }, [value, defaultValue, validationValues]);
 
-  const setValue = useCallback((_value: T) => {
-    if (typeof _value === "undefined") {
+  const setValue = useCallback((_value?: T) => {
+    if (typeof _value === "undefined")
       return storageController.removeItem().then(() => _setValue(undefined));
-    }
 
-    const value = validateValue(_value);
-    return storageController.setItem(JSON.stringify(value)).then(() => _setValue(value));
-  }, [validateValue]);
+    const validatedValue = validateValue(_value);
+    return storageController.setItem(JSON.stringify(validatedValue)).then(() => _setValue(validatedValue));
+  }, [validateValue, storageController]);
 
   useEffect(() => {
-    storageController.getItem().then((value) => {
+    storageController.getItem().then((item) => {
       try {
-        if (JSON.parse(value) === undefined) {
+        const parsedItem = JSON.parse(item!);
+        if (parsedItem !== undefined)
+          _setValue(parsedItem);
+
+        else
           setValue(defaultValue);
-        }
       }
       catch (e) {
-        setValue(JSON.parse(value));
+        console.error(`Failed to parse value for ${key}: ${item}, setting to default value: ${defaultValue}`);
+        setValue(defaultValue);
       }
     });
-  }, []);
+  }, [defaultValue, setValue, storageController]);
 
   return [value, setValue] as const;
 }
diff --git a/src/providers/theme-provider.tsx b/src/providers/theme-provider.tsx
@@ -37,8 +37,6 @@ export const ThemeProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
     defaultValue: false,
   });
 
-  const [loading, setLoading] = useState(true);
-
   const [loaded] = useFonts({
     Inter: require("@tamagui/font-inter/otf/Inter-Regular.otf"),
     InterLight: require("@tamagui/font-inter/otf/Inter-Light.otf"),
@@ -50,23 +48,6 @@ export const ThemeProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
     loaded && SplashScreen.hideAsync();
   }, [loaded]);
 
-  useEffect(() => {
-    (async () => {
-      setLoading(true);
-      await setTheme(theme);
-      await setMode(mode);
-      await setFollowSystem(followSystem);
-    })()
-      .catch((err) => {
-        console.error(err);
-        setTheme(defaultTheme);
-        setMode(defaultMode);
-      })
-      .finally(() => {
-        setLoading(false);
-      });
-  }, []);
-
   const toggleMode = useCallback(() => {
     const _mode = mode === "dark" ? "light" : "dark";
 
@@ -103,7 +84,7 @@ export const ThemeProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
       changeTheme,
     }}>
       <TamaguiTheme name={`${theme}_${mode}`}>
-        {!loading && children}
+        {children}
       </TamaguiTheme>
     </ThemeContext.Provider>
   );