Massive/EditSet.tsx

119 lines
3.1 KiB
TypeScript

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