Combine SetForm + EditSet
The abstraction here added more complexity than it saved.
This commit is contained in:
parent
4e9cd59b0b
commit
1b1bb41ed7
186
EditSet.tsx
186
EditSet.tsx
|
@ -4,13 +4,17 @@ import {
|
|||
useNavigation,
|
||||
useRoute,
|
||||
} from '@react-navigation/native'
|
||||
import {useCallback, useState} from 'react'
|
||||
import {NativeModules, View} from 'react-native'
|
||||
import {PADDING} from './constants'
|
||||
import {setRepo, settingsRepo} from './db'
|
||||
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 ConfirmDialog from './ConfirmDialog'
|
||||
import {MARGIN, PADDING} from './constants'
|
||||
import {getNow, setRepo, settingsRepo} from './db'
|
||||
import GymSet from './gym-set'
|
||||
import {HomePageParams} from './home-page-params'
|
||||
import SetForm from './SetForm'
|
||||
import MassiveInput from './MassiveInput'
|
||||
import Settings from './settings'
|
||||
import StackHeader from './StackHeader'
|
||||
import {toast} from './toast'
|
||||
|
@ -19,7 +23,22 @@ export default function EditSet() {
|
|||
const {params} = useRoute<RouteProp<HomePageParams, 'EditSet'>>()
|
||||
const {set} = params
|
||||
const navigation = useNavigation()
|
||||
const [settings, setSettings] = useState<Settings>()
|
||||
const [settings, setSettings] = useState<Settings>({} as Settings)
|
||||
const [name, setName] = useState(set.name)
|
||||
const [reps, setReps] = useState(set.reps?.toString())
|
||||
const [weight, setWeight] = useState(set.weight?.toString())
|
||||
const [newImage, setNewImage] = useState(set.image)
|
||||
const [unit, setUnit] = useState(set.unit)
|
||||
const [showRemove, setShowRemove] = useState(false)
|
||||
const [removeImage, setRemoveImage] = useState(false)
|
||||
const weightRef = useRef<TextInput>(null)
|
||||
const repsRef = useRef<TextInput>(null)
|
||||
const unitRef = useRef<TextInput>(null)
|
||||
|
||||
const [selection, setSelection] = useState({
|
||||
start: 0,
|
||||
end: set.reps?.toString().length,
|
||||
})
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
|
@ -28,17 +47,14 @@ export default function EditSet() {
|
|||
)
|
||||
|
||||
const startTimer = useCallback(
|
||||
async (name: string) => {
|
||||
async (value: string) => {
|
||||
if (!settings.alarm) return
|
||||
const first = await setRepo.findOne({where: {name}})
|
||||
const first = await setRepo.findOne({where: {name: value}})
|
||||
const milliseconds =
|
||||
(first?.minutes ?? 3) * 60 * 1000 + (first?.seconds ?? 0) * 1000
|
||||
NativeModules.AlarmModule.timer(
|
||||
milliseconds,
|
||||
settings.vibrate,
|
||||
settings.sound,
|
||||
settings.noSound,
|
||||
)
|
||||
const {vibrate, sound, noSound} = settings
|
||||
const args = [milliseconds, vibrate, sound, noSound]
|
||||
NativeModules.AlarmModule.timer(...args)
|
||||
},
|
||||
[settings],
|
||||
)
|
||||
|
@ -57,20 +73,146 @@ export default function EditSet() {
|
|||
[startTimer, set, settings],
|
||||
)
|
||||
|
||||
const saved = useCallback(
|
||||
async (value: GymSet) => {
|
||||
if (typeof set.id !== 'number') added(value)
|
||||
navigation.goBack()
|
||||
},
|
||||
[added, set.id, navigation],
|
||||
)
|
||||
const handleSubmit = async () => {
|
||||
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)
|
||||
|
||||
console.log(`${EditSet.name}.handleSubmit:`, {image})
|
||||
const [{now}] = await getNow()
|
||||
const saved = await setRepo.save({
|
||||
id: set.id,
|
||||
name,
|
||||
created: set.created || now,
|
||||
reps: Number(reps),
|
||||
weight: Number(weight),
|
||||
unit,
|
||||
image,
|
||||
minutes: Number(set.minutes ?? 3),
|
||||
seconds: Number(set.seconds ?? 30),
|
||||
sets: set.sets ?? 3,
|
||||
hidden: false,
|
||||
})
|
||||
if (typeof set.id !== 'number') added(saved)
|
||||
navigation.goBack()
|
||||
}
|
||||
|
||||
const handleName = useCallback((value: string) => {
|
||||
setName(value.replace(/,|'/g, ''))
|
||||
if (value.match(/,|'/))
|
||||
toast('Commas and single quotes would break CSV exports')
|
||||
}, [])
|
||||
|
||||
const handleUnit = useCallback((value: string) => {
|
||||
setUnit(value.replace(/,|'/g, ''))
|
||||
if (value.match(/,|'/))
|
||||
toast('Commas and single quotes would break CSV exports')
|
||||
}, [])
|
||||
|
||||
const changeImage = useCallback(async () => {
|
||||
const {fileCopyUri} = await DocumentPicker.pickSingle({
|
||||
type: DocumentPicker.types.images,
|
||||
copyTo: 'documentDirectory',
|
||||
})
|
||||
if (fileCopyUri) setNewImage(fileCopyUri)
|
||||
}, [])
|
||||
|
||||
const handleRemove = useCallback(async () => {
|
||||
setNewImage('')
|
||||
setRemoveImage(true)
|
||||
setShowRemove(false)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<StackHeader title="Edit set" />
|
||||
|
||||
<View style={{padding: PADDING, flex: 1}}>
|
||||
{settings && <SetForm settings={settings} onSaved={saved} set={set} />}
|
||||
<MassiveInput
|
||||
label="Name"
|
||||
value={name}
|
||||
onChangeText={handleName}
|
||||
autoCorrect={false}
|
||||
autoFocus={!name}
|
||||
onSubmitEditing={() => repsRef.current?.focus()}
|
||||
/>
|
||||
|
||||
<MassiveInput
|
||||
label="Reps"
|
||||
keyboardType="numeric"
|
||||
value={reps}
|
||||
onChangeText={setReps}
|
||||
onSubmitEditing={() => weightRef.current?.focus()}
|
||||
selection={selection}
|
||||
onSelectionChange={e => setSelection(e.nativeEvent.selection)}
|
||||
autoFocus={!!name}
|
||||
innerRef={repsRef}
|
||||
/>
|
||||
|
||||
<MassiveInput
|
||||
label="Weight"
|
||||
keyboardType="numeric"
|
||||
value={weight}
|
||||
onChangeText={setWeight}
|
||||
onSubmitEditing={handleSubmit}
|
||||
innerRef={weightRef}
|
||||
/>
|
||||
|
||||
{settings.showUnit && (
|
||||
<MassiveInput
|
||||
autoCapitalize="none"
|
||||
label="Unit"
|
||||
value={unit}
|
||||
onChangeText={handleUnit}
|
||||
innerRef={unitRef}
|
||||
/>
|
||||
)}
|
||||
|
||||
{typeof set.id === 'number' && settings.showDate && (
|
||||
<MassiveInput
|
||||
label="Created"
|
||||
disabled
|
||||
value={format(new Date(set.created), settings.date)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{settings.images && newImage && (
|
||||
<TouchableRipple
|
||||
style={{marginBottom: MARGIN}}
|
||||
onPress={changeImage}
|
||||
onLongPress={() => setShowRemove(true)}>
|
||||
<Card.Cover source={{uri: newImage}} />
|
||||
</TouchableRipple>
|
||||
)}
|
||||
|
||||
{settings.images && !newImage && (
|
||||
<Button
|
||||
style={{marginBottom: MARGIN}}
|
||||
onPress={changeImage}
|
||||
icon="add-photo-alternate">
|
||||
Image
|
||||
</Button>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<Button
|
||||
style={{margin: MARGIN * 2}}
|
||||
disabled={!name}
|
||||
mode="contained"
|
||||
icon="save"
|
||||
onPress={handleSubmit}>
|
||||
Save
|
||||
</Button>
|
||||
|
||||
<ConfirmDialog
|
||||
title="Remove image"
|
||||
onOk={handleRemove}
|
||||
show={showRemove}
|
||||
setShow={setShowRemove}>
|
||||
Are you sure you want to remove the image?
|
||||
</ConfirmDialog>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
171
SetForm.tsx
171
SetForm.tsx
|
@ -1,171 +0,0 @@
|
|||
import {format} from 'date-fns'
|
||||
import {useCallback, useRef, useState} from 'react'
|
||||
import {TextInput, View} from 'react-native'
|
||||
import DocumentPicker from 'react-native-document-picker'
|
||||
import {Button, Card, TouchableRipple} from 'react-native-paper'
|
||||
import ConfirmDialog from './ConfirmDialog'
|
||||
import {MARGIN} from './constants'
|
||||
import {getNow, setRepo} from './db'
|
||||
import GymSet from './gym-set'
|
||||
import MassiveInput from './MassiveInput'
|
||||
import Settings from './settings'
|
||||
import {toast} from './toast'
|
||||
|
||||
export default function SetForm({
|
||||
onSaved,
|
||||
set,
|
||||
settings,
|
||||
}: {
|
||||
set: GymSet
|
||||
onSaved: (set: GymSet) => void
|
||||
settings: Settings
|
||||
}) {
|
||||
const [name, setName] = useState(set.name)
|
||||
const [reps, setReps] = useState(set.reps?.toString())
|
||||
const [weight, setWeight] = useState(set.weight?.toString())
|
||||
const [newImage, setNewImage] = useState(set.image)
|
||||
const [unit, setUnit] = useState(set.unit)
|
||||
const [showRemove, setShowRemove] = useState(false)
|
||||
const [selection, setSelection] = useState({
|
||||
start: 0,
|
||||
end: set.reps?.toString().length,
|
||||
})
|
||||
const [removeImage, setRemoveImage] = useState(false)
|
||||
const weightRef = useRef<TextInput>(null)
|
||||
const repsRef = useRef<TextInput>(null)
|
||||
const unitRef = useRef<TextInput>(null)
|
||||
|
||||
const handleSubmit = async () => {
|
||||
console.log(`${SetForm.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)
|
||||
|
||||
console.log(`${SetForm.name}.handleSubmit:`, {image})
|
||||
const [{now}] = await getNow()
|
||||
const saved = await setRepo.save({
|
||||
id: set.id,
|
||||
name,
|
||||
created: set.created || now,
|
||||
reps: Number(reps),
|
||||
weight: Number(weight),
|
||||
unit,
|
||||
image,
|
||||
minutes: Number(set.minutes ?? 3),
|
||||
seconds: Number(set.seconds ?? 30),
|
||||
sets: set.sets ?? 3,
|
||||
hidden: false,
|
||||
})
|
||||
onSaved(saved)
|
||||
}
|
||||
|
||||
const handleName = useCallback((value: string) => {
|
||||
setName(value.replace(/,|'/g, ''))
|
||||
if (value.match(/,|'/))
|
||||
toast('Commas and single quotes would break CSV exports')
|
||||
}, [])
|
||||
|
||||
const handleUnit = useCallback((value: string) => {
|
||||
setUnit(value.replace(/,|'/g, ''))
|
||||
if (value.match(/,|'/))
|
||||
toast('Commas and single quotes would break CSV exports')
|
||||
}, [])
|
||||
|
||||
const changeImage = useCallback(async () => {
|
||||
const {fileCopyUri} = await DocumentPicker.pickSingle({
|
||||
type: DocumentPicker.types.images,
|
||||
copyTo: 'documentDirectory',
|
||||
})
|
||||
if (fileCopyUri) setNewImage(fileCopyUri)
|
||||
}, [])
|
||||
|
||||
const handleRemove = useCallback(async () => {
|
||||
setNewImage('')
|
||||
setRemoveImage(true)
|
||||
setShowRemove(false)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<View style={{flex: 1}}>
|
||||
<MassiveInput
|
||||
label="Name"
|
||||
value={name}
|
||||
onChangeText={handleName}
|
||||
autoCorrect={false}
|
||||
autoFocus={!name}
|
||||
onSubmitEditing={() => repsRef.current?.focus()}
|
||||
/>
|
||||
<MassiveInput
|
||||
label="Reps"
|
||||
keyboardType="numeric"
|
||||
value={reps}
|
||||
onChangeText={setReps}
|
||||
onSubmitEditing={() => weightRef.current?.focus()}
|
||||
selection={selection}
|
||||
onSelectionChange={e => setSelection(e.nativeEvent.selection)}
|
||||
autoFocus={!!name}
|
||||
innerRef={repsRef}
|
||||
/>
|
||||
<MassiveInput
|
||||
label="Weight"
|
||||
keyboardType="numeric"
|
||||
value={weight}
|
||||
onChangeText={setWeight}
|
||||
onSubmitEditing={handleSubmit}
|
||||
innerRef={weightRef}
|
||||
/>
|
||||
{settings.showUnit && (
|
||||
<MassiveInput
|
||||
autoCapitalize="none"
|
||||
label="Unit"
|
||||
value={unit}
|
||||
onChangeText={handleUnit}
|
||||
innerRef={unitRef}
|
||||
/>
|
||||
)}
|
||||
{typeof set.id === 'number' && settings.showDate && (
|
||||
<MassiveInput
|
||||
label="Created"
|
||||
disabled
|
||||
value={format(new Date(set.created), settings.date)}
|
||||
/>
|
||||
)}
|
||||
{settings.images && newImage && (
|
||||
<TouchableRipple
|
||||
style={{marginBottom: MARGIN}}
|
||||
onPress={changeImage}
|
||||
onLongPress={() => setShowRemove(true)}>
|
||||
<Card.Cover source={{uri: newImage}} />
|
||||
</TouchableRipple>
|
||||
)}
|
||||
{settings.images && !newImage && (
|
||||
<Button
|
||||
style={{marginBottom: MARGIN}}
|
||||
onPress={changeImage}
|
||||
icon="add-photo-alternate">
|
||||
Image
|
||||
</Button>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<Button
|
||||
style={{margin: MARGIN * 2}}
|
||||
disabled={!name}
|
||||
mode="contained"
|
||||
icon="save"
|
||||
onPress={handleSubmit}>
|
||||
Save
|
||||
</Button>
|
||||
|
||||
<ConfirmDialog
|
||||
title="Remove image"
|
||||
onOk={handleRemove}
|
||||
show={showRemove}
|
||||
setShow={setShowRemove}>
|
||||
Are you sure you want to remove the image?
|
||||
</ConfirmDialog>
|
||||
</>
|
||||
)
|
||||
}
|
|
@ -11,7 +11,6 @@ import {getNow, setRepo, settingsRepo} from './db'
|
|||
import GymSet from './gym-set'
|
||||
import MassiveInput from './MassiveInput'
|
||||
import {PlanPageParams} from './plan-page-params'
|
||||
import SetForm from './SetForm'
|
||||
import Settings from './settings'
|
||||
import StackHeader from './StackHeader'
|
||||
import StartPlanItem from './StartPlanItem'
|
||||
|
@ -88,7 +87,7 @@ export default function StartPlan() {
|
|||
}, [refresh])
|
||||
|
||||
const handleSubmit = async () => {
|
||||
console.log(`${SetForm.name}.handleSubmit:`, {reps, weight, unit, best})
|
||||
console.log(`${StartPlan.name}.handleSubmit:`, {reps, weight, unit, best})
|
||||
const [{now}] = await getNow()
|
||||
await setRepo.save({
|
||||
...best,
|
||||
|
|
Loading…
Reference in New Issue
Block a user