Reduce amount of state used by EditSet and Home
This commit is contained in:
parent
220f867bdc
commit
376ca81e09
86
EditSet.tsx
86
EditSet.tsx
|
@ -1,5 +1,5 @@
|
|||
import {format} from 'date-fns';
|
||||
import React, {useContext, useEffect, useRef, useState} from 'react';
|
||||
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';
|
||||
|
@ -7,98 +7,96 @@ import Set from './set';
|
|||
|
||||
export default function EditSet({
|
||||
onSave,
|
||||
show,
|
||||
setShow,
|
||||
set,
|
||||
setSet,
|
||||
}: {
|
||||
onSave: () => void;
|
||||
show: boolean;
|
||||
setShow: (visible: boolean) => void;
|
||||
set?: Set;
|
||||
setSet: (set?: Set) => void;
|
||||
}) {
|
||||
const [name, setName] = useState('');
|
||||
const [reps, setReps] = useState('');
|
||||
const [weight, setWeight] = useState('');
|
||||
const [unit, setUnit] = useState('');
|
||||
const [created, setCreated] = useState(new Date(new Date().toUTCString()));
|
||||
const weightRef = useRef<any>(null);
|
||||
const repsRef = useRef<any>(null);
|
||||
const unitRef = useRef<any>(null);
|
||||
const [newSet, setNewSet] = useState({
|
||||
name: '',
|
||||
reps: '',
|
||||
weight: '',
|
||||
unit: '',
|
||||
created: new Date(new Date().toUTCString()),
|
||||
});
|
||||
const db = useContext(DatabaseContext);
|
||||
|
||||
const refresh = async () => {
|
||||
if (!set) return setCreated(new Date(new Date().toUTCString()));
|
||||
setName(set.name);
|
||||
setReps(set.reps.toString());
|
||||
setWeight(set.weight.toString());
|
||||
setUnit(set.unit);
|
||||
setCreated(new Date(set.created));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
refresh();
|
||||
console.log('Setting created...');
|
||||
if (set)
|
||||
setNewSet({
|
||||
...set,
|
||||
reps: set.reps.toString(),
|
||||
weight: set.weight.toString(),
|
||||
created: new Date(set.created),
|
||||
});
|
||||
}, [set]);
|
||||
|
||||
const save = async () => {
|
||||
if (!name || !reps || !weight) return;
|
||||
if (!newSet.name || !newSet.reps || !newSet.weight) return;
|
||||
if (!set?.id)
|
||||
await db.executeSql(
|
||||
`INSERT INTO sets(name, reps, weight, created, unit) VALUES (?,?,?,?,?)`,
|
||||
[name, reps, weight, new Date().toISOString(), unit || 'kg'],
|
||||
[
|
||||
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 = ?`,
|
||||
[name, reps, weight, unit, set.id],
|
||||
[newSet.name, newSet.reps, newSet.weight, newSet.unit, set.id],
|
||||
);
|
||||
setShow(false);
|
||||
setSet(undefined);
|
||||
onSave();
|
||||
};
|
||||
|
||||
return (
|
||||
<Portal>
|
||||
<Dialog visible={show} onDismiss={() => setShow(false)}>
|
||||
<Dialog.Title>{set?.id ? `Edit "${name}"` : 'Add a set'}</Dialog.Title>
|
||||
<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={name}
|
||||
onChangeText={setName}
|
||||
onSubmitEditing={() => repsRef.current?.focus()}
|
||||
value={newSet.name}
|
||||
onChangeText={name => setNewSet({...newSet, name})}
|
||||
autoCorrect={false}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.text}
|
||||
label="Reps *"
|
||||
keyboardType="numeric"
|
||||
value={reps}
|
||||
onChangeText={setReps}
|
||||
ref={repsRef}
|
||||
onSubmitEditing={() => weightRef.current?.focus()}
|
||||
value={newSet.reps}
|
||||
onChangeText={reps => setNewSet({...newSet, reps})}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.text}
|
||||
label="Weight *"
|
||||
keyboardType="numeric"
|
||||
value={weight}
|
||||
onChangeText={setWeight}
|
||||
value={newSet.weight}
|
||||
onChangeText={weight => setNewSet({...newSet, weight})}
|
||||
onSubmitEditing={save}
|
||||
ref={weightRef}
|
||||
/>
|
||||
<TextInput
|
||||
style={styles.text}
|
||||
label="Unit (kg)"
|
||||
value={unit}
|
||||
onChangeText={setUnit}
|
||||
ref={unitRef}
|
||||
value={newSet.unit}
|
||||
onChangeText={unit => setNewSet({...newSet, unit})}
|
||||
onSubmitEditing={save}
|
||||
/>
|
||||
<Text style={styles.text}>{format(created, 'PPPP p')}</Text>
|
||||
<Text style={styles.text}>{format(newSet.created, 'PPPP p')}</Text>
|
||||
</Dialog.Content>
|
||||
<Dialog.Actions>
|
||||
<Button icon="close" onPress={() => setShow(false)}>
|
||||
<Button icon="close" onPress={() => setSet(undefined)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button mode="contained" icon="save" onPress={save}>
|
||||
|
|
29
Home.tsx
29
Home.tsx
|
@ -1,17 +1,9 @@
|
|||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import React, {useContext, useEffect, useState} from 'react';
|
||||
import {
|
||||
FlatList,
|
||||
NativeModules,
|
||||
SafeAreaView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import {FlatList, NativeModules, StyleSheet, View} from 'react-native';
|
||||
import {AnimatedFAB, List, Searchbar} from 'react-native-paper';
|
||||
import {DatabaseContext} from './App';
|
||||
import EditSet from './EditSet';
|
||||
|
||||
import Set from './set';
|
||||
import SetItem from './SetItem';
|
||||
|
||||
|
@ -21,7 +13,6 @@ export default function Home() {
|
|||
const [sets, setSets] = useState<Set[]>();
|
||||
const [offset, setOffset] = useState(0);
|
||||
const [edit, setEdit] = useState<Set>();
|
||||
const [show, setShow] = useState(false);
|
||||
const [search, setSearch] = useState('');
|
||||
const [refreshing, setRefresing] = useState(false);
|
||||
const [end, setEnd] = useState(false);
|
||||
|
@ -61,13 +52,7 @@ export default function Home() {
|
|||
}, [search]);
|
||||
|
||||
const renderItem = ({item}: {item: Set}) => (
|
||||
<SetItem
|
||||
item={item}
|
||||
key={item.id}
|
||||
setShowEdit={setShow}
|
||||
setSet={setEdit}
|
||||
onRemove={refresh}
|
||||
/>
|
||||
<SetItem item={item} key={item.id} setSet={setEdit} onRemove={refresh} />
|
||||
);
|
||||
|
||||
const save = async () => {
|
||||
|
@ -111,17 +96,14 @@ export default function Home() {
|
|||
refreshing={refreshing}
|
||||
onRefresh={refreshLoader}
|
||||
/>
|
||||
<EditSet set={edit} show={show} setShow={setShow} onSave={save} />
|
||||
<EditSet set={edit} setSet={setEdit} onSave={save} />
|
||||
|
||||
<AnimatedFAB
|
||||
extended={false}
|
||||
label="Add"
|
||||
icon="add"
|
||||
style={{position: 'absolute', right: 20, bottom: 70}}
|
||||
onPress={() => {
|
||||
setEdit(undefined);
|
||||
setShow(true);
|
||||
}}
|
||||
style={{position: 'absolute', right: 60, bottom: 70}}
|
||||
onPress={() => setEdit(undefined)}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
|
@ -134,5 +116,6 @@ const styles = StyleSheet.create({
|
|||
container: {
|
||||
flexGrow: 1,
|
||||
padding: 10,
|
||||
paddingBottom: '10%',
|
||||
},
|
||||
});
|
||||
|
|
|
@ -6,12 +6,10 @@ import Set from './set';
|
|||
export default function SetItem({
|
||||
item,
|
||||
setSet,
|
||||
setShowEdit,
|
||||
onRemove,
|
||||
}: {
|
||||
item: Set;
|
||||
setSet: (set: Set) => void;
|
||||
setShowEdit: (show: boolean) => void;
|
||||
onRemove: () => void;
|
||||
}) {
|
||||
const [showMenu, setShowMenu] = useState(false);
|
||||
|
@ -26,7 +24,6 @@ export default function SetItem({
|
|||
const copy = () => {
|
||||
const {id, ...set} = {...item};
|
||||
setSet(set);
|
||||
setShowEdit(true);
|
||||
setShowMenu(false);
|
||||
};
|
||||
|
||||
|
@ -35,7 +32,6 @@ export default function SetItem({
|
|||
<List.Item
|
||||
onPress={() => {
|
||||
setSet(item);
|
||||
setShowEdit(true);
|
||||
}}
|
||||
title={item.name}
|
||||
description={`${item.reps} x ${item.weight}${item.unit}`}
|
||||
|
|
Loading…
Reference in New Issue
Block a user