feat(examples/to-do-app): add removeCategory functionality with confirmation alert

Author: Gioee

examples/to-do-app/hooks/useCategories.js

@@ -30,6 +30,16 @@ const useCategories = () => {
     }
   }
 
+  const removeCategory = async categoryName => {
+    try {
+      await db.execute('DELETE FROM tags WHERE name = ?', [categoryName])
+      db.execute('SELECT cloudsync_network_send_changes();')
+      setMoreCategories(prevCategories => prevCategories.filter(cat => cat !== categoryName))
+    } catch (error) {
+      console.error('Error removing category', error)
+    }
+  }
+
   const initializeTables = async () => {
     let extensionPath;
 
@@ -86,6 +96,7 @@ const useCategories = () => {
   return {
     moreCategories,
     addCategory,
+    removeCategory,
     getCategories
   }
 }

examples/to-do-app/screens/Categories.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { ScrollView, StyleSheet, View } from "react-native";
+import { ScrollView, StyleSheet, View, Alert } from "react-native";
 import { Avatar, Card, Text, Modal, Portal, Button, TextInput } from "react-native-paper";
 import { useFocusEffect } from '@react-navigation/native';
 import useCategories from "../hooks/useCategories";
@@ -22,7 +22,7 @@ const Categories = ({ navigation }) => {
     day: "numeric",
   });
 
-  const { moreCategories, addCategory } = useCategories();
+  const { moreCategories, addCategory, removeCategory } = useCategories();
   const { setSync } = useSyncContext();
 
   const [newCategory, setNewCategory] = useState("");
@@ -45,6 +45,24 @@ const Categories = ({ navigation }) => {
     hideModal();
   }
 
+  function handleRemoveCategory(categoryName) {
+    Alert.alert(
+      "Delete Category",
+      `Are you sure you want to delete "${categoryName}"?`,
+      [
+        {
+          text: "Cancel",
+          style: "cancel"
+        },
+        {
+          text: "Delete",
+          style: "destructive",
+          onPress: () => removeCategory(categoryName)
+        }
+      ]
+    );
+  }
+
   return (
     <>
       <Portal>
@@ -127,6 +145,7 @@ const Categories = ({ navigation }) => {
               key={index}
               style={styles.card}
               onPress={() => navigation.navigate("Tasks", { category })}
+              onLongPress={() => handleRemoveCategory(category)}
               mode="contained"
             >
               <Card.Title