Add delete dropdown to sets in homepage

Home.tsx

@@ -13,6 +13,7 @@ import {getDb} from './db';
 import EditSet from './EditSet';
 
 import Set from './set';
+import SetItem from './SetItem';
 
 const limit = 20;
 
@@ -39,14 +40,12 @@ export default function Home() {
   }, [search]);
 
   const renderItem = ({item}: {item: Set}) => (
-    <List.Item
-      onPress={() => {
-        setId(item.id);
-        setShowEdit(true);
-      }}
+    <SetItem
+      item={item}
       key={item.id}
-      title={item.name}
-      description={`${item.reps} x ${item.weight}${item.unit}`}
+      setShowEdit={setShowEdit}
+      setId={setId}
+      onRemove={refresh}
     />
   );
 
@@ -70,8 +69,9 @@ export default function Home() {
       `SELECT * from sets WHERE name LIKE ? LIMIT ? OFFSET ?`,
       [`%${search}%`, limit, newOffset],
     );
-    if (!result) return;
+    if (result.rows.length === 0) return;
     if (!sets) return;
+    if (sets.filter(set => set.id === result.rows.item(0).id)) return;
     setSets([...sets, ...result.rows.raw()]);
     setOffset(newOffset);
   };

SetItem.tsx

@@ -0,0 +1,52 @@
+import React, {useState} from 'react';
+import {IconButton, List, Menu} from 'react-native-paper';
+import {getDb} from './db';
+import Set from './set';
+
+export default function SetItem({
+  item,
+  setId,
+  setShowEdit,
+  onRemove,
+}: {
+  item: Set;
+  setId: (id: number) => void;
+  setShowEdit: (show: boolean) => void;
+  onRemove: () => void;
+}) {
+  const [show, setShow] = useState(false);
+
+  const remove = async () => {
+    const db = await getDb();
+    await db.executeSql(`DELETE FROM sets WHERE id = ?`, [item.id]);
+    setShow(false);
+    onRemove();
+  };
+
+  return (
+    <>
+      <List.Item
+        onPress={() => {
+          setId(item.id);
+          setShowEdit(true);
+        }}
+        title={item.name}
+        description={`${item.reps} x ${item.weight}${item.unit}`}
+        onLongPress={() => setShow(true)}
+        right={() => (
+          <Menu
+            anchor={
+              <IconButton
+                icon="ellipsis-vertical"
+                onPress={() => setShow(true)}
+              />
+            }
+            visible={show}
+            onDismiss={() => setShow(false)}>
+            <Menu.Item icon="trash" onPress={remove} title="Delete" />
+          </Menu>
+        )}
+      />
+    </>
+  );
+}