Add undo feature to StartPlan

StartPlan.tsx

@@ -40,13 +40,17 @@ export default function StartPlan() {
     end: set.reps.toString().length,
   });
 
+  const refresh = useCallback(() => {
+    return countMany(workouts).then(newCounts => {
+      setCounts(newCounts);
+      console.log(`${StartPlan.name}.focus:`, {newCounts});
+    });
+  }, [workouts]);
+
   useFocusEffect(
     useCallback(() => {
-      countMany(workouts).then(newCounts => {
+      refresh();
-        setCounts(newCounts);
+    }, [refresh]),
-        console.log(`${StartPlan.name}.focus:`, {newCounts});
-      });
-    }, [workouts]),
   );
 
   const handleSubmit = async () => {
@@ -61,7 +65,7 @@ export default function StartPlan() {
       image: set.image,
       unit,
     });
-    countMany(workouts).then(setCounts);
+    await refresh();
     if (
       settings.notify &&
       (+weight > best.weight || (+reps > best.reps && +weight === best.weight))
@@ -143,6 +147,7 @@ export default function StartPlan() {
               renderItem={props => (
                 <StartPlanItem
                   {...props}
+                  onUndo={refresh}
                   onSelect={select}
                   selected={selected}
                 />

StartPlanItem.tsx

@@ -1,19 +1,39 @@
-import {ListRenderItemInfo, View} from 'react-native';
+import React, {useCallback, useState} from 'react';
-import {List, RadioButton} from 'react-native-paper';
+import {GestureResponderEvent, ListRenderItemInfo, View} from 'react-native';
+import {List, Menu, RadioButton} from 'react-native-paper';
 import {useColor} from './color';
 import CountMany from './count-many';
+import {deleteFirst} from './set.service';
 
 interface Props extends ListRenderItemInfo<CountMany> {
   onSelect: (index: number) => void;
   selected: number;
+  onUndo: () => void;
 }
 
 export default function StartPlanItem(props: Props) {
-  const {index, item, onSelect, selected} = props;
+  const {index, item, onSelect, selected, onUndo} = props;
   const {color} = useColor();
+  const [anchor, setAnchor] = useState({x: 0, y: 0});
+  const [showMenu, setShowMenu] = useState(false);
+
+  const undo = useCallback(async () => {
+    await deleteFirst(item.name);
+    setShowMenu(false);
+    onUndo();
+  }, [setShowMenu, item.name, onUndo]);
+
+  const longPress = useCallback(
+    (e: GestureResponderEvent) => {
+      setAnchor({x: e.nativeEvent.pageX, y: e.nativeEvent.pageY});
+      setShowMenu(true);
+    },
+    [setShowMenu, setAnchor],
+  );
 
   return (
     <List.Item
+      onLongPress={longPress}
       title={item.name}
       description={item.total.toString()}
       onPress={() => onSelect(index)}
@@ -27,6 +47,16 @@ export default function StartPlanItem(props: Props) {
           />
         </View>
       )}
+      right={() => (
+        <>
+          <Menu
+            anchor={anchor}
+            visible={showMenu}
+            onDismiss={() => setShowMenu(false)}>
+            <Menu.Item icon="undo" onPress={undo} title="Undo" />
+          </Menu>
+        </>
+      )}
     />
   );
 }

set.service.ts

@@ -192,3 +192,15 @@ export const getDistinctSets = async ({
   const [result] = await db.executeSql(select, [term, limit, offset]);
   return result.rows.raw();
 };
+
+export const deleteFirst = async (name: string) => {
+  const remove = `
+    DELETE FROM sets WHERE id IN (
+      SELECT id FROM sets
+      WHERE name = ?
+      ORDER BY created DESC
+      LIMIT 1
+    )
+  `;
+  return db.executeSql(remove, [name]);
+};