2022-09-04 02:05:25 +00:00
|
|
|
import React, {useEffect, useRef, useState} from 'react';
|
2022-09-03 03:26:10 +00:00
|
|
|
import {ScrollView} from 'react-native';
|
2022-09-01 11:43:53 +00:00
|
|
|
import {Button, Text} from 'react-native-paper';
|
2022-09-16 09:07:02 +00:00
|
|
|
import {MARGIN} from './constants';
|
2022-08-26 01:54:51 +00:00
|
|
|
import MassiveInput from './MassiveInput';
|
2022-07-20 03:48:48 +00:00
|
|
|
import Set from './set';
|
2022-09-04 04:56:46 +00:00
|
|
|
import {getSets} from './set.service';
|
2022-07-20 03:48:48 +00:00
|
|
|
|
|
|
|
export default function SetForm({
|
|
|
|
save,
|
|
|
|
set,
|
2022-08-24 03:36:49 +00:00
|
|
|
workouts,
|
2022-07-20 03:48:48 +00:00
|
|
|
}: {
|
|
|
|
set: Set;
|
|
|
|
save: (set: Set) => void;
|
2022-08-24 03:36:49 +00:00
|
|
|
workouts?: string[];
|
2022-07-20 03:48:48 +00:00
|
|
|
}) {
|
|
|
|
const [name, setName] = useState(set.name);
|
|
|
|
const [reps, setReps] = useState(set.reps.toString());
|
|
|
|
const [weight, setWeight] = useState(set.weight.toString());
|
|
|
|
const [unit, setUnit] = useState(set.unit);
|
2022-08-28 08:55:12 +00:00
|
|
|
const [uri, setUri] = useState(set.image);
|
2022-08-07 03:09:45 +00:00
|
|
|
const [selection, setSelection] = useState({
|
|
|
|
start: 0,
|
|
|
|
end: set.reps.toString().length,
|
|
|
|
});
|
2022-07-20 03:48:48 +00:00
|
|
|
const weightRef = useRef<any>(null);
|
2022-08-23 03:58:44 +00:00
|
|
|
const repsRef = useRef<any>(null);
|
2022-09-01 01:59:06 +00:00
|
|
|
|
2022-09-01 01:12:39 +00:00
|
|
|
useEffect(() => {
|
|
|
|
console.log('SetForm.useEffect:', {uri, name: set.name});
|
|
|
|
if (!uri)
|
2022-09-04 03:28:21 +00:00
|
|
|
getSets({search: set.name, limit: 1, offset: 0}).then(sets =>
|
|
|
|
setUri(sets[0]?.image),
|
|
|
|
);
|
2022-09-04 02:05:25 +00:00
|
|
|
}, [uri, set.name]);
|
2022-09-01 01:12:39 +00:00
|
|
|
|
2022-07-20 03:48:48 +00:00
|
|
|
const handleSubmit = () => {
|
2022-08-23 03:58:44 +00:00
|
|
|
if (!name) return;
|
2022-07-20 03:48:48 +00:00
|
|
|
save({
|
|
|
|
name,
|
|
|
|
reps: Number(reps),
|
|
|
|
weight: Number(weight),
|
|
|
|
id: set.id,
|
|
|
|
unit,
|
2022-08-28 08:55:12 +00:00
|
|
|
image: uri,
|
2022-07-20 03:48:48 +00:00
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<ScrollView style={{height: '90%'}}>
|
2022-08-26 01:54:51 +00:00
|
|
|
<MassiveInput
|
2022-08-20 04:38:18 +00:00
|
|
|
label="Name"
|
|
|
|
value={name}
|
|
|
|
onChangeText={setName}
|
|
|
|
autoCorrect={false}
|
2022-08-23 03:58:44 +00:00
|
|
|
autoFocus={!name}
|
|
|
|
onSubmitEditing={() => repsRef.current?.focus()}
|
2022-08-20 04:38:18 +00:00
|
|
|
/>
|
2022-08-26 01:54:51 +00:00
|
|
|
<MassiveInput
|
2022-08-20 04:38:18 +00:00
|
|
|
label="Reps"
|
|
|
|
keyboardType="numeric"
|
|
|
|
value={reps}
|
|
|
|
onChangeText={setReps}
|
|
|
|
onSubmitEditing={() => weightRef.current?.focus()}
|
|
|
|
selection={selection}
|
|
|
|
onSelectionChange={e => setSelection(e.nativeEvent.selection)}
|
2022-08-23 03:58:44 +00:00
|
|
|
autoFocus={!!name}
|
2022-08-20 04:38:18 +00:00
|
|
|
blurOnSubmit={false}
|
2022-08-26 01:54:51 +00:00
|
|
|
innerRef={repsRef}
|
2022-08-20 04:38:18 +00:00
|
|
|
/>
|
2022-08-26 01:54:51 +00:00
|
|
|
<MassiveInput
|
2022-08-20 04:38:18 +00:00
|
|
|
label="Weight"
|
|
|
|
keyboardType="numeric"
|
|
|
|
value={weight}
|
|
|
|
onChangeText={setWeight}
|
|
|
|
onSubmitEditing={handleSubmit}
|
2022-08-26 01:54:51 +00:00
|
|
|
innerRef={weightRef}
|
2022-08-20 04:38:18 +00:00
|
|
|
/>
|
2022-08-26 01:54:51 +00:00
|
|
|
<MassiveInput
|
2022-09-18 06:10:19 +00:00
|
|
|
autoCapitalize="none"
|
|
|
|
label="Unit"
|
2022-08-20 04:38:18 +00:00
|
|
|
value={unit}
|
|
|
|
onChangeText={setUnit}
|
|
|
|
onSubmitEditing={handleSubmit}
|
2022-07-20 03:48:48 +00:00
|
|
|
/>
|
2022-09-16 09:07:02 +00:00
|
|
|
<Text style={{marginBottom: MARGIN}}>
|
2022-08-24 03:36:49 +00:00
|
|
|
{workouts?.map((workout, index) => (
|
2022-08-25 02:16:30 +00:00
|
|
|
<React.Fragment key={workout}>
|
|
|
|
<Text
|
|
|
|
style={{
|
|
|
|
fontWeight: workout === name ? 'bold' : 'normal',
|
|
|
|
textDecorationLine: workout === name ? 'underline' : 'none',
|
|
|
|
}}>
|
|
|
|
{workout}
|
|
|
|
</Text>
|
2022-08-24 03:36:49 +00:00
|
|
|
{index === workouts.length - 1 ? '.' : ', '}
|
2022-08-25 02:16:30 +00:00
|
|
|
</React.Fragment>
|
2022-08-24 03:36:49 +00:00
|
|
|
))}
|
|
|
|
</Text>
|
2022-07-20 03:48:48 +00:00
|
|
|
</ScrollView>
|
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>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|