2022-07-06 04:27:36 +00:00
|
|
|
import {format} from 'date-fns';
|
2022-07-08 01:51:14 +00:00
|
|
|
import React, {useContext, useEffect, useState} from 'react';
|
2022-07-07 02:18:38 +00:00
|
|
|
import {StyleSheet, Text} from 'react-native';
|
|
|
|
import {Button, Dialog, Portal, TextInput} from 'react-native-paper';
|
|
|
|
import {DatabaseContext} from './App';
|
|
|
|
import Set from './set';
|
2022-07-03 01:50:01 +00:00
|
|
|
|
|
|
|
export default function EditSet({
|
|
|
|
onSave,
|
2022-07-07 02:18:38 +00:00
|
|
|
set,
|
2022-07-08 01:51:14 +00:00
|
|
|
setSet,
|
2022-07-03 01:50:01 +00:00
|
|
|
}: {
|
|
|
|
onSave: () => void;
|
2022-07-07 02:18:38 +00:00
|
|
|
set?: Set;
|
2022-07-08 01:51:14 +00:00
|
|
|
setSet: (set?: Set) => void;
|
2022-07-03 01:50:01 +00:00
|
|
|
}) {
|
2022-07-08 01:51:14 +00:00
|
|
|
const [newSet, setNewSet] = useState({
|
|
|
|
name: '',
|
|
|
|
reps: '',
|
|
|
|
weight: '',
|
|
|
|
unit: '',
|
2022-07-08 03:16:32 +00:00
|
|
|
created: new Date(),
|
2022-07-08 01:51:14 +00:00
|
|
|
});
|
2022-07-07 02:18:38 +00:00
|
|
|
const db = useContext(DatabaseContext);
|
|
|
|
|
2022-07-03 01:50:01 +00:00
|
|
|
useEffect(() => {
|
2022-07-08 06:21:14 +00:00
|
|
|
if (set)
|
2022-07-08 01:51:14 +00:00
|
|
|
setNewSet({
|
|
|
|
...set,
|
|
|
|
reps: set.reps.toString(),
|
|
|
|
weight: set.weight.toString(),
|
|
|
|
created: new Date(set.created),
|
|
|
|
});
|
2022-07-07 02:18:38 +00:00
|
|
|
}, [set]);
|
2022-07-03 01:50:01 +00:00
|
|
|
|
|
|
|
const save = async () => {
|
2022-07-08 01:51:14 +00:00
|
|
|
if (!newSet.name || !newSet.reps || !newSet.weight) return;
|
2022-07-07 03:13:44 +00:00
|
|
|
if (!set?.id)
|
2022-07-03 01:50:01 +00:00
|
|
|
await db.executeSql(
|
|
|
|
`INSERT INTO sets(name, reps, weight, created, unit) VALUES (?,?,?,?,?)`,
|
2022-07-08 01:51:14 +00:00
|
|
|
[
|
|
|
|
newSet.name,
|
|
|
|
newSet.reps,
|
|
|
|
newSet.weight,
|
2022-07-08 06:02:10 +00:00
|
|
|
new Date().toISOString(),
|
2022-07-08 01:51:14 +00:00
|
|
|
newSet.unit || 'kg',
|
|
|
|
],
|
2022-07-03 01:50:01 +00:00
|
|
|
);
|
|
|
|
else
|
|
|
|
await db.executeSql(
|
|
|
|
`UPDATE sets SET name = ?, reps = ?, weight = ?, unit = ? WHERE id = ?`,
|
2022-07-08 01:51:14 +00:00
|
|
|
[newSet.name, newSet.reps, newSet.weight, newSet.unit, set.id],
|
2022-07-03 01:50:01 +00:00
|
|
|
);
|
2022-07-08 01:51:14 +00:00
|
|
|
setSet(undefined);
|
2022-07-03 01:50:01 +00:00
|
|
|
onSave();
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
2022-07-05 00:43:23 +00:00
|
|
|
<Portal>
|
2022-07-08 01:51:14 +00:00
|
|
|
<Dialog visible={!!set} onDismiss={() => setSet(undefined)}>
|
|
|
|
<Dialog.Title>
|
|
|
|
{set?.id ? `Edit "${newSet.name}"` : 'Add a set'}
|
|
|
|
</Dialog.Title>
|
2022-07-06 09:03:56 +00:00
|
|
|
<Dialog.Content>
|
|
|
|
<TextInput
|
|
|
|
style={styles.text}
|
|
|
|
autoFocus
|
|
|
|
label="Name *"
|
2022-07-08 01:51:14 +00:00
|
|
|
value={newSet.name}
|
|
|
|
onChangeText={name => setNewSet({...newSet, name})}
|
2022-07-07 00:45:45 +00:00
|
|
|
autoCorrect={false}
|
2022-07-06 09:03:56 +00:00
|
|
|
/>
|
|
|
|
<TextInput
|
|
|
|
style={styles.text}
|
|
|
|
label="Reps *"
|
|
|
|
keyboardType="numeric"
|
2022-07-08 01:51:14 +00:00
|
|
|
value={newSet.reps}
|
|
|
|
onChangeText={reps => setNewSet({...newSet, reps})}
|
2022-07-06 09:03:56 +00:00
|
|
|
/>
|
|
|
|
<TextInput
|
|
|
|
style={styles.text}
|
|
|
|
label="Weight *"
|
|
|
|
keyboardType="numeric"
|
2022-07-08 01:51:14 +00:00
|
|
|
value={newSet.weight}
|
|
|
|
onChangeText={weight => setNewSet({...newSet, weight})}
|
2022-07-06 09:03:56 +00:00
|
|
|
onSubmitEditing={save}
|
|
|
|
/>
|
|
|
|
<TextInput
|
|
|
|
style={styles.text}
|
|
|
|
label="Unit (kg)"
|
2022-07-08 01:51:14 +00:00
|
|
|
value={newSet.unit}
|
|
|
|
onChangeText={unit => setNewSet({...newSet, unit})}
|
2022-07-06 09:03:56 +00:00
|
|
|
onSubmitEditing={save}
|
|
|
|
/>
|
2022-07-08 01:51:14 +00:00
|
|
|
<Text style={styles.text}>{format(newSet.created, 'PPPP p')}</Text>
|
2022-07-06 09:03:56 +00:00
|
|
|
</Dialog.Content>
|
|
|
|
<Dialog.Actions>
|
2022-07-08 01:51:14 +00:00
|
|
|
<Button icon="close" onPress={() => setSet(undefined)}>
|
2022-07-05 00:43:23 +00:00
|
|
|
Cancel
|
|
|
|
</Button>
|
2022-07-06 09:03:56 +00:00
|
|
|
<Button mode="contained" icon="save" onPress={save}>
|
|
|
|
Save
|
|
|
|
</Button>
|
|
|
|
</Dialog.Actions>
|
|
|
|
</Dialog>
|
2022-07-05 00:43:23 +00:00
|
|
|
</Portal>
|
2022-07-03 01:50:01 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
2022-07-04 04:03:48 +00:00
|
|
|
text: {
|
|
|
|
marginBottom: 10,
|
|
|
|
},
|
2022-07-03 01:50:01 +00:00
|
|
|
title: {
|
|
|
|
fontSize: 20,
|
2022-07-04 04:03:48 +00:00
|
|
|
marginBottom: 10,
|
2022-07-03 01:50:01 +00:00
|
|
|
},
|
|
|
|
});
|