Remove redundant Color context
Settings already stores the color set by the user.
This commit is contained in:
parent
13ca9cef3e
commit
1a53fa324b
70
App.tsx
70
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>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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>
|
||||
)}
|
||||
|
|
13
Switch.tsx
13
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}
|
||||
|
|
11
color.ts
11
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
|
||||
}
|
|
@ -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>
|
||||
)
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue
Block a user