From 1a53fa324b8bfdec1ba0ace64ec27b28f6441cde Mon Sep 17 00:00:00 2001 From: Brandon Presley Date: Mon, 31 Oct 2022 21:32:33 +1300 Subject: [PATCH] Remove redundant Color context Settings already stores the color set by the user. --- App.tsx | 70 ++++++++++++++++++++++------------------------ Chart.tsx | 6 ++-- MassiveFab.tsx | 12 ++++---- SettingsPage.tsx | 25 +++++++++-------- StartPlanItem.tsx | 7 ++--- Switch.tsx | 13 ++++----- color.ts | 11 -------- mock-providers.tsx | 19 +++++-------- use-settings.ts | 3 +- 9 files changed, 76 insertions(+), 90 deletions(-) delete mode 100644 color.ts diff --git a/App.tsx b/App.tsx index 573238e..72586fd 100644 --- a/App.tsx +++ b/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() - const [color, setColor] = useState( - isDark - ? CombinedDarkTheme.colors.primary.toUpperCase() - : CombinedDefaultTheme.colors.primary.toUpperCase(), - ) + const [settings, setSettings] = useState({ + ...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 ( - - }}> - - - {initialized && ( - - - - )} - - - - + }}> + + + {initialized && ( + + + + )} + + + ) } diff --git a/Chart.tsx b/Chart.tsx index ae27db0..75fe5ec 100644 --- a/Chart.tsx +++ b/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, }}> diff --git a/MassiveFab.tsx b/MassiveFab.tsx index 0991091..7f45f1d 100644 --- a/MassiveFab.tsx +++ b/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>) { - 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>) { position: 'absolute', right: 10, bottom: 10, - backgroundColor: color, + backgroundColor: colors.primary, }} {...props} /> diff --git a/SettingsPage.tsx b/SettingsPage.tsx index 835e3d4..748d846 100644 --- a/SettingsPage.tsx +++ b/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 ( @@ -183,7 +181,12 @@ export default function SettingsPage() { ) - }, [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()) && ( setColor(value)}> + style={{color: settings.color, marginTop: -10}} + dropdownIconColor={settings.color} + selectedValue={settings.color} + onValueChange={changeColor}> {lightColors.concat(darkColors).map(colorOption => ( diff --git a/StartPlanItem.tsx b/StartPlanItem.tsx index cce51ce..e51fd29 100644 --- a/StartPlanItem.tsx +++ b/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 { 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} /> )} diff --git a/Switch.tsx b/Switch.tsx index 11f6f5d..2c86b50 100644 --- a/Switch.tsx +++ b/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 ( {}, -}) - -export const useColor = () => { - const context = useContext(Color) - return context -} diff --git a/mock-providers.tsx b/mock-providers.tsx index 60af785..386bc92 100644 --- a/mock-providers.tsx +++ b/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[] }) => ( - - }}> - - - {children} - - - - + }}> + + + {children} + + + ) diff --git a/use-settings.ts b/use-settings.ts index f955a55..10f2caa 100644 --- a/use-settings.ts +++ b/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,