Remove redundant Color context

Settings already stores the color set by the user.

App.tsx

@@ -11,14 +11,13 @@ import {
   Provider as PaperProvider,
 } from 'react-native-paper'
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
-import {Color} from './color'
 import {lightColors} from './colors'
 import {AppDataSource} from './data-source'
 import {settingsRepo} from './db'
 import MassiveSnack from './MassiveSnack'
 import Routes from './Routes'
 import Settings from './settings'
-import {SettingsContext} from './use-settings'
+import {defaultSettings, SettingsContext} from './use-settings'
 
 export const CombinedDefaultTheme = {
   ...NavigationDefaultTheme,
@@ -43,61 +42,60 @@ export const CombinedDarkTheme = {
 const App = () => {
   const isDark = useColorScheme() === 'dark'
   const [initialized, setInitialized] = useState(false)
-  const [settings, setSettings] = useState<Settings>()
-  const [color, setColor] = useState(
-    isDark
-      ? CombinedDarkTheme.colors.primary.toUpperCase()
-      : CombinedDefaultTheme.colors.primary.toUpperCase(),
-  )
+  const [settings, setSettings] = useState<Settings>({
+    ...defaultSettings,
+    color: isDark
+      ? CombinedDarkTheme.colors.primary
+      : CombinedDefaultTheme.colors.primary,
+  })
 
   useEffect(() => {
     AppDataSource.initialize().then(async () => {
       const gotSettings = await settingsRepo.findOne({where: {}})
       console.log(`${App.name}.useEffect:`, {gotSettings})
       setSettings(gotSettings)
-      if (gotSettings.color) setColor(gotSettings.color)
       setInitialized(true)
     })
-  }, [setColor])
+  }, [])
 
   const theme = useMemo(() => {
-    const darkTheme = {
-      ...CombinedDarkTheme,
-      colors: {...CombinedDarkTheme.colors, primary: color},
-    }
-    const lightTheme = {
-      ...CombinedDefaultTheme,
-      colors: {...CombinedDefaultTheme.colors, primary: color},
-    }
+    const darkTheme = settings?.color
+      ? {
+          ...CombinedDarkTheme,
+          colors: {...CombinedDarkTheme.colors, primary: settings.color},
+        }
+      : CombinedDarkTheme
+    const lightTheme = settings?.color
+      ? {
+          ...CombinedDefaultTheme,
+          colors: {...CombinedDefaultTheme.colors, primary: settings.color},
+        }
+      : CombinedDefaultTheme
     let value = isDark ? darkTheme : lightTheme
     if (settings?.theme === 'dark') value = darkTheme
     else if (settings?.theme === 'light') value = lightTheme
     return value
-  }, [color, isDark, settings])
+  }, [isDark, settings?.theme, settings?.color])
 
   const settingsContext = useMemo(
     () => ({settings, setSettings}),
     [settings, setSettings],
   )
 
-  const colorContext = useMemo(() => ({color, setColor}), [color, setColor])
-
   return (
-    <Color.Provider value={colorContext}>
-      <PaperProvider
-        theme={theme}
-        settings={{icon: props => <MaterialIcon {...props} />}}>
-        <NavigationContainer theme={theme}>
-          <MassiveSnack>
-            {initialized && (
-              <SettingsContext.Provider value={settingsContext}>
-                <Routes />
-              </SettingsContext.Provider>
-            )}
-          </MassiveSnack>
-        </NavigationContainer>
-      </PaperProvider>
-    </Color.Provider>
+    <PaperProvider
+      theme={theme}
+      settings={{icon: props => <MaterialIcon {...props} />}}>
+      <NavigationContainer theme={theme}>
+        <MassiveSnack>
+          {initialized && (
+            <SettingsContext.Provider value={settingsContext}>
+              <Routes />
+            </SettingsContext.Provider>
+          )}
+        </MassiveSnack>
+      </NavigationContainer>
+    </PaperProvider>
   )
 }
 

Chart.tsx

@@ -1,8 +1,8 @@
+import {useTheme} from '@react-navigation/native'
 import * as shape from 'd3-shape'
 import {View} from 'react-native'
 import {Grid, LineChart, XAxis, YAxis} from 'react-native-svg-charts'
 import {CombinedDarkTheme, CombinedDefaultTheme} from './App'
-import {useColor} from './color'
 import {MARGIN, PADDING} from './constants'
 import GymSet from './gym-set'
 import useDark from './use-dark'
@@ -18,7 +18,7 @@ export default function Chart({
   xFormat: (value: any, index: number) => string
   yFormat: (value: any) => string
 }) {
-  const {color} = useColor()
+  const {colors} = useTheme()
   const dark = useDark()
   const axesSvg = {
     fontSize: 10,
@@ -46,7 +46,7 @@ export default function Chart({
             contentInset={verticalContentInset}
             curve={shape.curveBasis}
             svg={{
-              stroke: color,
+              stroke: colors.primary,
             }}>
             <Grid />
           </LineChart>

MassiveFab.tsx

@@ -1,11 +1,13 @@
 import {ComponentProps} from 'react'
-import {FAB} from 'react-native-paper'
-import {useColor} from './color'
+import {FAB, useTheme} from 'react-native-paper'
 import {lightColors} from './colors'
 
 export default function MassiveFab(props: Partial<ComponentProps<typeof FAB>>) {
-  const {color} = useColor()
-  const fabColor = lightColors.map(lightColor => lightColor.hex).includes(color)
+  const {colors} = useTheme()
+
+  const fabColor = lightColors
+    .map(lightColor => lightColor.hex)
+    .includes(colors.primary)
     ? 'black'
     : undefined
 
@@ -17,7 +19,7 @@ export default function MassiveFab(props: Partial<ComponentProps<typeof FAB>>) {
         position: 'absolute',
         right: 10,
         bottom: 10,
-        backgroundColor: color,
+        backgroundColor: colors.primary,
       }}
       {...props}
     />

SettingsPage.tsx

@@ -4,7 +4,6 @@ import {useCallback, useEffect, useMemo, useState} from 'react'
 import {NativeModules, ScrollView} from 'react-native'
 import DocumentPicker from 'react-native-document-picker'
 import {Button} from 'react-native-paper'
-import {useColor} from './color'
 import {darkColors, lightColors} from './colors'
 import ConfirmDialog from './ConfirmDialog'
 import {MARGIN} from './constants'
@@ -22,7 +21,6 @@ export default function SettingsPage() {
   const [ignoring, setIgnoring] = useState(false)
   const [term, setTerm] = useState('')
   const {settings, setSettings} = useSettings()
-  const {color, setColor} = useColor()
   const {toast} = useSnackbar()
 
   useEffect(() => {
@@ -174,8 +172,8 @@ export default function SettingsPage() {
     if (!'theme'.includes(term.toLowerCase())) return null
     return (
       <Picker
-        style={{color}}
-        dropdownIconColor={color}
+        style={{color: settings.color}}
+        dropdownIconColor={settings.color}
         selectedValue={settings.theme}
         onValueChange={changeTheme}>
         <Picker.Item value="system" label="Follow system theme" />
@@ -183,7 +181,12 @@ export default function SettingsPage() {
         <Picker.Item value="light" label="Light theme" />
       </Picker>
     )
-  }, [term, color, changeTheme, settings.theme])
+  }, [term, settings.color, changeTheme, settings.theme])
+
+  const changeColor = useCallback((value: string) => {
+    setSettings({...settings, color: value})
+    settingsRepo.update({}, {color: value})
+  }, [])
 
   return (
     <>
@@ -206,10 +209,10 @@ export default function SettingsPage() {
           {theme}
           {'color'.includes(term.toLowerCase()) && (
             <Picker
-              style={{color, marginTop: -10}}
-              dropdownIconColor={color}
-              selectedValue={color}
-              onValueChange={value => setColor(value)}>
+              style={{color: settings.color, marginTop: -10}}
+              dropdownIconColor={settings.color}
+              selectedValue={settings.color}
+              onValueChange={changeColor}>
               {lightColors.concat(darkColors).map(colorOption => (
                 <Picker.Item
                   key={colorOption.hex}
@@ -222,8 +225,8 @@ export default function SettingsPage() {
           )}
           {'date format'.includes(term.toLowerCase()) && (
             <Picker
-              style={{color, marginTop: -10}}
-              dropdownIconColor={color}
+              style={{color: settings.color, marginTop: -10}}
+              dropdownIconColor={settings.color}
               selectedValue={settings.date}
               onValueChange={changeDate}>
               <Picker.Item value="%Y-%m-%d %H:%M" label="1990-12-24 15:05" />

StartPlanItem.tsx

@@ -1,7 +1,6 @@
 import React, {useCallback, useState} from 'react'
 import {GestureResponderEvent, ListRenderItemInfo, View} from 'react-native'
-import {List, Menu, RadioButton} from 'react-native-paper'
-import {useColor} from './color'
+import {List, Menu, RadioButton, useTheme} from 'react-native-paper'
 import CountMany from './count-many'
 import {setRepo} from './db'
 
@@ -13,7 +12,7 @@ interface Props extends ListRenderItemInfo<CountMany> {
 
 export default function StartPlanItem(props: Props) {
   const {index, item, onSelect, selected, onUndo} = props
-  const {color} = useColor()
+  const {colors} = useTheme()
   const [anchor, setAnchor] = useState({x: 0, y: 0})
   const [showMenu, setShowMenu] = useState(false)
 
@@ -48,7 +47,7 @@ export default function StartPlanItem(props: Props) {
             onPress={() => onSelect(index)}
             value={index.toString()}
             status={selected === index ? 'checked' : 'unchecked'}
-            color={color}
+            color={colors.primary}
           />
         </View>
       )}

Switch.tsx

@@ -1,8 +1,7 @@
 import {useMemo} from 'react'
 import {Pressable} from 'react-native'
-import {Switch as PaperSwitch, Text} from 'react-native-paper'
+import {Switch as PaperSwitch, Text, useTheme} from 'react-native-paper'
 import {CombinedDarkTheme, CombinedDefaultTheme} from './App'
-import {useColor} from './color'
 import {colorShade} from './colors'
 import {MARGIN} from './constants'
 import useDark from './use-dark'
@@ -18,20 +17,20 @@ export default function Switch({
   onPress: () => void
   children: string
 }) {
-  const {color} = useColor()
+  const {colors} = useTheme()
   const dark = useDark()
 
   const track = useMemo(() => {
     if (dark)
       return {
         false: CombinedDarkTheme.colors.placeholder,
-        true: colorShade(color, -40),
+        true: colorShade(colors.primary, -40),
       }
     return {
       false: CombinedDefaultTheme.colors.placeholder,
-      true: colorShade(color, -40),
+      true: colorShade(colors.primary, -40),
     }
-  }, [dark, color])
+  }, [dark, colors.primary])
 
   return (
     <Pressable
@@ -43,7 +42,7 @@ export default function Switch({
       }}>
       <PaperSwitch
         trackColor={track}
-        color={color}
+        color={colors.primary}
         style={{marginRight: MARGIN}}
         value={value}
         onValueChange={onValueChange}

color.ts

@@ -1,11 +0,0 @@
-import React, {useContext} from 'react'
-
-export const Color = React.createContext({
-  color: '',
-  setColor: (_value: string) => {},
-})
-
-export const useColor = () => {
-  const context = useContext(Color)
-  return context
-}

mock-providers.tsx

@@ -1,13 +1,10 @@
 import {NavigationContainer} from '@react-navigation/native'
 import React from 'react'
 import {Provider as PaperProvider} from 'react-native-paper'
-import {Color} from './color'
-import {lightColors} from './colors'
 import MassiveSnack from './MassiveSnack'
 import {defaultSettings, SettingsContext} from './use-settings'
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
 
-const color = lightColors[0].hex
 export const setColor = jest.fn()
 const settings = defaultSettings
 export const setSettings = jest.fn()
@@ -17,13 +14,11 @@ export const MockProviders = ({
 }: {
   children: JSX.Element | JSX.Element[]
 }) => (
-  <Color.Provider value={{color, setColor}}>
-    <PaperProvider settings={{icon: props => <MaterialIcon {...props} />}}>
-      <SettingsContext.Provider value={{settings, setSettings}}>
-        <MassiveSnack>
-          <NavigationContainer>{children}</NavigationContainer>
-        </MassiveSnack>
-      </SettingsContext.Provider>
-    </PaperProvider>
-  </Color.Provider>
+  <PaperProvider settings={{icon: props => <MaterialIcon {...props} />}}>
+    <SettingsContext.Provider value={{settings, setSettings}}>
+      <MassiveSnack>
+        <NavigationContainer>{children}</NavigationContainer>
+      </MassiveSnack>
+    </SettingsContext.Provider>
+  </PaperProvider>
 )

use-settings.ts

@@ -1,9 +1,10 @@
 import React, {useContext} from 'react'
+import {darkColors} from './colors'
 import Settings from './settings'
 
 export const defaultSettings: Settings = {
   alarm: true,
-  color: '',
+  color: darkColors[0].hex,
   date: '',
   images: true,
   notify: false,