Create separate edit/add set displays
This commit is contained in:
parent
25ce5d9aac
commit
f4a9bceb61
61
EditSet.tsx
61
EditSet.tsx
|
@ -1,61 +1,26 @@
|
|||
import {format} from 'date-fns';
|
||||
import React, {useContext} from 'react';
|
||||
import React 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({
|
||||
onUpdate,
|
||||
onCreate,
|
||||
set,
|
||||
setSet,
|
||||
onSave,
|
||||
title,
|
||||
saveText,
|
||||
}: {
|
||||
onUpdate: () => void;
|
||||
onCreate: () => void;
|
||||
onSave: () => void;
|
||||
set?: Set;
|
||||
setSet: (set?: Set) => void;
|
||||
title: string;
|
||||
saveText: string;
|
||||
}) {
|
||||
const db = useContext(DatabaseContext);
|
||||
|
||||
const update = async () => {
|
||||
console.log(`${EditSet.name}.${update.name}`, {set});
|
||||
await db.executeSql(
|
||||
`INSERT INTO sets(name, reps, weight, created, unit) VALUES (?,?,?,?,?)`,
|
||||
[
|
||||
set?.name,
|
||||
set?.reps,
|
||||
set?.weight,
|
||||
new Date().toISOString(),
|
||||
set?.unit || 'kg',
|
||||
],
|
||||
);
|
||||
onUpdate();
|
||||
};
|
||||
|
||||
const create = async () => {
|
||||
console.log(`${EditSet.name}.${create.name}`, {set});
|
||||
await db.executeSql(
|
||||
`UPDATE sets SET name = ?, reps = ?, weight = ?, unit = ? WHERE id = ?`,
|
||||
[set?.name, set?.reps, set?.weight, set?.unit, set?.id],
|
||||
);
|
||||
onCreate();
|
||||
};
|
||||
|
||||
const save = async () => {
|
||||
if (!set?.name || set?.reps === undefined || set?.weight === undefined)
|
||||
return;
|
||||
if (set?.id) await update();
|
||||
else await create();
|
||||
setSet(undefined);
|
||||
};
|
||||
|
||||
return (
|
||||
<Portal>
|
||||
<Dialog visible={!!set} onDismiss={() => setSet(undefined)}>
|
||||
<Dialog.Title>
|
||||
{set?.id ? `Edit "${set.name}"` : 'Add a set'}
|
||||
</Dialog.Title>
|
||||
<Dialog visible={set ? true : false} onDismiss={() => setSet(undefined)}>
|
||||
<Dialog.Title>{title}</Dialog.Title>
|
||||
<Dialog.Content>
|
||||
<TextInput
|
||||
style={styles.text}
|
||||
|
@ -78,14 +43,14 @@ export default function EditSet({
|
|||
keyboardType="numeric"
|
||||
value={set?.weight?.toString() || ''}
|
||||
onChangeText={weight => setSet({...set, weight})}
|
||||
onSubmitEditing={save}
|
||||
onSubmitEditing={onSave}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.text}
|
||||
label="Unit (kg)"
|
||||
value={set?.unit}
|
||||
onChangeText={unit => setSet({...set, unit})}
|
||||
onSubmitEditing={save}
|
||||
onSubmitEditing={onSave}
|
||||
/>
|
||||
<Text style={styles.text}>
|
||||
{format(
|
||||
|
@ -98,8 +63,8 @@ export default function EditSet({
|
|||
<Button icon="close" onPress={() => setSet(undefined)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button mode="contained" icon="save" onPress={save}>
|
||||
Save
|
||||
<Button mode="contained" icon="save" onPress={onSave}>
|
||||
{saveText}
|
||||
</Button>
|
||||
</Dialog.Actions>
|
||||
</Dialog>
|
||||
|
|
66
HomePage.tsx
66
HomePage.tsx
|
@ -14,8 +14,9 @@ export default function HomePage() {
|
|||
const [sets, setSets] = useState<Set[]>();
|
||||
const [offset, setOffset] = useState(0);
|
||||
const [edit, setEdit] = useState<Set>();
|
||||
const [newSet, setNewSet] = useState<Set>();
|
||||
const [search, setSearch] = useState('');
|
||||
const [refreshing, setRefresing] = useState(false);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [end, setEnd] = useState(false);
|
||||
const db = useContext(DatabaseContext);
|
||||
|
||||
|
@ -35,10 +36,10 @@ export default function HomePage() {
|
|||
setEnd(false);
|
||||
}, [search, db, selectSets]);
|
||||
|
||||
const refreshLoader = async () => {
|
||||
setRefresing(true);
|
||||
refresh().finally(() => setRefresing(false));
|
||||
};
|
||||
const refreshLoader = useCallback(async () => {
|
||||
setRefreshing(true);
|
||||
refresh().finally(() => setRefreshing(false));
|
||||
}, [setRefreshing, refresh]);
|
||||
|
||||
useEffect(() => {
|
||||
refresh();
|
||||
|
@ -48,19 +49,45 @@ export default function HomePage() {
|
|||
<SetItem item={item} key={item.id} setSet={setEdit} onRemove={refresh} />
|
||||
);
|
||||
|
||||
const save = async () => {
|
||||
refresh();
|
||||
const update = useCallback(async () => {
|
||||
await db.executeSql(
|
||||
`UPDATE sets SET name = ?, reps = ?, weight = ?, unit = ? WHERE id = ?`,
|
||||
[edit?.name, edit?.reps, edit?.weight, edit?.unit, edit?.id],
|
||||
);
|
||||
setEdit(undefined);
|
||||
await refresh();
|
||||
}, [edit, setEdit, refresh]);
|
||||
|
||||
const add = useCallback(async () => {
|
||||
if (
|
||||
newSet?.name === undefined ||
|
||||
newSet?.reps === 0 ||
|
||||
newSet?.weight === 0
|
||||
)
|
||||
return;
|
||||
await db.executeSql(
|
||||
`INSERT INTO sets(name, reps, weight, created, unit) VALUES (?,?,?,?,?)`,
|
||||
[
|
||||
newSet?.name,
|
||||
newSet?.reps,
|
||||
newSet?.weight,
|
||||
new Date().toISOString(),
|
||||
newSet?.unit || 'kg',
|
||||
],
|
||||
);
|
||||
setNewSet(undefined);
|
||||
await refresh();
|
||||
const enabled = await AsyncStorage.getItem('alarmEnabled');
|
||||
if (enabled !== 'true') return;
|
||||
const minutes = await AsyncStorage.getItem('minutes');
|
||||
const seconds = await AsyncStorage.getItem('seconds');
|
||||
const milliseconds = Number(minutes) * 60 * 1000 + Number(seconds) * 1000;
|
||||
NativeModules.AlarmModule.timer(milliseconds);
|
||||
};
|
||||
}, [newSet, setNewSet, refresh]);
|
||||
|
||||
const next = useCallback(async () => {
|
||||
if (end) return;
|
||||
setRefresing(true);
|
||||
setRefreshing(true);
|
||||
const newOffset = offset + limit;
|
||||
console.log(`${HomePage.name}.next:`, {
|
||||
offset,
|
||||
|
@ -70,7 +97,7 @@ export default function HomePage() {
|
|||
});
|
||||
const [result] = await db
|
||||
.executeSql(selectSets, [`%${search}%`, limit, newOffset])
|
||||
.finally(() => setRefresing(false));
|
||||
.finally(() => setRefreshing(false));
|
||||
if (result.rows.length === 0) return setEnd(true);
|
||||
if (!sets) return;
|
||||
setSets([...sets, ...result.rows.raw()]);
|
||||
|
@ -96,8 +123,23 @@ export default function HomePage() {
|
|||
refreshing={refreshing}
|
||||
onRefresh={refreshLoader}
|
||||
/>
|
||||
<EditSet set={edit} setSet={setEdit} onCreate={save} onUpdate={refresh} />
|
||||
<MassiveFab onPress={() => setEdit({} as Set)} />
|
||||
|
||||
<EditSet
|
||||
set={edit}
|
||||
setSet={setEdit}
|
||||
title={`Edit ${edit?.name}`}
|
||||
saveText="Edit"
|
||||
onSave={update}
|
||||
/>
|
||||
|
||||
<EditSet
|
||||
set={newSet}
|
||||
setSet={setNewSet}
|
||||
title="Add set"
|
||||
saveText="Add"
|
||||
onSave={add}
|
||||
/>
|
||||
<MassiveFab onPress={() => setNewSet({} as Set)} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user