implemented delete entry

ebbmango · Jan 7, 2025 · 9c82c5c · 9c82c5c
1 parent 258b03d
commit 9c82c5c
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 70 deletions.
diff --git a/components/Screens/Home/MealDrawer.tsx b/components/Screens/Home/MealDrawer.tsx
@@ -1,15 +1,15 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Dimensions, StyleSheet, TouchableOpacity } from 'react-native';
-import { ExpandableSection, Text, View, Colors, Button, Drawer } from 'react-native-ui-lib';
+import { ExpandableSection, Text, View, Colors, Button, Drawer, Icon } from 'react-native-ui-lib';
 
 import IconSVG from '../../Shared/icons/IconSVG';
 import RotatingCaret from './RotatingCaret';
 import { NavigationProp, useNavigation } from '@react-navigation/native';
 import { RootStackParamList } from 'navigation';
 import { Food, Meal, Nutritable } from 'database/types';
-import { SQLiteDatabase, useSQLiteContext } from 'expo-sqlite';
+import { addDatabaseChangeListener, SQLiteDatabase, useSQLiteContext } from 'expo-sqlite';
 import { useQuery } from '@tanstack/react-query';
-import { getEntriesByMealAndDate } from 'database/queries/entriesQueries';
+import { deleteEntry, getEntriesByMealAndDate } from 'database/queries/entriesQueries';
 import { useDate } from 'context/DateContext';
 import { getNutritablesByIds } from 'database/queries/nutritablesQueries';
 import { getFoodsByIds } from 'database/queries/foodsQueries';
@@ -100,6 +100,15 @@ export default function MealDrawer({ meal }: MealDrawerProps) {
     initialData: [],
   });
 
+  useEffect(() => {
+    const listener = addDatabaseChangeListener((change) => {
+      if (change.tableName === 'entries') refetchEntries();
+    });
+    return () => {
+      listener.remove();
+    };
+  }, []);
+
   useEffect(() => {
     refetchEntries();
   }, [date.get()]);
@@ -161,51 +170,80 @@ function DrawerHeader({ expanded, mealName }: DrawerHeaderProps) {
 // This is the body for each meal's drawer.
 // It should contain: each food, its amount, its caloric total; "add food" button.
 function DrawerBody({ meal, entries }: DrawerBodyProps) {
+  const database: SQLiteDatabase = useSQLiteContext();
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
-  const colors = useColors();
+  const screenWidth = Dimensions.get('window').width;
 
   return (
     <View style={styles.sectionBody}>
       {/* Each entry COMES HERE*/}
       {entries?.map(
         (entry) =>
           entry.food && (
-            <View row key={entry.id}>
-              <View
-                flex
-                style={{
-                  // width: '',
-                  paddingStart: 20,
-                  paddingEnd: 8,
-                  backgroundColor: Colors.violet80,
-                  paddingVertical: 8,
-                  borderTopStartRadius: 100,
-                  borderBottomStartRadius: 100,
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  gap: 4,
-                }}>
-                {/* <Text violet40>{`${entry.kcals} kcal `}</Text> */}
-                <Text style={{ flex: 1, fontSize: 16 }}>{entry.food.name}</Text>
-                <Text violet50>{`${entry.amount}${entry.unit}`}</Text>
-              </View>
-              <View
-                row
-                center
-                style={{
-                  backgroundColor: Colors.violet50,
-                  borderTopEndRadius: 100,
-                  borderBottomEndRadius: 100,
-                  minWidth: 68,
-                  paddingEnd: 12,
-                  paddingStart: 8,
-                  paddingVertical: 4,
-                  gap: 4,
-                }}>
-                <IconSVG name="ball-pile-solid" color={Colors.violet40} width={12} />
-                <Text violet40>{entry.kcals}</Text>
+            <Drawer
+              disableHaptic
+              itemsTintColor=""
+              style={{ flex: 1, borderRadius: 100 }}
+              key={entry.id}
+              bounciness={100}
+              fullSwipeRight
+              onFullSwipeRight={() => deleteEntry(database, { entryId: entry.id })}
+              rightItems={[
+                {
+                  customElement: (
+                    <View centerH>
+                      <IconSVG
+                        name="trash-circle-solid"
+                        color={Colors.violet40}
+                        width={28}
+                        // style={{ marginRight: 2 }}
+                      />
+                    </View>
+                  ),
+                  style: { borderRadius: 100 },
+                  background: Colors.grey80,
+                  onPress: () => {
+                    () => deleteEntry(database, { entryId: entry.id });
+                  },
+                },
+              ]}>
+              <View row key={entry.id} style={{ flex: 1, width: screenWidth * 0.8 * 0.88 }}>
+                <View
+                  flex
+                  style={{
+                    // width:
+                    paddingStart: 20,
+                    paddingEnd: 8,
+                    backgroundColor: Colors.violet80,
+                    paddingVertical: 8,
+                    borderTopStartRadius: 100,
+                    borderBottomStartRadius: 100,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 4,
+                  }}>
+                  {/* <Text violet40>{`${entry.kcals} kcal `}</Text> */}
+                  <Text style={{ flex: 1, fontSize: 16 }}>{entry.food.name}</Text>
+                  <Text violet50>{`${entry.amount}${entry.unit}`}</Text>
+                </View>
+                <View
+                  row
+                  center
+                  style={{
+                    backgroundColor: Colors.violet50,
+                    borderTopEndRadius: 100,
+                    borderBottomEndRadius: 100,
+                    minWidth: 68,
+                    paddingEnd: 12,
+                    paddingStart: 8,
+                    paddingVertical: 4,
+                    gap: 4,
+                  }}>
+                  <IconSVG name="ball-pile-solid" color={Colors.violet40} width={12} />
+                  <Text violet40>{entry.kcals}</Text>
+                </View>
               </View>
-            </View>
+            </Drawer>
           )
       )}
 

diff --git a/components/Shared/icons/SVGs.ts b/components/Shared/icons/SVGs.ts
@@ -150,6 +150,14 @@ const SVGs = {
     viewBox: "0 0 512 512",
     path:
       "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM164.1 325.5C182 346.2 212.6 368 256 368s74-21.8 91.9-42.5c5.8-6.7 15.9-7.4 22.6-1.6s7.4 15.9 1.6 22.6C349.8 372.1 311.1 400 256 400s-93.8-27.9-116.1-53.5c-5.8-6.7-5.1-16.8 1.6-22.6s16.8-5.1 22.6 1.6zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm156.4 25.6c-5.3 7.1-15.3 8.5-22.4 3.2s-8.5-15.3-3.2-22.4c30.4-40.5 91.2-40.5 121.6 0c5.3 7.1 3.9 17.1-3.2 22.4s-17.1 3.9-22.4-3.2c-17.6-23.5-52.8-23.5-70.4 0z"
+  },
+  "trash-solid": {
+    viewBox: "0 0 448 512",
+    path: "M135.2 17.7L128 32 32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0-7.2-14.3C307.4 6.8 296.3 0 284.2 0L163.8 0c-12.1 0-23.2 6.8-28.6 17.7zM416 128L32 128 53.2 467c1.6 25.3 22.6 45 47.9 45l245.8 0c25.3 0 46.3-19.7 47.9-45L416 128z"
+  },
+  "trash-circle-solid": {
+    viewBox: "0 0 512 512",
+    path: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM160 128l41.4 0 11.3-11.3c3-3 7.1-4.7 11.3-4.7l64 0c4.2 0 8.3 1.7 11.3 4.7L310.6 128l41.4 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-192 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64l192 0L338.4 354.7c-1.4 16.6-15.2 29.3-31.9 29.3l-101.1 0c-16.6 0-30.5-12.8-31.9-29.3L160 192z"
   }
 }
 

diff --git a/database/queries/entriesQueries.ts b/database/queries/entriesQueries.ts
@@ -47,4 +47,9 @@ export const getEntriesByMealAndDate = async (database: SQLiteDatabase, params:
         mealId: row.mealId
     }))
 
-}
+}
+
+export const deleteEntry = (database: SQLiteDatabase, params: { entryId: number }) => {
+    const query = `DELETE FROM entries WHERE id = $entryId;`
+    return database.runSync(query, toSQLiteParams(params));
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,18 +20,19 @@
     "@tanstack/react-query": "^5.62.3",
     "@types/d3": "^7.4.3",
     "d3": "^7.9.0",
-    "expo": "~52.0.19",
+    "expo": "~52.0.20",
     "expo-linear-gradient": "~14.0.1",
-    "expo-sqlite": "~15.0.3",
+    "expo-sqlite": "~15.0.5",
     "expo-status-bar": "~2.0.0",
     "react": "18.3.1",
     "react-native": "^0.76.5",
     "react-native-gesture-handler": "~2.20.2",
+    "react-native-haptic-feedback": "^2.3.3",
     "react-native-paper": "^5.12.5",
     "react-native-picky": "^0.4.0",
     "react-native-reanimated": "^3.16.5",
     "react-native-safe-area-context": "4.12.0",
-    "react-native-screens": "~4.1.0",
+    "react-native-screens": "~4.4.0",
     "react-native-svg": "^15.8.0",
     "react-native-ui-lib": "^7.34.5",
     "react-native-wheely": "^0.6.0",