From 4303fe2cc43d491086db58be647f61e617ae932c Mon Sep 17 00:00:00 2001 From: Brandon Presley Date: Tue, 27 Jun 2023 15:16:59 +1200 Subject: [PATCH] Use deno fmt instead of prettier --- .prettierrc.js | 8 --- App.tsx | 37 ++++++----- AppFab.tsx | 16 ++--- AppInput.tsx | 10 +-- BestList.tsx | 56 ++++++++++------- BestPage.tsx | 9 +-- Chart.tsx | 28 +++++---- ConfirmDialog.tsx | 2 +- DrawerHeader.tsx | 10 +-- EditPlan.tsx | 96 ++++++++++++++-------------- EditSet.tsx | 94 ++++++++++++++------------- EditSets.tsx | 70 +++++++++++---------- EditWorkout.tsx | 61 +++++++++--------- HomePage.tsx | 13 ++-- ListMenu.tsx | 38 +++++------ Page.tsx | 12 ++-- PlanItem.tsx | 49 ++++++++------- PlanList.tsx | 60 +++++++++--------- PlanPage.tsx | 15 ++--- Routes.tsx | 33 +++++----- Select.tsx | 27 ++++---- SetItem.tsx | 33 +++++----- SetList.tsx | 70 +++++++++++---------- SettingsPage.tsx | 122 +++++++++++++++++++----------------- StackHeader.tsx | 6 +- StartPlan.tsx | 63 ++++++++++--------- StartPlanItem.tsx | 53 ++++++++-------- Switch.tsx | 15 ++--- TimerPage.tsx | 35 ++++++----- ViewBest.tsx | 86 +++++++++++++------------ WorkoutItem.tsx | 43 +++++++------ WorkoutList.tsx | 52 +++++++-------- WorkoutsPage.tsx | 9 +-- best.service.ts | 10 +-- colors.ts | 25 ++++---- data-source.ts | 54 ++++++++-------- db.ts | 6 +- deno.json | 11 ++++ gym-set.ts | 2 +- input.ts | 2 +- jestSetup.ts | 2 +- mock-providers.tsx | 9 +-- options.ts | 12 ++-- organize.sh | 2 +- plan-page-params.ts | 2 +- plan.ts | 2 +- route.ts | 2 +- settings.ts | 2 +- tests/App.test.tsx | 4 +- tests/BestPage.test.tsx | 12 ++-- tests/EditPlan.test.tsx | 22 +++---- tests/EditSet.test.tsx | 18 +++--- tests/EditSets.test.tsx | 26 ++++---- tests/EditWorkout.test.tsx | 14 ++--- tests/HomePage.test.tsx | 10 +-- tests/PlanList.test.tsx | 12 ++-- tests/PlanPage.test.tsx | 10 +-- tests/SettingsPage.test.tsx | 10 +-- tests/StartPlan.test.tsx | 30 ++++----- tests/TimerPage.test.tsx | 10 +-- tests/ViewBest.test.tsx | 20 +++--- tests/WorkoutsPage.test.tsx | 10 +-- toast.ts | 4 +- use-dark.ts | 6 +- use-theme.ts | 4 +- use-timer.ts | 12 ++-- write.ts | 9 +-- 67 files changed, 897 insertions(+), 820 deletions(-) delete mode 100644 .prettierrc.js create mode 100644 deno.json diff --git a/.prettierrc.js b/.prettierrc.js deleted file mode 100644 index a6271df..0000000 --- a/.prettierrc.js +++ /dev/null @@ -1,8 +0,0 @@ -module.exports = { - arrowParens: 'avoid', - bracketSameLine: true, - bracketSpacing: false, - singleQuote: true, - trailingComma: 'all', - semi: false, -}; diff --git a/App.tsx b/App.tsx index 309344b..cd2e193 100644 --- a/App.tsx +++ b/App.tsx @@ -3,8 +3,8 @@ import { DefaultTheme as NavigationDefaultTheme, NavigationContainer, } from '@react-navigation/native' -import React, {useEffect, useMemo, useState} from 'react' -import {DeviceEventEmitter, useColorScheme} from 'react-native' +import React, { useEffect, useMemo, useState } from 'react' +import { DeviceEventEmitter, useColorScheme } from 'react-native' import { DarkTheme as PaperDarkTheme, DefaultTheme as PaperDefaultTheme, @@ -12,11 +12,11 @@ import { Snackbar, } from 'react-native-paper' import MaterialIcon from 'react-native-vector-icons/MaterialIcons' -import {AppDataSource} from './data-source' -import {settingsRepo} from './db' +import { AppDataSource } from './data-source' +import { settingsRepo } from './db' import Routes from './Routes' -import {TOAST} from './toast' -import {ThemeContext} from './use-theme' +import { TOAST } from './toast' +import { ThemeContext } from './use-theme' export const CombinedDefaultTheme = { ...NavigationDefaultTheme, @@ -53,7 +53,7 @@ const App = () => { useEffect(() => { ;(async () => { if (!AppDataSource.isInitialized) await AppDataSource.initialize() - const settings = await settingsRepo.findOne({where: {}}) + const settings = await settingsRepo.findOne({ where: {} }) setTheme(settings.theme) if (settings.lightColor) setLightColor(settings.lightColor) if (settings.darkColor) setDarkColor(settings.darkColor) @@ -61,7 +61,7 @@ const App = () => { })() const description = DeviceEventEmitter.addListener( TOAST, - ({value}: {value: string}) => { + ({ value }: { value: string }) => { setSnackbar(value) }, ) @@ -71,15 +71,15 @@ const App = () => { const paperTheme = useMemo(() => { const darkTheme = lightColor ? { - ...CombinedDarkTheme, - colors: {...CombinedDarkTheme.colors, primary: darkColor}, - } + ...CombinedDarkTheme, + colors: { ...CombinedDarkTheme.colors, primary: darkColor }, + } : CombinedDarkTheme const lightTheme = lightColor ? { - ...CombinedDefaultTheme, - colors: {...CombinedDefaultTheme.colors, primary: lightColor}, - } + ...CombinedDefaultTheme, + colors: { ...CombinedDefaultTheme.colors, primary: lightColor }, + } : CombinedDefaultTheme let value = isDark ? darkTheme : lightTheme if (theme === 'dark') value = darkTheme @@ -99,7 +99,8 @@ const App = () => { return ( }}> + settings={{ icon: (props) => }} + > {initialized && ( { setLightColor, darkColor, setDarkColor, - }}> + }} + > )} @@ -120,7 +122,8 @@ const App = () => { duration={3000} onDismiss={() => setSnackbar('')} visible={!!snackbar} - action={action}> + action={action} + > {snackbar} diff --git a/AppFab.tsx b/AppFab.tsx index 6449c19..f5ec31d 100644 --- a/AppFab.tsx +++ b/AppFab.tsx @@ -1,14 +1,14 @@ -import {ComponentProps, useMemo} from 'react' -import {FAB, useTheme} from 'react-native-paper' -import {CombinedDarkTheme, CombinedDefaultTheme} from './App' -import {lightColors} from './colors' +import { ComponentProps, useMemo } from 'react' +import { FAB, useTheme } from 'react-native-paper' +import { CombinedDarkTheme, CombinedDefaultTheme } from './App' +import { lightColors } from './colors' export default function AppFab(props: Partial>) { - const {colors} = useTheme() + const { colors } = useTheme() const fabColor = useMemo( () => - lightColors.map(color => color.hex).includes(colors.primary) + lightColors.map((color) => color.hex).includes(colors.primary) ? CombinedDarkTheme.colors.background : CombinedDefaultTheme.colors.background, [colors.primary], @@ -16,8 +16,8 @@ export default function AppFab(props: Partial>) { return ( { - settingsRepo.findOne({where: {}}).then(setSettings) + settingsRepo.findOne({ where: {} }).then(setSettings) }, []), ) @@ -30,19 +30,19 @@ export default function BestList() { .createQueryBuilder() .select() .addSelect('MAX(weight)', 'weight') - .where('name LIKE :name', {name: `%${value.trim()}%`}) + .where('name LIKE :name', { name: `%${value.trim()}%` }) .andWhere('NOT hidden') .groupBy('name') .getMany() - console.log(`${BestList.name}.refresh:`, {length: weights.length}) + console.log(`${BestList.name}.refresh:`, { length: weights.length }) let newBest: GymSet[] = [] for (const set of weights) { const reps = await setRepo .createQueryBuilder() .select() .addSelect('MAX(reps)', 'reps') - .where('name = :name', {name: set.name}) - .andWhere('weight = :weight', {weight: set.weight}) + .where('name = :name', { name: set.name }) + .andWhere('weight = :weight', { weight: set.weight }) .andWhere('NOT hidden') .groupBy('name') .getMany() @@ -65,33 +65,41 @@ export default function BestList() { [refresh], ) - const renderItem = ({item}: {item: GymSet}) => ( + const renderItem = ({ item }: { item: GymSet }) => ( navigation.navigate('ViewBest', {best: item})} + onPress={() => navigation.navigate('ViewBest', { best: item })} left={() => (settings.images && item.image && ( - + )) || - null - } + null} /> ) return ( <> - + - {bests?.length === 0 ? ( - - ) : ( - - )} + {bests?.length === 0 + ? ( + + ) + : ( + + )} ) diff --git a/BestPage.tsx b/BestPage.tsx index 697b20f..e862560 100644 --- a/BestPage.tsx +++ b/BestPage.tsx @@ -1,4 +1,4 @@ -import {createStackNavigator} from '@react-navigation/stack' +import { createStackNavigator } from '@react-navigation/stack' import BestList from './BestList' import GymSet from './gym-set' import ViewBest from './ViewBest' @@ -14,9 +14,10 @@ export type BestPageParams = { export default function BestPage() { return ( - - + screenOptions={{ headerShown: false, animationEnabled: false }} + > + + ) } diff --git a/Chart.tsx b/Chart.tsx index 4cef1a4..4b739e6 100644 --- a/Chart.tsx +++ b/Chart.tsx @@ -1,9 +1,9 @@ -import {useTheme} from '@react-navigation/native' +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 {MARGIN, PADDING} from './constants' +import { View } from 'react-native' +import { Grid, LineChart, XAxis, YAxis } from 'react-native-svg-charts' +import { CombinedDarkTheme, CombinedDefaultTheme } from './App' +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 {colors} = useTheme() + const { colors } = useTheme() const dark = useDark() const axesSvg = { fontSize: 10, @@ -26,7 +26,7 @@ export default function Chart({ ? CombinedDarkTheme.colors.text : CombinedDefaultTheme.colors.text, } - const verticalContentInset = {top: 10, bottom: 10} + const verticalContentInset = { top: 10, bottom: 10 } const xAxisHeight = 30 return ( @@ -36,29 +36,31 @@ export default function Chart({ height: 300, padding: PADDING, flexDirection: 'row', - }}> + }} + > - + + }} + > diff --git a/ConfirmDialog.tsx b/ConfirmDialog.tsx index f1d9781..23bb2a2 100644 --- a/ConfirmDialog.tsx +++ b/ConfirmDialog.tsx @@ -1,4 +1,4 @@ -import {Button, Dialog, Portal, Text} from 'react-native-paper' +import { Button, Dialog, Portal, Text } from 'react-native-paper' export default function ConfirmDialog({ title, diff --git a/DrawerHeader.tsx b/DrawerHeader.tsx index 9e88dd8..eaead39 100644 --- a/DrawerHeader.tsx +++ b/DrawerHeader.tsx @@ -1,7 +1,7 @@ -import {DrawerNavigationProp} from '@react-navigation/drawer' -import {useNavigation} from '@react-navigation/native' -import {Appbar, IconButton} from 'react-native-paper' -import {DrawerParamList} from './drawer-param-list' +import { DrawerNavigationProp } from '@react-navigation/drawer' +import { useNavigation } from '@react-navigation/native' +import { Appbar, IconButton } from 'react-native-paper' +import { DrawerParamList } from './drawer-param-list' import useDark from './use-dark' export default function DrawerHeader({ @@ -18,7 +18,7 @@ export default function DrawerHeader({ diff --git a/EditPlan.tsx b/EditPlan.tsx index 1b20218..2744f72 100644 --- a/EditPlan.tsx +++ b/EditPlan.tsx @@ -4,22 +4,22 @@ import { useNavigation, useRoute, } from '@react-navigation/native' -import {useCallback, useEffect, useState} from 'react' -import {ScrollView, StyleSheet, View} from 'react-native' -import {Button, IconButton, Text} from 'react-native-paper' -import {getLast} from './best.service' -import {MARGIN, PADDING} from './constants' -import {planRepo, setRepo} from './db' -import {defaultSet} from './gym-set' -import {PlanPageParams} from './plan-page-params' +import { useCallback, useEffect, useState } from 'react' +import { ScrollView, StyleSheet, View } from 'react-native' +import { Button, IconButton, Text } from 'react-native-paper' +import { getLast } from './best.service' +import { MARGIN, PADDING } from './constants' +import { planRepo, setRepo } from './db' +import { defaultSet } from './gym-set' +import { PlanPageParams } from './plan-page-params' import StackHeader from './StackHeader' import Switch from './Switch' -import {DAYS} from './time' +import { DAYS } from './time' import useDark from './use-dark' export default function EditPlan() { - const {params} = useRoute>() - const {plan} = params + const { params } = useRoute>() + const { plan } = params const [days, setDays] = useState( plan.days ? plan.days.split(',') : [], ) @@ -37,18 +37,18 @@ export default function EditPlan() { .distinct(true) .orderBy('name') .getRawMany() - .then(values => { - console.log(EditPlan.name, {values}) - setNames(values.map(value => value.name)) + .then((values) => { + console.log(EditPlan.name, { values }) + setNames(values.map((value) => value.name)) }) }, []) const save = useCallback(async () => { - console.log(`${EditPlan.name}.save`, {days, workouts, plan}) + console.log(`${EditPlan.name}.save`, { days, workouts, plan }) if (!days || !workouts) return - const newWorkouts = workouts.filter(workout => workout).join(',') - const newDays = days.filter(day => day).join(',') - await planRepo.save({days: newDays, workouts: newWorkouts, id: plan.id}) + const newWorkouts = workouts.filter((workout) => workout).join(',') + const newDays = days.filter((day) => day).join(',') + await planRepo.save({ days: newDays, workouts: newWorkouts, id: plan.id }) navigation.goBack() }, [days, workouts, plan, navigation]) @@ -57,7 +57,7 @@ export default function EditPlan() { if (on) { setWorkouts([...workouts, name]) } else { - setWorkouts(workouts.filter(workout => workout !== name)) + setWorkouts(workouts.filter((workout) => workout !== name)) } }, [setWorkouts, workouts], @@ -68,7 +68,7 @@ export default function EditPlan() { if (on) { setDays([...days, day]) } else { - setDays(days.filter(d => d !== day)) + setDays(days.filter((d) => d !== day)) } }, [setDays, days], @@ -77,52 +77,56 @@ export default function EditPlan() { return ( <> + title={typeof plan.id === 'number' ? 'Edit plan' : 'Add plan'} + > { let first = await getLast(workouts[0]) - if (!first) first = {...defaultSet, name: workouts[0]} + if (!first) first = { ...defaultSet, name: workouts[0] } delete first.id - navigation.navigate('StartPlan', {plan: params.plan, first}) + navigation.navigate('StartPlan', { plan: params.plan, first }) }} - icon="play-arrow" + icon='play-arrow' /> - - + + Days - {DAYS.map(day => ( + {DAYS.map((day) => ( toggleDay(value, day)} + onChange={(value) => toggleDay(value, day)} value={days.includes(day)} title={day} /> ))} - Workouts - {names.length === 0 ? ( - - No workouts found. - - ) : ( - names.map(name => ( - toggleWorkout(value, name)} - value={workouts.includes(name)} - title={name} - /> - )) - )} + Workouts + {names.length === 0 + ? ( + + No workouts found. + + ) + : ( + names.map((name) => ( + toggleWorkout(value, name)} + value={workouts.includes(name)} + title={name} + /> + )) + )} diff --git a/EditSet.tsx b/EditSet.tsx index d3ff3e9..0630c12 100644 --- a/EditSet.tsx +++ b/EditSet.tsx @@ -1,28 +1,28 @@ -import {DateTimePickerAndroid} from '@react-native-community/datetimepicker' +import { DateTimePickerAndroid } from '@react-native-community/datetimepicker' import { RouteProp, useFocusEffect, useNavigation, useRoute, } from '@react-navigation/native' -import {format} from 'date-fns' -import {useCallback, useRef, useState} from 'react' -import {NativeModules, TextInput, View} from 'react-native' +import { format } from 'date-fns' +import { useCallback, useRef, useState } from 'react' +import { NativeModules, TextInput, View } from 'react-native' import DocumentPicker from 'react-native-document-picker' -import {Button, Card, TouchableRipple} from 'react-native-paper' +import { Button, Card, TouchableRipple } from 'react-native-paper' import AppInput from './AppInput' import ConfirmDialog from './ConfirmDialog' -import {MARGIN, PADDING} from './constants' -import {getNow, setRepo, settingsRepo} from './db' +import { MARGIN, PADDING } from './constants' +import { getNow, setRepo, settingsRepo } from './db' import GymSet from './gym-set' -import {HomePageParams} from './home-page-params' +import { HomePageParams } from './home-page-params' import Settings from './settings' import StackHeader from './StackHeader' -import {toast} from './toast' +import { toast } from './toast' export default function EditSet() { - const {params} = useRoute>() - const {set} = params + const { params } = useRoute>() + const { set } = params const navigation = useNavigation() const [settings, setSettings] = useState({} as Settings) const [name, setName] = useState(set.name) @@ -46,16 +46,16 @@ export default function EditSet() { useFocusEffect( useCallback(() => { - settingsRepo.findOne({where: {}}).then(setSettings) + settingsRepo.findOne({ where: {} }).then(setSettings) }, []), ) const startTimer = useCallback( async (value: string) => { if (!settings.alarm) return - const first = await setRepo.findOne({where: {name: value}}) - const milliseconds = - (first?.minutes ?? 3) * 60 * 1000 + (first?.seconds ?? 0) * 1000 + const first = await setRepo.findOne({ where: { name: value } }) + const milliseconds = (first?.minutes ?? 3) * 60 * 1000 + + (first?.seconds ?? 0) * 1000 if (milliseconds) NativeModules.AlarmModule.timer(milliseconds) }, [settings], @@ -64,25 +64,27 @@ export default function EditSet() { const added = useCallback( async (value: GymSet) => { startTimer(value.name) - console.log(`${EditSet.name}.add`, {set: value}) + console.log(`${EditSet.name}.add`, { set: value }) if (!settings.notify) return if ( value.weight > set.weight || (value.reps > set.reps && value.weight === set.weight) - ) - toast("Great work King! That's a new record.") + ) { + toast('Great work King! That\'s a new record.') + } }, [startTimer, set, settings], ) const handleSubmit = async () => { - console.log(`${EditSet.name}.handleSubmit:`, {set, uri: newImage, name}) + console.log(`${EditSet.name}.handleSubmit:`, { set, uri: newImage, name }) if (!name) return let image = newImage - if (!newImage && !removeImage) - image = await setRepo.findOne({where: {name}}).then(s => s?.image) + if (!newImage && !removeImage) { + image = await setRepo.findOne({ where: { name } }).then((s) => s?.image) + } - console.log(`${EditSet.name}.handleSubmit:`, {image}) + console.log(`${EditSet.name}.handleSubmit:`, { image }) const now = await getNow() const saved = await setRepo.save({ id: set.id, @@ -102,7 +104,7 @@ export default function EditSet() { } const changeImage = useCallback(async () => { - const {fileCopyUri} = await DocumentPicker.pickSingle({ + const { fileCopyUri } = await DocumentPicker.pickSingle({ type: DocumentPicker.types.images, copyTo: 'documentDirectory', }) @@ -137,9 +139,9 @@ export default function EditSet() { title={typeof set.id === 'number' ? 'Edit set' : 'Add set'} /> - + weightRef.current?.focus()} selection={selection} - onSelectionChange={e => setSelection(e.nativeEvent.selection)} + onSelectionChange={(e) => setSelection(e.nativeEvent.selection)} autoFocus={!!name} innerRef={repsRef} /> @@ -188,18 +190,20 @@ export default function EditSet() { {settings.images && newImage && ( setShowRemove(true)}> - + onLongPress={() => setShowRemove(true)} + > + )} {settings.images && !newImage && ( )} @@ -207,18 +211,20 @@ export default function EditSet() { + setShow={setShowRemove} + > Are you sure you want to remove the image? diff --git a/EditSets.tsx b/EditSets.tsx index 04e1968..ca7904f 100644 --- a/EditSets.tsx +++ b/EditSets.tsx @@ -4,23 +4,23 @@ import { useNavigation, useRoute, } from '@react-navigation/native' -import {useCallback, useState} from 'react' -import {View} from 'react-native' +import { useCallback, useState } from 'react' +import { View } from 'react-native' import DocumentPicker from 'react-native-document-picker' -import {Button, Card, TouchableRipple} from 'react-native-paper' -import {In} from 'typeorm' +import { Button, Card, TouchableRipple } from 'react-native-paper' +import { In } from 'typeorm' import AppInput from './AppInput' import ConfirmDialog from './ConfirmDialog' -import {MARGIN, PADDING} from './constants' -import {setRepo, settingsRepo} from './db' +import { MARGIN, PADDING } from './constants' +import { setRepo, settingsRepo } from './db' import GymSet from './gym-set' -import {HomePageParams} from './home-page-params' +import { HomePageParams } from './home-page-params' import Settings from './settings' import StackHeader from './StackHeader' export default function EditSets() { - const {params} = useRoute>() - const {ids} = params + const { params } = useRoute>() + const { ids } = params const navigation = useNavigation() const [settings, setSettings] = useState({} as Settings) const [name, setName] = useState('') @@ -41,18 +41,18 @@ export default function EditSets() { useFocusEffect( useCallback(() => { - settingsRepo.findOne({where: {}}).then(setSettings) - setRepo.find({where: {id: In(ids)}}).then(sets => { - setNames(sets.map(set => set.name).join(', ')) - setOldReps(sets.map(set => set.reps).join(', ')) - setWeights(sets.map(set => set.weight).join(', ')) - setUnits(sets.map(set => set.unit).join(', ')) + settingsRepo.findOne({ where: {} }).then(setSettings) + setRepo.find({ where: { id: In(ids) } }).then((sets) => { + setNames(sets.map((set) => set.name).join(', ')) + setOldReps(sets.map((set) => set.reps).join(', ')) + setWeights(sets.map((set) => set.weight).join(', ')) + setUnits(sets.map((set) => set.unit).join(', ')) }) }, [ids]), ) const handleSubmit = async () => { - console.log(`${EditSets.name}.handleSubmit:`, {uri: newImage, name}) + console.log(`${EditSets.name}.handleSubmit:`, { uri: newImage, name }) const update: Partial = {} if (name) update.name = name if (reps) update.reps = Number(reps) @@ -64,7 +64,7 @@ export default function EditSets() { } const changeImage = useCallback(async () => { - const {fileCopyUri} = await DocumentPicker.pickSingle({ + const { fileCopyUri } = await DocumentPicker.pickSingle({ type: DocumentPicker.types.images, copyTo: 'documentDirectory', }) @@ -80,7 +80,7 @@ export default function EditSets() { <> - + setSelection(e.nativeEvent.selection)} + onSelectionChange={(e) => setSelection(e.nativeEvent.selection)} autoFocus={!!name} /> setShowRemove(true)}> - + onLongPress={() => setShowRemove(true)} + > + )} + setShow={setShowRemove} + > Are you sure you want to remove the image? {settings.images && !newImage && ( )} diff --git a/EditWorkout.tsx b/EditWorkout.tsx index 6243890..1198f6c 100644 --- a/EditWorkout.tsx +++ b/EditWorkout.tsx @@ -4,21 +4,21 @@ import { useNavigation, useRoute, } from '@react-navigation/native' -import {useCallback, useRef, useState} from 'react' -import {ScrollView, TextInput, View} from 'react-native' +import { useCallback, useRef, useState } from 'react' +import { ScrollView, TextInput, View } from 'react-native' import DocumentPicker from 'react-native-document-picker' -import {Button, Card, TouchableRipple} from 'react-native-paper' +import { Button, Card, TouchableRipple } from 'react-native-paper' import AppInput from './AppInput' import ConfirmDialog from './ConfirmDialog' -import {MARGIN, PADDING} from './constants' -import {getNow, planRepo, setRepo, settingsRepo} from './db' -import {defaultSet} from './gym-set' +import { MARGIN, PADDING } from './constants' +import { getNow, planRepo, setRepo, settingsRepo } from './db' +import { defaultSet } from './gym-set' import Settings from './settings' import StackHeader from './StackHeader' -import {WorkoutsPageParams} from './WorkoutsPage' +import { WorkoutsPageParams } from './WorkoutsPage' export default function EditWorkout() { - const {params} = useRoute>() + const { params } = useRoute>() const [removeImage, setRemoveImage] = useState(false) const [showRemove, setShowRemove] = useState(false) const [name, setName] = useState(params.value.name) @@ -40,13 +40,13 @@ export default function EditWorkout() { useFocusEffect( useCallback(() => { - settingsRepo.findOne({where: {}}).then(setSettings) + settingsRepo.findOne({ where: {} }).then(setSettings) }, []), ) const update = async () => { await setRepo.update( - {name: params.value.name}, + { name: params.value.name }, { name: name || params.value.name, sets: Number(sets), @@ -87,7 +87,7 @@ export default function EditWorkout() { } const changeImage = useCallback(async () => { - const {fileCopyUri} = await DocumentPicker.pickSingle({ + const { fileCopyUri } = await DocumentPicker.pickSingle({ type: DocumentPicker.types.images, copyTo: 'documentDirectory', }) @@ -108,11 +108,11 @@ export default function EditWorkout() { return ( <> - - + + setsRef.current?.focus()} /> @@ -132,8 +132,8 @@ export default function EditWorkout() { innerRef={setsRef} value={sets} onChangeText={setSets} - label="Sets per workout" - keyboardType="numeric" + label='Sets per workout' + keyboardType='numeric' onSubmitEditing={() => minutesRef.current?.focus()} /> {settings?.alarm && ( @@ -143,44 +143,47 @@ export default function EditWorkout() { onSubmitEditing={() => secondsRef.current?.focus()} value={minutes} onChangeText={setMinutes} - label="Rest minutes" - keyboardType="numeric" + label='Rest minutes' + keyboardType='numeric' /> )} {settings?.images && uri && ( setShowRemove(true)}> - + onLongPress={() => setShowRemove(true)} + > + )} {settings?.images && !uri && ( )} - + setShow={setShowRemove} + > Are you sure you want to remove the image? diff --git a/HomePage.tsx b/HomePage.tsx index 580fc7f..b89b3a4 100644 --- a/HomePage.tsx +++ b/HomePage.tsx @@ -1,7 +1,7 @@ -import {createStackNavigator} from '@react-navigation/stack' +import { createStackNavigator } from '@react-navigation/stack' import EditSet from './EditSet' import EditSets from './EditSets' -import {HomePageParams} from './home-page-params' +import { HomePageParams } from './home-page-params' import SetList from './SetList' const Stack = createStackNavigator() @@ -9,10 +9,11 @@ const Stack = createStackNavigator() export default function HomePage() { return ( - - - + screenOptions={{ headerShown: false, animationEnabled: false }} + > + + + ) } diff --git a/ListMenu.tsx b/ListMenu.tsx index 7a21ea0..00b0cf8 100644 --- a/ListMenu.tsx +++ b/ListMenu.tsx @@ -1,5 +1,5 @@ -import {useState} from 'react' -import {Divider, IconButton, Menu} from 'react-native-paper' +import { useState } from 'react' +import { Divider, IconButton, Menu } from 'react-native-paper' import ConfirmDialog from './ConfirmDialog' import useDark from './use-dark' @@ -55,45 +55,45 @@ export default function ListMenu({ setShowMenu(true)} - icon="more-vert" + icon='more-vert' /> - }> - + } + > + setShowRemove(true)} - title="Delete" + title='Delete' /> setShowMenu(false)}> - {ids?.length === 0 ? ( - <>This irreversibly deletes records from the app. Are you sure? - ) : ( - <>This will delete {ids?.length} record(s). Are you sure? - )} + onCancel={() => setShowMenu(false)} + > + {ids?.length === 0 + ? <>This irreversibly deletes records from the app. Are you sure? + : <>This will delete {ids?.length} record(s). Are you sure?} ) diff --git a/Page.tsx b/Page.tsx index 2488d21..c46372f 100644 --- a/Page.tsx +++ b/Page.tsx @@ -1,7 +1,7 @@ -import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' -import {Searchbar} from 'react-native-paper' +import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native' +import { Searchbar } from 'react-native-paper' import AppFab from './AppFab' -import {PADDING} from './constants' +import { PADDING } from './constants' export default function Page({ onAdd, @@ -19,11 +19,11 @@ export default function Page({ return ( {children} {onAdd && } diff --git a/PlanItem.tsx b/PlanItem.tsx index a4c8fe2..5631af1 100644 --- a/PlanItem.tsx +++ b/PlanItem.tsx @@ -3,15 +3,15 @@ import { useFocusEffect, useNavigation, } from '@react-navigation/native' -import {useCallback, useMemo, useState} from 'react' -import {Text} from 'react-native' -import {List} from 'react-native-paper' -import {getLast} from './best.service' -import {DARK_RIPPLE, LIGHT_RIPPLE} from './constants' -import {defaultSet} from './gym-set' -import {Plan} from './plan' -import {PlanPageParams} from './plan-page-params' -import {DAYS} from './time' +import { useCallback, useMemo, useState } from 'react' +import { Text } from 'react-native' +import { List } from 'react-native-paper' +import { getLast } from './best.service' +import { DARK_RIPPLE, LIGHT_RIPPLE } from './constants' +import { defaultSet } from './gym-set' +import { Plan } from './plan' +import { PlanPageParams } from './plan-page-params' +import { DAYS } from './time' import useDark from './use-dark' export default function PlanItem({ @@ -38,12 +38,13 @@ export default function PlanItem({ const start = useCallback(async () => { const workout = item.workouts.split(',')[0] let first = await getLast(workout) - if (!first) first = {...defaultSet, name: workout} + if (!first) first = { ...defaultSet, name: workout } delete first.id - if (ids.length === 0) - return navigation.navigate('StartPlan', {plan: item, first}) - const removing = ids.find(id => id === item.id) - if (removing) setIds(ids.filter(id => id !== item.id)) + if (ids.length === 0) { + return navigation.navigate('StartPlan', { plan: item, first }) + } + const removing = ids.find((id) => id === item.id) + if (removing) setIds(ids.filter((id) => id !== item.id)) else setIds([...ids, item.id]) }, [ids, setIds, item, navigation]) @@ -56,13 +57,17 @@ export default function PlanItem({ () => days.map((day, index) => ( - {day === today ? ( - - {day} - - ) : ( - day - )} + {day === today + ? ( + + {day} + + ) + : ( + day + )} {index === days.length - 1 ? '' : ', '} )), @@ -86,7 +91,7 @@ export default function PlanItem({ title={title} description={description} onLongPress={longPress} - style={{backgroundColor}} + style={{ backgroundColor }} /> ) } diff --git a/PlanList.tsx b/PlanList.tsx index a33f5fe..82b55ce 100644 --- a/PlanList.tsx +++ b/PlanList.tsx @@ -3,16 +3,16 @@ import { useFocusEffect, useNavigation, } from '@react-navigation/native' -import {useCallback, useState} from 'react' -import {FlatList} from 'react-native' -import {List} from 'react-native-paper' -import {Like} from 'typeorm' -import {planRepo} from './db' +import { useCallback, useState } from 'react' +import { FlatList } from 'react-native' +import { List } from 'react-native-paper' +import { Like } from 'typeorm' +import { planRepo } from './db' import DrawerHeader from './DrawerHeader' import ListMenu from './ListMenu' import Page from './Page' -import {Plan} from './plan' -import {PlanPageParams} from './plan-page-params' +import { Plan } from './plan' +import { PlanPageParams } from './plan-page-params' import PlanItem from './PlanItem' export default function PlanList() { @@ -25,8 +25,8 @@ export default function PlanList() { planRepo .find({ where: [ - {days: Like(`%${value.trim()}%`)}, - {workouts: Like(`%${value.trim()}%`)}, + { days: Like(`%${value.trim()}%`) }, + { workouts: Like(`%${value.trim()}%`) }, ], }) .then(setPlans) @@ -47,27 +47,27 @@ export default function PlanList() { ) const renderItem = useCallback( - ({item}: {item: Plan}) => ( + ({ item }: { item: Plan }) => ( ), [ids], ) const onAdd = () => - navigation.navigate('EditPlan', {plan: {days: '', workouts: ''}}) + navigation.navigate('EditPlan', { plan: { days: '', workouts: '' } }) const edit = useCallback(async () => { - const plan = await planRepo.findOne({where: {id: ids.pop()}}) - navigation.navigate('EditPlan', {plan}) + const plan = await planRepo.findOne({ where: { id: ids.pop() } }) + navigation.navigate('EditPlan', { plan }) setIds([]) }, [ids, navigation]) const copy = useCallback(async () => { const plan = await planRepo.findOne({ - where: {id: ids.pop()}, + where: { id: ids.pop() }, }) delete plan.id - navigation.navigate('EditPlan', {plan}) + navigation.navigate('EditPlan', { plan }) setIds([]) }, [ids, navigation]) @@ -82,7 +82,7 @@ export default function PlanList() { }, [ids, refresh, term]) const select = useCallback(() => { - setIds(plans.map(plan => plan.id)) + setIds(plans.map((plan) => plan.id)) }, [plans]) return ( @@ -98,19 +98,21 @@ export default function PlanList() { /> - {plans?.length === 0 ? ( - - ) : ( - set.id?.toString() || ''} - /> - )} + {plans?.length === 0 + ? ( + + ) + : ( + set.id?.toString() || ''} + /> + )} ) diff --git a/PlanPage.tsx b/PlanPage.tsx index 5dd4fc7..3cc4c2b 100644 --- a/PlanPage.tsx +++ b/PlanPage.tsx @@ -1,7 +1,7 @@ -import {createStackNavigator} from '@react-navigation/stack' +import { createStackNavigator } from '@react-navigation/stack' import EditPlan from './EditPlan' import EditSet from './EditSet' -import {PlanPageParams} from './plan-page-params' +import { PlanPageParams } from './plan-page-params' import PlanList from './PlanList' import StartPlan from './StartPlan' @@ -10,11 +10,12 @@ const Stack = createStackNavigator() export default function PlanPage() { return ( - - - - + screenOptions={{ headerShown: false, animationEnabled: false }} + > + + + + ) } diff --git a/Routes.tsx b/Routes.tsx index 753f948..898cf89 100644 --- a/Routes.tsx +++ b/Routes.tsx @@ -1,7 +1,7 @@ -import {createDrawerNavigator} from '@react-navigation/drawer' -import {IconButton} from 'react-native-paper' +import { createDrawerNavigator } from '@react-navigation/drawer' +import { IconButton } from 'react-native-paper' import BestPage from './BestPage' -import {DrawerParamList} from './drawer-param-list' +import { DrawerParamList } from './drawer-param-list' import HomePage from './HomePage' import PlanPage from './PlanPage' import SettingsPage from './SettingsPage' @@ -20,36 +20,37 @@ export default function Routes() { headerTintColor: dark ? 'white' : 'black', swipeEdgeWidth: 1000, headerShown: false, - }}> + }} + > }} + options={{ drawerIcon: () => }} /> }} + options={{ drawerIcon: () => }} /> }} + options={{ drawerIcon: () => }} /> }} + options={{ drawerIcon: () => }} /> }} + options={{ drawerIcon: () => }} /> }} + options={{ drawerIcon: () => }} /> ) diff --git a/Select.tsx b/Select.tsx index 2ccddd0..ef34461 100644 --- a/Select.tsx +++ b/Select.tsx @@ -1,7 +1,7 @@ -import React, {useCallback, useMemo, useState} from 'react' -import {View} from 'react-native' -import {Button, Menu, Subheading, useTheme} from 'react-native-paper' -import {ITEM_PADDING} from './constants' +import React, { useCallback, useMemo, useState } from 'react' +import { View } from 'react-native' +import { Button, Menu, Subheading, useTheme } from 'react-native-paper' +import { ITEM_PADDING } from './constants' export interface Item { value: string @@ -21,10 +21,10 @@ function Select({ label?: string }) { const [show, setShow] = useState(false) - const {colors} = useTheme() + const { colors } = useTheme() const selected = useMemo( - () => items.find(item => item.value === value) || items[0], + () => items.find((item) => item.value === value) || items[0], [items, value], ) @@ -42,8 +42,9 @@ function Select({ flexDirection: 'row', alignItems: 'center', paddingLeft: ITEM_PADDING, - }}> - {label && {label}} + }} + > + {label && {label}} setShow(false)} @@ -52,14 +53,16 @@ function Select({ onPress={() => setShow(true)} style={{ alignSelf: 'flex-start', - }}> + }} + > {selected?.label} - }> - {items.map(item => ( + } + > + {items.map((item) => ( handlePress(item.value)} /> diff --git a/SetItem.tsx b/SetItem.tsx index 5a84ec2..13c184f 100644 --- a/SetItem.tsx +++ b/SetItem.tsx @@ -1,11 +1,11 @@ -import {NavigationProp, useNavigation} from '@react-navigation/native' -import {format} from 'date-fns' -import {useCallback, useMemo} from 'react' -import {Image} from 'react-native' -import {List, Text} from 'react-native-paper' -import {DARK_RIPPLE, LIGHT_RIPPLE} from './constants' +import { NavigationProp, useNavigation } from '@react-navigation/native' +import { format } from 'date-fns' +import { useCallback, useMemo } from 'react' +import { Image } from 'react-native' +import { List, Text } from 'react-native-paper' +import { DARK_RIPPLE, LIGHT_RIPPLE } from './constants' import GymSet from './gym-set' -import {HomePageParams} from './home-page-params' +import { HomePageParams } from './home-page-params' import Settings from './settings' import useDark from './use-dark' @@ -30,9 +30,9 @@ export default function SetItem({ }, [ids.length, item.id, setIds]) const press = useCallback(() => { - if (ids.length === 0) return navigation.navigate('EditSet', {set: item}) - const removing = ids.find(id => id === item.id) - if (removing) setIds(ids.filter(id => id !== item.id)) + if (ids.length === 0) return navigation.navigate('EditSet', { set: item }) + const removing = ids.find((id) => id === item.id) + if (removing) setIds(ids.filter((id) => id !== item.id)) else setIds([...ids, item.id]) }, [ids, item, navigation, setIds]) @@ -49,13 +49,15 @@ export default function SetItem({ title={item.name} description={`${item.reps} x ${item.weight}${item.unit || 'kg'}`} onLongPress={longPress} - style={{backgroundColor}} + style={{ backgroundColor }} left={() => settings.images && item.image && ( - - ) - } + + )} right={() => ( <> {settings.showDate && ( @@ -63,7 +65,8 @@ export default function SetItem({ style={{ alignSelf: 'center', color: dark ? '#909090ff' : '#717171ff', - }}> + }} + > {format(new Date(item.created), settings.date || 'P')} )} diff --git a/SetList.tsx b/SetList.tsx index a6017b5..e646cc9 100644 --- a/SetList.tsx +++ b/SetList.tsx @@ -3,14 +3,14 @@ import { useFocusEffect, useNavigation, } from '@react-navigation/native' -import {useCallback, useState} from 'react' -import {FlatList} from 'react-native' -import {List} from 'react-native-paper' -import {Like} from 'typeorm' -import {getNow, setRepo, settingsRepo} from './db' +import { useCallback, useState } from 'react' +import { FlatList } from 'react-native' +import { List } from 'react-native-paper' +import { Like } from 'typeorm' +import { getNow, setRepo, settingsRepo } from './db' import DrawerHeader from './DrawerHeader' -import GymSet, {defaultSet} from './gym-set' -import {HomePageParams} from './home-page-params' +import GymSet, { defaultSet } from './gym-set' +import { HomePageParams } from './home-page-params' import ListMenu from './ListMenu' import Page from './Page' import SetItem from './SetItem' @@ -29,12 +29,12 @@ export default function SetList() { const refresh = useCallback(async (value: string) => { const newSets = await setRepo.find({ - where: {name: Like(`%${value.trim()}%`), hidden: 0 as any}, + where: { name: Like(`%${value.trim()}%`), hidden: 0 as any }, take: limit, skip: 0, - order: {created: 'DESC'}, + order: { created: 'DESC' }, }) - console.log(`${SetList.name}.refresh:`, {value, limit}) + console.log(`${SetList.name}.refresh:`, { value, limit }) setSets(newSets) setOffset(0) setEnd(false) @@ -43,12 +43,12 @@ export default function SetList() { useFocusEffect( useCallback(() => { refresh(term) - settingsRepo.findOne({where: {}}).then(setSettings) + settingsRepo.findOne({ where: {} }).then(setSettings) }, [refresh, term]), ) const renderItem = useCallback( - ({item}: {item: GymSet}) => ( + ({ item }: { item: GymSet }) => ( { if (end) return const newOffset = offset + limit - console.log(`${SetList.name}.next:`, {offset, newOffset, term}) + console.log(`${SetList.name}.next:`, { offset, newOffset, term }) const newSets = await setRepo.find({ - where: {name: Like(`%${term}%`), hidden: 0 as any}, + where: { name: Like(`%${term}%`), hidden: 0 as any }, take: limit, skip: newOffset, - order: {created: 'DESC'}, + order: { created: 'DESC' }, }) if (newSets.length === 0) return setEnd(true) if (!sets) return @@ -81,10 +81,10 @@ export default function SetList() { const onAdd = useCallback(async () => { const now = await getNow() let set = sets[0] - if (!set) set = {...defaultSet} + if (!set) set = { ...defaultSet } set.created = now delete set.id - navigation.navigate('EditSet', {set}) + navigation.navigate('EditSet', { set }) }, [navigation, sets]) const search = useCallback( @@ -96,17 +96,17 @@ export default function SetList() { ) const edit = useCallback(() => { - navigation.navigate('EditSets', {ids}) + navigation.navigate('EditSets', { ids }) setIds([]) }, [ids, navigation]) const copy = useCallback(async () => { const set = await setRepo.findOne({ - where: {id: ids.pop()}, + where: { id: ids.pop() }, }) delete set.id delete set.created - navigation.navigate('EditSet', {set}) + navigation.navigate('EditSet', { set }) setIds([]) }, [ids, navigation]) @@ -121,7 +121,7 @@ export default function SetList() { }, [ids, refresh, term]) const select = useCallback(() => { - setIds(sets.map(set => set.id)) + setIds(sets.map((set) => set.id)) }, [sets]) return ( @@ -138,21 +138,23 @@ export default function SetList() { - {sets?.length === 0 ? ( - - ) : ( - settings && ( - ) - )} + : ( + settings && ( + + ) + )} ) diff --git a/SettingsPage.tsx b/SettingsPage.tsx index 135be9c..04b3e44 100644 --- a/SettingsPage.tsx +++ b/SettingsPage.tsx @@ -1,25 +1,25 @@ -import {NavigationProp, useNavigation} from '@react-navigation/native' -import {format} from 'date-fns' -import {useCallback, useEffect, useMemo, useState} from 'react' -import {useForm} from 'react-hook-form' -import {NativeModules, ScrollView, View} from 'react-native' +import { NavigationProp, useNavigation } from '@react-navigation/native' +import { format } from 'date-fns' +import { useCallback, useEffect, useMemo, useState } from 'react' +import { useForm } from 'react-hook-form' +import { NativeModules, ScrollView, View } from 'react-native' import DocumentPicker from 'react-native-document-picker' -import {Dirs, FileSystem} from 'react-native-file-access' -import {Button, Subheading} from 'react-native-paper' +import { Dirs, FileSystem } from 'react-native-file-access' +import { Button, Subheading } from 'react-native-paper' import ConfirmDialog from './ConfirmDialog' -import {ITEM_PADDING, MARGIN} from './constants' -import {AppDataSource} from './data-source' -import {setRepo, settingsRepo} from './db' -import {DrawerParamList} from './drawer-param-list' +import { ITEM_PADDING, MARGIN } from './constants' +import { AppDataSource } from './data-source' +import { setRepo, settingsRepo } from './db' +import { DrawerParamList } from './drawer-param-list' import DrawerHeader from './DrawerHeader' import Input from './input' -import {darkOptions, lightOptions, themeOptions} from './options' +import { darkOptions, lightOptions, themeOptions } from './options' import Page from './Page' import Select from './Select' import Settings from './settings' import Switch from './Switch' -import {toast} from './toast' -import {useTheme} from './use-theme' +import { toast } from './toast' +import { useTheme } from './use-theme' const twelveHours = [ 'dd/LL/yyyy', @@ -45,20 +45,26 @@ export default function SettingsPage() { const [term, setTerm] = useState('') const [formatOptions, setFormatOptions] = useState(twelveHours) const [importing, setImporting] = useState(false) - const {reset} = useNavigation>() + const { reset } = useNavigation>() - const {watch, setValue} = useForm({ - defaultValues: () => settingsRepo.findOne({where: {}}), + const { watch, setValue } = useForm({ + defaultValues: () => settingsRepo.findOne({ where: {} }), }) const settings = watch() - const {theme, setTheme, lightColor, setLightColor, darkColor, setDarkColor} = - useTheme() + const { + theme, + setTheme, + lightColor, + setLightColor, + darkColor, + setDarkColor, + } = useTheme() useEffect(() => { NativeModules.SettingsModule.ignoringBattery(setIgnoring) NativeModules.SettingsModule.is24().then((is24: boolean) => { - console.log(`${SettingsPage.name}.focus:`, {is24}) + console.log(`${SettingsPage.name}.focus:`, { is24 }) if (is24) setFormatOptions(twentyFours) else setFormatOptions(twelveHours) }) @@ -68,7 +74,7 @@ export default function SettingsPage() { return settingsRepo .createQueryBuilder() .update() - .set({[key]: value}) + .set({ [key]: value }) .printSql() .execute() }, []) @@ -80,7 +86,7 @@ export default function SettingsPage() { }, [settings.sound]) const changeSound = useCallback(async () => { - const {fileCopyUri} = await DocumentPicker.pickSingle({ + const { fileCopyUri } = await DocumentPicker.pickSingle({ type: DocumentPicker.types.audio, copyTo: 'documentDirectory', }) @@ -92,21 +98,21 @@ export default function SettingsPage() { const switches: Input[] = useMemo( () => [ - {name: 'Rest timers', value: settings.alarm, key: 'alarm'}, - {name: 'Vibrate', value: settings.vibrate, key: 'vibrate'}, - {name: 'Disable sound', value: settings.noSound, key: 'noSound'}, - {name: 'Notifications', value: settings.notify, key: 'notify'}, - {name: 'Show images', value: settings.images, key: 'images'}, - {name: 'Show unit', value: settings.showUnit, key: 'showUnit'}, - {name: 'Show steps', value: settings.steps, key: 'steps'}, - {name: 'Show date', value: settings.showDate, key: 'showDate'}, - {name: 'Automatic backup', value: settings.backup, key: 'backup'}, + { name: 'Rest timers', value: settings.alarm, key: 'alarm' }, + { name: 'Vibrate', value: settings.vibrate, key: 'vibrate' }, + { name: 'Disable sound', value: settings.noSound, key: 'noSound' }, + { name: 'Notifications', value: settings.notify, key: 'notify' }, + { name: 'Show images', value: settings.images, key: 'images' }, + { name: 'Show unit', value: settings.showUnit, key: 'showUnit' }, + { name: 'Show steps', value: settings.steps, key: 'steps' }, + { name: 'Show date', value: settings.showDate, key: 'showDate' }, + { name: 'Automatic backup', value: settings.backup, key: 'backup' }, ], [settings], ) const filter = useCallback( - ({name}) => name.toLowerCase().includes(term.toLowerCase()), + ({ name }) => name.toLowerCase().includes(term.toLowerCase()), [term], ) @@ -168,7 +174,7 @@ export default function SettingsPage() { changeBoolean(item.key, value)} + onChange={(value) => changeBoolean(item.key, value)} title={item.name} /> ), @@ -176,7 +182,7 @@ export default function SettingsPage() { ) const switchesMarkup = useMemo( - () => switches.filter(filter).map(s => renderSwitch(s)), + () => switches.filter(filter).map((s) => renderSwitch(s)), [filter, switches, renderSwitch], ) @@ -211,7 +217,7 @@ export default function SettingsPage() { const selects: Input[] = useMemo(() => { const today = new Date() return [ - {name: 'Theme', value: theme, items: themeOptions, key: 'theme'}, + { name: 'Theme', value: theme, items: themeOptions, key: 'theme' }, { name: 'Dark color', value: darkColor, @@ -227,7 +233,7 @@ export default function SettingsPage() { { name: 'Date format', value: settings.date, - items: formatOptions.map(option => ({ + items: formatOptions.map((option) => ({ label: format(today, option), value: option, })), @@ -241,7 +247,7 @@ export default function SettingsPage() { setMetric(value as Metrics)} + onChange={(value) => setMetric(value as Metrics)} value={metric} />