New theme selector

cmgustavo · Aug 28, 2024 · 204919f · 204919f
1 parent 1047ec3
commit 204919f
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 59 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,47 +1,22 @@
-import React, {useCallback, useEffect, useState} from 'react';
-import {useColorScheme, ColorSchemeName, Appearance} from 'react-native';
+import React, {useEffect} from 'react';
 
-import {NavigationContainer} from '@react-navigation/native';
-
-import {useAppDispatch, useAppSelector, RootState} from './store';
+import {useAppDispatch} from './store';
 import {initializeApp} from './store/app';
 import MainNavigation from './components/main-navigation';
-import CombinedDefaultTheme from './themes/light';
-import CombinedDarkTheme from './themes/dark';
 
-import {PaperProvider} from 'react-native-paper';
+import {PreferencesProvider} from './context/PreferencesContext';
 
 const App = () => {
   const dispatch = useAppDispatch();
-  const _theme = useAppSelector(({APP}: RootState) => APP.appTheme);
-
-  const [theme, setTheme] = useState<ColorSchemeName>(useColorScheme());
-
-  const themeChangeListener = useCallback(() => {
-    if (!theme) {
-      setTheme(Appearance.getColorScheme());
-    }
-  }, []);
-
-  useEffect(() => {
-    Appearance.addChangeListener(themeChangeListener);
-    return () => {
-      Appearance.addChangeListener(themeChangeListener);
-    };
-  }, [themeChangeListener]);
 
   useEffect(() => {
     dispatch(initializeApp());
   }, []);
 
   return (
-    <PaperProvider
-      theme={theme === 'dark' ? CombinedDarkTheme : CombinedDefaultTheme}>
-      <NavigationContainer
-        theme={theme === 'dark' ? CombinedDarkTheme : CombinedDefaultTheme}>
-        <MainNavigation />
-      </NavigationContainer>
-    </PaperProvider>
+    <PreferencesProvider>
+      <MainNavigation />
+    </PreferencesProvider>
   );
 };
 

diff --git a/src/context/PreferencesContext.tsx b/src/context/PreferencesContext.tsx
@@ -0,0 +1,60 @@
+import React, {createContext, useState, useEffect, useContext} from 'react';
+import {useColorScheme, ColorSchemeName} from 'react-native';
+import {useAppDispatch, useAppSelector, RootState} from '../store';
+import {setColorScheme} from '../store/app/app.actions';
+import {PaperProvider} from 'react-native-paper';
+import {NavigationContainer} from '@react-navigation/native';
+import CombinedDefaultTheme from '../themes/light';
+import CombinedDarkTheme from '../themes/dark';
+
+// Define the type for your context
+type PreferencesContextType = {
+  setColorTheme: (theme: ColorSchemeName) => void;
+  colorTheme: ColorSchemeName;
+};
+
+export const PreferencesContext = createContext<PreferencesContextType>({
+  setColorTheme: (theme: ColorSchemeName) => {},
+  colorTheme: null,
+});
+
+export const PreferencesProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const _theme = useAppSelector(({APP}: RootState) => APP.colorScheme);
+  const [colorTheme, setColorTheme] = useState<ColorSchemeName>(_theme);
+  const dispatch = useAppDispatch();
+  const systemColorScheme = useColorScheme();
+  let appTheme;
+  if (!colorTheme) {
+    appTheme =
+      systemColorScheme === 'dark' ? CombinedDarkTheme : CombinedDefaultTheme;
+  } else {
+    appTheme = colorTheme === 'dark' ? CombinedDarkTheme : CombinedDefaultTheme;
+  }
+
+  useEffect(() => {
+    if (!colorTheme) {
+      appTheme =
+        systemColorScheme === 'dark' ? CombinedDarkTheme : CombinedDefaultTheme;
+    }
+  }, [systemColorScheme]);
+
+  const handleSetColorTheme = (theme: ColorSchemeName) => {
+    setColorTheme(theme);
+    dispatch(setColorScheme(theme));
+  };
+
+  return (
+    <PreferencesContext.Provider
+      value={{colorTheme, setColorTheme: handleSetColorTheme}}>
+      <PaperProvider theme={appTheme}>
+        <NavigationContainer theme={appTheme}>{children}</NavigationContainer>
+      </PaperProvider>
+    </PreferencesContext.Provider>
+  );
+};
+
+export const usePreferences = () => useContext(PreferencesContext);
diff --git a/src/screens/preferences.tsx b/src/screens/preferences.tsx
@@ -1,47 +1,51 @@
-import React, {useState} from 'react';
+import React, {useState, useContext} from 'react';
 import {View, Text, TouchableOpacity, Appearance} from 'react-native';
 import {RadioButton, List} from 'react-native-paper';
 import {useAppDispatch, useAppSelector, RootState} from '../store';
-import {useTheme} from 'react-native-paper';
+import {useTheme, Switch} from 'react-native-paper';
 import {useColorScheme, ColorSchemeName} from 'react-native';
 
-import {appTheme} from '../store/app/app.actions';
+import {
+  PreferencesContext,
+  usePreferences,
+} from '../context/PreferencesContext';
 import {ContainerStyles, GlobalStyles, TextStyles} from '../styles';
 
 const Preferences = ({route, navigation}) => {
   const dispatch = useAppDispatch();
-  const {colors} = useTheme();
-  const _theme = useAppSelector(({APP}: RootState) => APP.appTheme);
-  const [theme, setTheme] = useState<ColorSchemeName>(_theme);
-  const [checked, setChecked] = useState(theme);
+  const theme = useTheme();
+
+  const {colorTheme, setColorTheme} = usePreferences();
+  console.log('[preferences.tsx:16]', colorTheme); /* TODO */
+
+  const [checked, setChecked] = useState(colorTheme);
+  console.log('[preferences.tsx:19]', checked); /* TODO */
 
   const handleThemeChange = (newTheme: ColorSchemeName) => {
+    setColorTheme(newTheme);
     setChecked(newTheme);
-    dispatch(appTheme(newTheme));
-    setTheme(newTheme);
-    Appearance.setColorScheme(newTheme);
   };
 
   return (
     <View
       style={[
         ContainerStyles.globalContainer,
-        {backgroundColor: colors.background},
+        {backgroundColor: theme.colors.background},
       ]}>
       <List.Section>
-        <Text style={[TextStyles.optionsTitle, {color: colors.primary}]}>
+        <Text style={[TextStyles.optionsTitle, {color: theme.colors.primary}]}>
           Theme
         </Text>
         <TouchableOpacity
           onPress={() => handleThemeChange('light')}
           style={[
             GlobalStyles.itemContainer,
             {
-              backgroundColor: colors.background,
-              borderBottomColor: colors.surfaceVariant,
+              backgroundColor: theme.colors.background,
+              borderBottomColor: theme.colors.surfaceVariant,
             },
           ]}>
-          <Text style={[GlobalStyles.itemText, {color: colors.primary}]}>
+          <Text style={[GlobalStyles.itemText, {color: theme.colors.primary}]}>
             Light
           </Text>
           <RadioButton
@@ -55,11 +59,11 @@ const Preferences = ({route, navigation}) => {
           style={[
             GlobalStyles.itemContainer,
             {
-              backgroundColor: colors.background,
-              borderBottomColor: colors.surfaceVariant,
+              backgroundColor: theme.colors.background,
+              borderBottomColor: theme.colors.surfaceVariant,
             },
           ]}>
-          <Text style={[GlobalStyles.itemText, {color: colors.primary}]}>
+          <Text style={[GlobalStyles.itemText, {color: theme.colors.primary}]}>
             Dark
           </Text>
           <RadioButton
@@ -73,11 +77,11 @@ const Preferences = ({route, navigation}) => {
           style={[
             GlobalStyles.itemContainer,
             {
-              backgroundColor: colors.background,
-              borderBottomColor: colors.surfaceVariant,
+              backgroundColor: theme.colors.background,
+              borderBottomColor: theme.colors.surfaceVariant,
             },
           ]}>
-          <Text style={[GlobalStyles.itemText, {color: colors.primary}]}>
+          <Text style={[GlobalStyles.itemText, {color: theme.colors.primary}]}>
             System
           </Text>
           <RadioButton

diff --git a/src/store/app/app.actions.ts b/src/store/app/app.actions.ts
@@ -9,7 +9,7 @@ export const appFailed = (): AppActionType => ({
   type: AppActionTypes.APP_FAILED,
 });
 
-export const appTheme = (theme: ColorSchemeName): AppActionType => ({
+export const setColorScheme = (theme: ColorSchemeName): AppActionType => ({
   type: AppActionTypes.APP_THEME,
   payload: theme,
 });
diff --git a/src/store/app/app.reducer.ts b/src/store/app/app.reducer.ts
@@ -5,12 +5,12 @@ export const AppReduxPersistBlackList: (keyof AppState)[] = ['appStatus'];
 
 export interface AppState {
   appStatus: AppStatus;
-  appTheme: ColorSchemeName;
+  colorScheme: ColorSchemeName;
 }
 
 const initialState: AppState = {
   appStatus: 'loading',
-  appTheme: null,
+  colorScheme: null,
 };
 
 export const AppReducer = (
@@ -31,7 +31,7 @@ export const AppReducer = (
     case AppActionTypes.APP_THEME:
       return {
         ...state,
-        appTheme: action.payload,
+        colorScheme: action.payload,
       };
     default:
       return state;

diff --git a/src/store/app/app.types.ts b/src/store/app/app.types.ts
@@ -15,9 +15,9 @@ interface AppFailed {
   type: typeof AppActionTypes.APP_FAILED;
 }
 
-interface AppThemeAction {
+interface AppColorScheme {
   type: typeof AppActionTypes.APP_THEME;
   payload: ColorSchemeName;
 }
 
-export type AppActionType = AppSuccess | AppFailed | AppThemeAction;
+export type AppActionType = AppSuccess | AppFailed | AppColorScheme;
diff --git a/src/store/app/index.ts b/src/store/app/index.ts
@@ -1,2 +1,2 @@
-export {appSuccess, appFailed, appTheme} from './app.actions';
+export {appSuccess, appFailed, setColorScheme} from './app.actions';
 export {initializeApp} from './app.effects';
diff --git a/src/styles/global.js b/src/styles/global.js
@@ -10,11 +10,18 @@ export const GlobalStyles = StyleSheet.create({
   itemContainer: {
     flexDirection: 'row',
     alignItems: 'center',
+    backgroundColor: '#fff',
     padding: 15,
     borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0',
   },
   itemText: {
     flex: 1,
     fontSize: 16,
   },
+  subheader: {
+    padding: 10,
+    color: '#6e6e6e',
+    fontSize: 18,
+  },
 });