2022-10-31 04:22:08 +00:00
|
|
|
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'
|
2022-11-01 02:55:37 +00:00
|
|
|
import {getNow, setRepo} from './db'
|
2022-10-31 04:22:08 +00:00
|
|
|
import GymSet from './gym-set'
|
|
|
|
import MassiveInput from './MassiveInput'
|
2022-11-01 03:50:03 +00:00
|
|
|
import Settings from './settings'
|
2022-11-01 02:55:37 +00:00
|
|
|
import {toast} from './toast'
|
2022-07-20 03:48:48 +00:00
|
|
|
|
|
|
|
export default function SetForm({
|
|
|
|
save,
|
|
|
|
set,
|
2022-11-01 03:50:03 +00:00
|
|
|
settings,
|
2022-07-20 03:48:48 +00:00
|
|
|
}: {
|
2022-10-31 04:22:08 +00:00
|
|
|
set: GymSet
|
|
|
|
save: (set: GymSet) => void
|
2022-11-01 03:50:03 +00:00
|
|
|
settings: Settings
|
2022-07-20 03:48:48 +00:00
|
|
|
}) {
|
2022-10-31 04:22:08 +00:00
|
|
|
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)
|
2022-08-07 03:09:45 +00:00
|
|
|
const [selection, setSelection] = useState({
|
|
|
|
start: 0,
|
|
|
|
end: set.reps.toString().length,
|
2022-10-31 04:22:08 +00:00
|
|
|
})
|
|
|
|
const [removeImage, setRemoveImage] = useState(false)
|
|
|
|
const weightRef = useRef<TextInput>(null)
|
|
|
|
const repsRef = useRef<TextInput>(null)
|
|
|
|
const unitRef = useRef<TextInput>(null)
|
2022-09-01 01:59:06 +00:00
|
|
|
|
2022-09-30 00:12:11 +00:00
|
|
|
const handleSubmit = async () => {
|
2022-10-31 04:22:08 +00:00
|
|
|
console.log(`${SetForm.name}.handleSubmit:`, {set, uri: newImage, name})
|
|
|
|
if (!name) return
|
|
|
|
let image = newImage
|
2022-10-02 04:59:08 +00:00
|
|
|
if (!newImage && !removeImage)
|
2022-10-31 04:22:08 +00:00
|
|
|
image = await setRepo.findOne({where: {name}}).then(s => s?.image)
|
2022-10-31 00:20:36 +00:00
|
|
|
|
2022-10-31 04:22:08 +00:00
|
|
|
console.log(`${SetForm.name}.handleSubmit:`, {image})
|
2022-11-01 02:55:37 +00:00
|
|
|
const [{now}] = await getNow()
|
2022-07-20 03:48:48 +00:00
|
|
|
save({
|
|
|
|
name,
|
2022-11-01 02:55:37 +00:00
|
|
|
created: now,
|
2022-07-20 03:48:48 +00:00
|
|
|
reps: Number(reps),
|
|
|
|
weight: Number(weight),
|
|
|
|
id: set.id,
|
|
|
|
unit,
|
2022-10-01 02:35:52 +00:00
|
|
|
image,
|
2022-09-20 23:59:14 +00:00
|
|
|
minutes: Number(set.minutes ?? 3),
|
|
|
|
seconds: Number(set.seconds ?? 30),
|
2022-09-20 23:50:20 +00:00
|
|
|
sets: set.sets ?? 3,
|
2022-10-31 04:05:31 +00:00
|
|
|
hidden: false,
|
2022-10-31 04:22:08 +00:00
|
|
|
})
|
|
|
|
}
|
2022-07-20 03:48:48 +00:00
|
|
|
|
2022-09-27 04:41:23 +00:00
|
|
|
const handleName = (value: string) => {
|
2022-10-31 04:22:08 +00:00
|
|
|
setName(value.replace(/,|'/g, ''))
|
2022-09-27 04:41:23 +00:00
|
|
|
if (value.match(/,|'/))
|
2022-11-01 02:55:37 +00:00
|
|
|
toast('Commas and single quotes would break CSV exports')
|
2022-10-31 04:22:08 +00:00
|
|
|
}
|
2022-09-27 04:41:23 +00:00
|
|
|
|
|
|
|
const handleUnit = (value: string) => {
|
2022-10-31 04:22:08 +00:00
|
|
|
setUnit(value.replace(/,|'/g, ''))
|
2022-09-27 04:41:23 +00:00
|
|
|
if (value.match(/,|'/))
|
2022-11-01 02:55:37 +00:00
|
|
|
toast('Commas and single quotes would break CSV exports')
|
2022-10-31 04:22:08 +00:00
|
|
|
}
|
2022-09-27 04:41:23 +00:00
|
|
|
|
2022-10-01 02:35:52 +00:00
|
|
|
const changeImage = useCallback(async () => {
|
|
|
|
const {fileCopyUri} = await DocumentPicker.pickSingle({
|
|
|
|
type: 'image/*',
|
|
|
|
copyTo: 'documentDirectory',
|
2022-10-31 04:22:08 +00:00
|
|
|
})
|
|
|
|
if (fileCopyUri) setNewImage(fileCopyUri)
|
|
|
|
}, [])
|
2022-10-01 02:35:52 +00:00
|
|
|
|
|
|
|
const handleRemove = useCallback(async () => {
|
2022-10-31 04:22:08 +00:00
|
|
|
setNewImage('')
|
|
|
|
setRemoveImage(true)
|
|
|
|
setShowRemove(false)
|
|
|
|
}, [])
|
2022-10-01 02:35:52 +00:00
|
|
|
|
2022-07-20 03:48:48 +00:00
|
|
|
return (
|
|
|
|
<>
|
2022-10-13 03:32:12 +00:00
|
|
|
<View style={{flex: 1}}>
|
2022-08-26 01:54:51 +00:00
|
|
|
<MassiveInput
|
2022-10-13 03:32:12 +00:00
|
|
|
label="Name"
|
|
|
|
value={name}
|
|
|
|
onChangeText={handleName}
|
|
|
|
autoCorrect={false}
|
|
|
|
autoFocus={!name}
|
|
|
|
onSubmitEditing={() => repsRef.current?.focus()}
|
2022-08-20 04:38:18 +00:00
|
|
|
/>
|
2022-10-13 03:32:12 +00:00
|
|
|
<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}
|
|
|
|
/>
|
2022-11-01 03:50:03 +00:00
|
|
|
{settings.showUnit && (
|
2022-10-13 03:32:12 +00:00
|
|
|
<MassiveInput
|
|
|
|
autoCapitalize="none"
|
|
|
|
label="Unit"
|
|
|
|
value={unit}
|
|
|
|
onChangeText={handleUnit}
|
|
|
|
innerRef={unitRef}
|
|
|
|
/>
|
|
|
|
)}
|
2022-11-01 03:50:03 +00:00
|
|
|
{typeof set.id === 'number' && settings.showDate && (
|
2022-10-14 05:20:30 +00:00
|
|
|
<MassiveInput label="Created" disabled value={set.created} />
|
|
|
|
)}
|
2022-11-01 03:50:03 +00:00
|
|
|
{settings.images && newImage && (
|
2022-10-13 03:32:12 +00:00
|
|
|
<TouchableRipple
|
|
|
|
style={{marginBottom: MARGIN}}
|
|
|
|
onPress={changeImage}
|
|
|
|
onLongPress={() => setShowRemove(true)}>
|
|
|
|
<Card.Cover source={{uri: newImage}} />
|
|
|
|
</TouchableRipple>
|
|
|
|
)}
|
2022-11-01 03:50:03 +00:00
|
|
|
{settings.images && !newImage && (
|
2022-10-13 03:32:12 +00:00
|
|
|
<Button
|
|
|
|
style={{marginBottom: MARGIN}}
|
|
|
|
onPress={changeImage}
|
|
|
|
icon="add-photo-alternate">
|
|
|
|
Image
|
|
|
|
</Button>
|
|
|
|
)}
|
|
|
|
</View>
|
2022-08-23 03:58:44 +00:00
|
|
|
<Button
|
|
|
|
disabled={!name}
|
|
|
|
mode="contained"
|
|
|
|
icon="save"
|
|
|
|
onPress={handleSubmit}>
|
2022-07-20 03:48:48 +00:00
|
|
|
Save
|
|
|
|
</Button>
|
2022-10-01 02:35:52 +00:00
|
|
|
<ConfirmDialog
|
|
|
|
title="Remove image"
|
|
|
|
onOk={handleRemove}
|
|
|
|
show={showRemove}
|
|
|
|
setShow={setShowRemove}>
|
|
|
|
Are you sure you want to remove the image?
|
|
|
|
</ConfirmDialog>
|
2022-07-20 03:48:48 +00:00
|
|
|
</>
|
2022-10-31 04:22:08 +00:00
|
|
|
)
|
2022-07-20 03:48:48 +00:00
|
|
|
}
|