Reduce amount of state used by EditSet and Home

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}>

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%',
   },
 });

SetItem.tsx

@@ -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}`}