Combine SetForm + EditSet
The abstraction here added more complexity than it saved.
This commit is contained in:
parent
4e9cd59b0b
commit
1b1bb41ed7
184
EditSet.tsx
184
EditSet.tsx
|
@ -4,13 +4,17 @@ import {
|
||||||
useNavigation,
|
useNavigation,
|
||||||
useRoute,
|
useRoute,
|
||||||
} from '@react-navigation/native'
|
} from '@react-navigation/native'
|
||||||
import {useCallback, useState} from 'react'
|
import {format} from 'date-fns'
|
||||||
import {NativeModules, View} from 'react-native'
|
import {useCallback, useRef, useState} from 'react'
|
||||||
import {PADDING} from './constants'
|
import {NativeModules, TextInput, View} from 'react-native'
|
||||||
import {setRepo, settingsRepo} from './db'
|
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 GymSet from './gym-set'
|
||||||
import {HomePageParams} from './home-page-params'
|
import {HomePageParams} from './home-page-params'
|
||||||
import SetForm from './SetForm'
|
import MassiveInput from './MassiveInput'
|
||||||
import Settings from './settings'
|
import Settings from './settings'
|
||||||
import StackHeader from './StackHeader'
|
import StackHeader from './StackHeader'
|
||||||
import {toast} from './toast'
|
import {toast} from './toast'
|
||||||
|
@ -19,7 +23,22 @@ export default function EditSet() {
|
||||||
const {params} = useRoute<RouteProp<HomePageParams, 'EditSet'>>()
|
const {params} = useRoute<RouteProp<HomePageParams, 'EditSet'>>()
|
||||||
const {set} = params
|
const {set} = params
|
||||||
const navigation = useNavigation()
|
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(
|
useFocusEffect(
|
||||||
useCallback(() => {
|
useCallback(() => {
|
||||||
|
@ -28,17 +47,14 @@ export default function EditSet() {
|
||||||
)
|
)
|
||||||
|
|
||||||
const startTimer = useCallback(
|
const startTimer = useCallback(
|
||||||
async (name: string) => {
|
async (value: string) => {
|
||||||
if (!settings.alarm) return
|
if (!settings.alarm) return
|
||||||
const first = await setRepo.findOne({where: {name}})
|
const first = await setRepo.findOne({where: {name: value}})
|
||||||
const milliseconds =
|
const milliseconds =
|
||||||
(first?.minutes ?? 3) * 60 * 1000 + (first?.seconds ?? 0) * 1000
|
(first?.minutes ?? 3) * 60 * 1000 + (first?.seconds ?? 0) * 1000
|
||||||
NativeModules.AlarmModule.timer(
|
const {vibrate, sound, noSound} = settings
|
||||||
milliseconds,
|
const args = [milliseconds, vibrate, sound, noSound]
|
||||||
settings.vibrate,
|
NativeModules.AlarmModule.timer(...args)
|
||||||
settings.sound,
|
|
||||||
settings.noSound,
|
|
||||||
)
|
|
||||||
},
|
},
|
||||||
[settings],
|
[settings],
|
||||||
)
|
)
|
||||||
|
@ -57,20 +73,146 @@ export default function EditSet() {
|
||||||
[startTimer, set, settings],
|
[startTimer, set, settings],
|
||||||
)
|
)
|
||||||
|
|
||||||
const saved = useCallback(
|
const handleSubmit = async () => {
|
||||||
async (value: GymSet) => {
|
console.log(`${EditSet.name}.handleSubmit:`, {set, uri: newImage, name})
|
||||||
if (typeof set.id !== 'number') added(value)
|
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()
|
navigation.goBack()
|
||||||
},
|
}
|
||||||
[added, set.id, navigation],
|
|
||||||
)
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<StackHeader title="Edit set" />
|
<StackHeader title="Edit set" />
|
||||||
|
|
||||||
<View style={{padding: PADDING, flex: 1}}>
|
<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>
|
</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 GymSet from './gym-set'
|
||||||
import MassiveInput from './MassiveInput'
|
import MassiveInput from './MassiveInput'
|
||||||
import {PlanPageParams} from './plan-page-params'
|
import {PlanPageParams} from './plan-page-params'
|
||||||
import SetForm from './SetForm'
|
|
||||||
import Settings from './settings'
|
import Settings from './settings'
|
||||||
import StackHeader from './StackHeader'
|
import StackHeader from './StackHeader'
|
||||||
import StartPlanItem from './StartPlanItem'
|
import StartPlanItem from './StartPlanItem'
|
||||||
|
@ -88,7 +87,7 @@ export default function StartPlan() {
|
||||||
}, [refresh])
|
}, [refresh])
|
||||||
|
|
||||||
const handleSubmit = async () => {
|
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()
|
const [{now}] = await getNow()
|
||||||
await setRepo.save({
|
await setRepo.save({
|
||||||
...best,
|
...best,
|
||||||
|
|
Loading…
Reference in New Issue
Block a user