@sqliteai/todoapp 1.0.2 → 1.0.3

package/README.md

@@ -2,6 +2,8 @@
 
 A simple Expo example demonstrating SQLite synchronization with CloudSync. Build cross-platform apps that sync data seamlessly across devices.
 
+<img src="https://github.com/user-attachments/assets/86db5c25-d8ff-4c31-b157-8dff178e1720" width="40%" height="40%">
+
 ## 🚀 Quick Start
 
 ### 1. Clone the template

package/app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "todoapp",
     "slug": "todoapp",
-    "version": "1.0.2",
+    "version": "1.0.3",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",

package/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
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sqliteai/todoapp",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "An Expo template for building apps with the SQLite CloudSync extension",
   "repository": {
     "type": "git",

package/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