theme: move to keyValue, reduce boilerplate

tloncorp · Nov 21, 2024 · 9ef5842 · 9ef5842
1 parent 330bc99
commit 9ef5842
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 11 deletions.
diff --git a/packages/app/constants.ts b/packages/app/constants.ts
@@ -49,4 +49,3 @@ export const BRANCH_KEY = extra.branchKey ?? '';
 export const BRANCH_DOMAIN = extra.branchDomain ?? '';
 export const INVITE_SERVICE_ENDPOINT = extra.inviteServiceEndpoint ?? '';
 export const INVITE_SERVICE_IS_DEV = extra.inviteServiceIsDev === 'true';
-export const THEME_STORAGE_KEY = '@user_theme';
diff --git a/packages/app/provider/index.tsx b/packages/app/provider/index.tsx
@@ -1,11 +1,10 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
+import { themeSettings } from '@tloncorp/shared/db';
 import { config } from '@tloncorp/ui';
 import { useEffect, useState } from 'react';
 import React from 'react';
 import { TamaguiProvider, TamaguiProviderProps } from 'tamagui';
 import type { ThemeName } from 'tamagui';
 
-import { THEME_STORAGE_KEY } from '../constants';
 import { useIsDarkMode } from '../hooks/useIsDarkMode';
 
 export const ThemeContext = React.createContext<{
@@ -24,9 +23,7 @@ export function Provider({
   useEffect(() => {
     const loadStoredTheme = async () => {
       try {
-        const storedTheme = (await AsyncStorage.getItem(
-          THEME_STORAGE_KEY
-        )) as ThemeName | null;
+        const storedTheme = await themeSettings.getValue();
         if (storedTheme) {
           setActiveTheme(storedTheme);
         } else {
@@ -41,13 +38,11 @@ export function Provider({
     loadStoredTheme();
   }, [isDarkMode]);
 
-  // Handle system theme changes
   useEffect(() => {
     const handleSystemThemeChange = async () => {
       try {
-        const storedTheme = await AsyncStorage.getItem(THEME_STORAGE_KEY);
+        const storedTheme = await themeSettings.getValue();
         if (!storedTheme) {
-          // Only update if in "auto" mode (no stored theme)
           setActiveTheme(isDarkMode ? 'dark' : 'light');
         }
       } catch (error) {
@@ -72,7 +67,7 @@ export const setTheme = async (
   setActiveTheme: (theme: ThemeName) => void
 ) => {
   try {
-    await AsyncStorage.setItem(THEME_STORAGE_KEY, theme);
+    await themeSettings.setValue(theme);
     setActiveTheme(theme);
   } catch (error) {
     console.warn('Failed to save theme preference:', error);
@@ -84,7 +79,7 @@ export const clearTheme = async (
   isDarkMode: boolean
 ) => {
   try {
-    await AsyncStorage.removeItem(THEME_STORAGE_KEY);
+    await themeSettings.resetValue();
     setActiveTheme(isDarkMode ? 'dark' : 'light');
   } catch (error) {
     console.warn('Failed to clear theme preference:', error);

diff --git a/packages/shared/src/db/keyValue.ts b/packages/shared/src/db/keyValue.ts
@@ -1,5 +1,6 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { useQuery } from '@tanstack/react-query';
+import { ThemeName } from 'tamagui';
 
 import {
   StorageConfiguration,
@@ -27,6 +28,7 @@ export const IS_TLON_EMPLOYEE_QUERY_KEY = ['settings', 'isTlonEmployee'];
 export const APP_INFO_QUERY_KEY = ['settings', 'appInfo'];
 export const BASE_VOLUME_SETTING_QUERY_KEY = ['volume', 'base'];
 export const SHOW_BENEFITS_SHEET_QUERY_KEY = ['showBenefitsSheet'];
+export const THEME_STORAGE_KEY = '@user_theme';
 
 export type ChannelSortPreference = 'recency' | 'arranged';
 export async function storeChannelSortPreference(
@@ -295,3 +297,8 @@ export const finishingSelfHostedLogin = createStorageItem<boolean>({
   key: 'finishingSelfHostedLogin',
   defaultValue: false,
 });
+
+export const themeSettings = createStorageItem<ThemeName | null>({
+  key: THEME_STORAGE_KEY,
+  defaultValue: null,
+});