Remember previous add set

EditSet.tsx

@@ -11,23 +11,27 @@ export default function EditSet({
   onSave,
   title,
   saveText,
+  show,
+  setShow,
 }: {
   onSave: () => void;
   set?: Set;
   setSet: (set?: Set) => void;
   title: string;
   saveText: string;
+  show: boolean;
+  setShow: (show: boolean) => void;
 }) {
-  const [show, setShow] = useState(false);
+  const [showDate, setShowDate] = useState(false);
 
   const onConfirm = (created: Date) => {
     setSet({...set, created: created.toISOString()});
-    setShow(false);
+    setShowDate(false);
   };
 
   return (
     <Portal>
-      <Dialog visible={set ? true : false} onDismiss={() => setSet(undefined)}>
+      <Dialog visible={show} onDismiss={() => setShow(false)}>
         <Dialog.Title>{title}</Dialog.Title>
         <Dialog.ScrollArea>
           <ScrollView>
@@ -63,14 +67,16 @@ export default function EditSet({
             />
             {set?.created && (
               <>
-                <Button icon="calendar-outline" onPress={() => setShow(true)}>
+                <Button
+                  icon="calendar-outline"
+                  onPress={() => setShowDate(true)}>
                   {format(set.created)}
                 </Button>
                 <DateTimePickerModal
-                  isVisible={show}
+                  isVisible={showDate}
                   mode="datetime"
                   onConfirm={onConfirm}
-                  onCancel={() => setShow(false)}
+                  onCancel={() => setShowDate(false)}
                   date={new Date(set.created)}
                 />
               </>
@@ -78,7 +84,7 @@ export default function EditSet({
           </ScrollView>
         </Dialog.ScrollArea>
         <Dialog.Actions>
-          <Button icon="close" onPress={() => setSet(undefined)}>
+          <Button icon="close" onPress={() => setShow(false)}>
             Cancel
           </Button>
           <Button mode="contained" icon="save" onPress={onSave}>

HomePage.tsx

@@ -14,6 +14,8 @@ export default function HomePage() {
   const [sets, setSets] = useState<Set[]>();
   const [offset, setOffset] = useState(0);
   const [edit, setEdit] = useState<Set>();
+  const [showEdit, setShowEdit] = useState(false);
+  const [showNew, setShowNew] = useState(false);
   const [newSet, setNewSet] = useState<Set>();
   const [search, setSearch] = useState('');
   const [refreshing, setRefreshing] = useState(false);
@@ -53,6 +55,8 @@ export default function HomePage() {
         key={item.id}
         setEdit={setEdit}
         onRemove={refresh}
+        setShowEdit={setShowEdit}
+        setShowNew={setShowNew}
       />
     ),
     [setEdit, refresh, setNewSet],
@@ -71,9 +75,9 @@ export default function HomePage() {
         edit?.id,
       ],
     );
-    setEdit(undefined);
+    setShowEdit(false);
     await refresh();
-  }, [edit, setEdit, refresh, db]);
+  }, [edit, setShowEdit, refresh, db]);
 
   const add = useCallback(async () => {
     if (
@@ -92,7 +96,7 @@ export default function HomePage() {
         newSet?.unit || 'kg',
       ],
     );
-    setNewSet(undefined);
+    setShowNew(false);
     await refresh();
     const enabled = await AsyncStorage.getItem('alarmEnabled');
     if (enabled !== 'true') return;
@@ -100,7 +104,7 @@ export default function HomePage() {
     const seconds = await AsyncStorage.getItem('seconds');
     const milliseconds = Number(minutes) * 60 * 1000 + Number(seconds) * 1000;
     NativeModules.AlarmModule.timer(milliseconds);
-  }, [newSet, setNewSet, refresh, db]);
+  }, [newSet, setShowNew, refresh, db]);
 
   const next = useCallback(async () => {
     if (end) return;
@@ -147,6 +151,8 @@ export default function HomePage() {
         title={`Edit ${edit?.name}`}
         saveText="Edit"
         onSave={update}
+        show={showEdit}
+        setShow={setShowEdit}
       />
 
       <EditSet
@@ -155,9 +161,18 @@ export default function HomePage() {
         title="Add set"
         saveText="Add"
         onSave={add}
+        show={showNew}
+        setShow={setShowNew}
       />
       <MassiveFab
-        onPress={() => setNewSet({created: new Date().toISOString()} as Set)}
+        onPress={() => {
+          setNewSet(
+            newSet
+              ? {...newSet, created: new Date().toISOString()}
+              : {created: new Date().toISOString()},
+          );
+          setShowNew(true);
+        }}
       />
     </View>
   );

SetItem.tsx

@@ -7,37 +7,42 @@ import Set from './set';
 export default function SetItem({
   item,
   setEdit,
+  setShowEdit,
   onRemove,
   setNewSet,
+  setShowNew,
 }: {
   item: Set;
   setEdit: (set: Set) => void;
   setNewSet: (set: Set) => void;
+  setShowEdit: (show: boolean) => void;
+  setShowNew: (show: boolean) => void;
   onRemove: () => void;
 }) {
-  const [show, setShow] = useState(false);
+  const [showMenu, setShowMenu] = useState(false);
   const [anchor, setAnchor] = useState({x: 0, y: 0});
   const db = useContext(DatabaseContext);
 
   const remove = useCallback(async () => {
     await db.executeSql(`DELETE FROM sets WHERE id = ?`, [item.id]);
-    setShow(false);
+    setShowMenu(false);
     onRemove();
-  }, [setShow, db, onRemove, item.id]);
+  }, [setShowMenu, db, onRemove, item.id]);
 
   const copy = useCallback(() => {
     const set = {...item};
     delete set.id;
     setNewSet(set);
-    setShow(false);
-  }, [setNewSet, setShow, item]);
+    setShowMenu(false);
+    setShowNew(true);
+  }, [setNewSet, setShowMenu, item, setShowNew]);
 
   const longPress = useCallback(
     (e: GestureResponderEvent) => {
       setAnchor({x: e.nativeEvent.pageX, y: e.nativeEvent.pageY});
-      setShow(true);
+      setShowMenu(true);
     },
-    [setShow, setAnchor],
+    [setShowMenu, setAnchor],
   );
 
   return (
@@ -45,12 +50,16 @@ export default function SetItem({
       <List.Item
         onPress={() => {
           setEdit(item);
+          setShowEdit(true);
         }}
         title={item.name}
         description={`${item.reps} x ${item.weight}${item.unit}`}
         onLongPress={longPress}
         right={() => (
-          <Menu anchor={anchor} visible={show} onDismiss={() => setShow(false)}>
+          <Menu
+            anchor={anchor}
+            visible={showMenu}
+            onDismiss={() => setShowMenu(false)}>
             <Menu.Item icon="trash" onPress={remove} title="Delete" />
             <Menu.Item icon="copy" onPress={copy} title="Copy" />
           </Menu>