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