@sqliteai/todoapp 1.0.0

package/hooks/useTasks.js

@@ -0,0 +1,99 @@
+import { useState, useEffect, useCallback } from "react";
+import { db } from "../db/dbConnection";
+import { randomUUID } from 'expo-crypto';
+import { useSyncContext } from '../components/SyncContext';
+
+const useTasks = (tag = null) => {
+  const [taskList, setTaskList] = useState([]);
+  const { registerRefreshCallback } = useSyncContext();
+
+  const getTasks = useCallback(async () => {
+    try {
+      let result;
+      if (tag) {
+        result = await db.execute(
+          `
+          SELECT tasks.*, tags.uuid AS tag_uuid, tags.name AS tag_name 
+          FROM tasks 
+          JOIN tasks_tags ON tasks.uuid = tasks_tags.task_uuid 
+          JOIN tags ON tags.uuid = tasks_tags.tag_uuid 
+          WHERE tag_name=?`,
+          [tag]
+        );
+        setTaskList(result.rows);
+      } else {
+        result = await db.execute(`
+          SELECT tasks.*, tags.uuid AS tag_uuid, tags.name AS tag_name 
+          FROM tasks 
+          JOIN tasks_tags ON tasks.uuid = tasks_tags.task_uuid 
+          JOIN tags ON tags.uuid = tasks_tags.tag_uuid`);
+        setTaskList(result.rows);
+      }
+    } catch (error) {
+      console.error("Error getting tasks", error);
+    }
+  }, [tag]);
+
+  const updateTask = async (completedStatus, taskUuid) => {
+    try {
+      await db.execute("UPDATE tasks SET isCompleted=? WHERE uuid=?", [completedStatus, taskUuid]);
+      db.execute('SELECT cloudsync_network_send_changes();')
+      setTaskList(prevTasks =>
+        prevTasks.map(task =>
+          task.uuid === taskUuid ? { ...task, isCompleted: completedStatus } : task
+        )
+      );
+    } catch (error) {
+      console.error("Error updating tasks", error);
+    }
+  };
+
+  const addTaskTag = async (newTask, tag) => {
+    try {
+      if (tag.uuid) {
+        const addNewTask = await db.execute("INSERT INTO tasks (uuid, title, isCompleted) VALUES (?, ?, ?) RETURNING *", [randomUUID(), newTask.title, newTask.isCompleted]);
+        addNewTask.rows[0].tag_uuid = tag.uuid;
+        addNewTask.rows[0].tag_name = tag.name;
+        setTaskList([...taskList, addNewTask.rows[0]]);
+        await db.execute("INSERT INTO tasks_tags (uuid, task_uuid, tag_uuid) VALUES (?, ?, ?)", [randomUUID(), addNewTask.rows[0].uuid, tag.uuid]);
+      } else {
+        const addNewTaskNoTag = await db.execute("INSERT INTO tasks (uuid, title, isCompleted) VALUES (?, ?, ?) RETURNING *", [randomUUID(), newTask.title, newTask.isCompleted]);
+        setTaskList([...taskList, addNewTaskNoTag.rows[0]]);
+      }
+      db.execute('SELECT cloudsync_network_send_changes();')
+    } catch (error) {
+      console.error("Error adding task to database", error);
+    }
+  };
+
+  const deleteTask = async (taskUuid) => {
+    try {
+      await db.execute("DELETE FROM tasks_tags WHERE task_uuid=?", [taskUuid]);
+      await db.execute("DELETE FROM tasks WHERE uuid=?", [taskUuid]);
+      db.execute('SELECT cloudsync_network_send_changes();')
+      setTaskList(taskList.filter(task => task.uuid !== taskUuid));
+    } catch (error) {
+      console.error("Error deleting task", error);
+    }
+  };
+
+  useEffect(() => {
+    getTasks();
+  }, [getTasks]);
+
+  useEffect(() => {
+    return registerRefreshCallback(() => {
+      getTasks();
+    });
+  }, [registerRefreshCallback, getTasks]);
+
+  return {
+    taskList,
+    updateTask,
+    addTaskTag,
+    deleteTask,
+    refreshTasks: getTasks,
+  };
+};
+
+export default useTasks;

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@sqliteai/todoapp",
+  "version": "1.0.0",
+  "description": "An Expo template for building apps with the SQLite CloudSync extension",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sqliteai/sqlite-sync.git"
+  },
+  "author": "SQLiteAI",
+  "keywords": ["expo-template", "sqlite", "cloudsync", "todo", "sync", "react-native", "expo", "template"],
+  "main": "expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "clean": "cp .env .env.backup 2>/dev/null || true; git clean -fdX; mv .env.backup .env 2>/dev/null || true"
+  },
+  "expo": {
+    "entryPoint": "expo/AppEntry.js"
+  },
+  "dependencies": {
+    "@op-engineering/op-sqlite": "14.1.4",
+    "@react-native-picker/picker": "2.11.1",
+    "@react-navigation/native": "^7.1.17",
+    "@react-navigation/stack": "^7.4.7",
+    "expo": "^53.0.22",
+    "expo-crypto": "~14.1.5",
+    "expo-status-bar": "~2.2.3",
+    "react": "19.0.0",
+    "react-native": "0.79.5",
+    "react-native-gesture-handler": "~2.24.0",
+    "react-native-paper": "5.14.5",
+    "react-native-picker-select": "^9.3.1",
+    "react-native-safe-area-context": "5.4.0",
+    "react-native-screens": "~4.11.1",
+    "react-native-vector-icons": "^10.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.28.3",
+    "react-native-dotenv": "3.4.11"
+  }
+}

package/plugins/CloudSyncSetup.js

@@ -0,0 +1,284 @@
+const { withDangerousMod, withXcodeProject } = require('@expo/config-plugins');
+const fs = require('fs');
+const path = require('path');
+const https = require('https');
+const { execSync } = require('child_process');
+
+/**
+ * Download file from URL
+ */
+async function downloadFile(url, dest) {
+  return new Promise((resolve, reject) => {
+    const file = fs.createWriteStream(dest);
+    
+    https.get(url, (response) => {
+      
+      if (response.statusCode === 302 || response.statusCode === 301) {
+        file.close();
+        fs.unlinkSync(dest);
+        // Handle redirect
+        return downloadFile(response.headers.location, dest).then(resolve).catch(reject);
+      }
+      
+      if (response.statusCode !== 200) {
+        file.close();
+        fs.unlinkSync(dest);
+        return reject(new Error(`HTTP ${response.statusCode}: ${response.statusMessage}`));
+      }
+      
+      response.pipe(file);
+      
+      file.on('finish', () => {
+        file.close();
+        resolve();
+      });
+      
+      file.on('error', (err) => {
+        fs.unlink(dest, () => {}); // Delete the file async
+        reject(err);
+      });
+    }).on('error', (err) => {
+      reject(err);
+    });
+  });
+}
+
+/**
+ * Get latest release URL from GitHub API
+ */
+async function getLatestReleaseUrl(asset_pattern) {
+  return new Promise((resolve, reject) => {
+    const options = {
+      hostname: 'api.github.com',
+      path: '/repos/sqliteai/sqlite-sync/releases/latest',
+      headers: {
+        'User-Agent': 'expo-cloudsync-plugin'
+      }
+    };
+
+    https.get(options, (response) => {
+      let data = '';
+      
+      response.on('data', (chunk) => {
+        data += chunk;
+      });
+      
+      response.on('end', () => {
+        try {
+          const release = JSON.parse(data);
+          const asset = release.assets.find(asset => 
+            asset.name.includes(asset_pattern) && asset.name.endsWith('.zip')
+          );
+          
+          if (asset) {
+            resolve(asset.browser_download_url);
+          } else {
+            reject(new Error(`Asset with pattern ${asset_pattern} not found`));
+          }
+        } catch (error) {
+          reject(error);
+        }
+      });
+    }).on('error', (err) => {
+      reject(err);
+    });
+  });
+}
+
+/**
+ * Extract zip file and return extracted directory
+ */
+function extractZip(zipPath, extractTo) {
+  try {
+    // Create extraction directory
+    fs.mkdirSync(extractTo, { recursive: true });
+    
+    // Use system unzip command
+    execSync(`unzip -o "${zipPath}" -d "${extractTo}"`, { stdio: 'pipe' });
+    
+    return extractTo;
+  } catch (error) {
+    throw new Error(`Failed to extract ${zipPath}: ${error.message}`);
+  }
+}
+
+/**
+ * Setup Android native libraries
+ */
+async function setupAndroidLibraries(projectRoot) {
+  
+  const tempDir = path.join(projectRoot, 'temp_downloads');
+  fs.mkdirSync(tempDir, { recursive: true });
+  
+  try {
+    // Download Android x86_64 build
+    const x86_64Url = await getLatestReleaseUrl('cloudsync-android-x86_64');
+    const x86_64ZipPath = path.join(tempDir, 'android-x86_64.zip');
+    await downloadFile(x86_64Url, x86_64ZipPath);
+    
+    // Download Android arm64 build
+    const arm64Url = await getLatestReleaseUrl('cloudsync-android-arm64-v8a');
+    const arm64ZipPath = path.join(tempDir, 'android-arm64.zip');
+    await downloadFile(arm64Url, arm64ZipPath);
+    
+    // Extract both archives
+    const x86_64ExtractPath = path.join(tempDir, 'x86_64');
+    const arm64ExtractPath = path.join(tempDir, 'arm64');
+    
+    extractZip(x86_64ZipPath, x86_64ExtractPath);
+    extractZip(arm64ZipPath, arm64ExtractPath);
+    
+    // Setup jniLibs directory structure
+    const jniLibsDir = path.join(projectRoot, 'android', 'app', 'src', 'main', 'jniLibs');
+    const x86_64LibDir = path.join(jniLibsDir, 'x86_64');
+    const arm64LibDir = path.join(jniLibsDir, 'arm64-v8a');
+    
+    fs.mkdirSync(x86_64LibDir, { recursive: true });
+    fs.mkdirSync(arm64LibDir, { recursive: true });
+    
+    // Find and copy cloudsync.so files
+    const findSoFile = (dir) => {
+      const files = fs.readdirSync(dir, { recursive: true });
+      const soFile = files.find(file => file.toString().endsWith('cloudsync.so'));
+      return soFile ? path.join(dir, soFile) : null;
+    };
+    
+    const x86_64SoFile = findSoFile(x86_64ExtractPath);
+    const arm64SoFile = findSoFile(arm64ExtractPath);
+    
+    if (x86_64SoFile) {
+      fs.copyFileSync(x86_64SoFile, path.join(x86_64LibDir, 'cloudsync.so'));
+    }
+    
+    if (arm64SoFile) {
+      fs.copyFileSync(arm64SoFile, path.join(arm64LibDir, 'cloudsync.so'));
+    }
+    
+  } finally {
+    // Cleanup temp directory
+    if (fs.existsSync(tempDir)) {
+      fs.rmSync(tempDir, { recursive: true, force: true });
+    }
+  }
+}
+
+/**
+ * Setup iOS framework
+ */
+async function setupIOSFramework(projectRoot) {
+  
+  const tempDir = path.join(projectRoot, 'temp_downloads');
+  fs.mkdirSync(tempDir, { recursive: true });
+  
+  try {
+    // Download iOS xcframework
+    const xcframeworkUrl = await getLatestReleaseUrl('cloudsync-apple-xcframework');
+    const xcframeworkZipPath = path.join(tempDir, 'apple-xcframework.zip');
+    await downloadFile(xcframeworkUrl, xcframeworkZipPath);
+    
+    // Extract xcframework
+    const extractPath = path.join(tempDir, 'xcframework');
+    extractZip(xcframeworkZipPath, extractPath);
+    
+    // Find CloudSync.xcframework directory
+    const findXcframework = (dir) => {
+      const files = fs.readdirSync(dir, { recursive: true });
+      const xcframeworkPath = files.find(file => file.toString().endsWith('CloudSync.xcframework'));
+      return xcframeworkPath ? path.join(dir, xcframeworkPath) : null;
+    };
+    
+    const xcframeworkPath = findXcframework(extractPath);
+    
+    if (xcframeworkPath && fs.statSync(xcframeworkPath).isDirectory()) {
+      // Get project name from app.json
+      const appJson = JSON.parse(fs.readFileSync(path.join(projectRoot, 'app.json'), 'utf8'));
+      const projectName = appJson.expo.name;
+      
+      const frameworksDir = path.join(projectRoot, 'ios', projectName, 'Frameworks');
+      const targetFrameworkPath = path.join(frameworksDir, 'CloudSync.xcframework');
+      
+      // Create Frameworks directory
+      fs.mkdirSync(frameworksDir, { recursive: true });
+      
+      // Copy xcframework
+      fs.cpSync(xcframeworkPath, targetFrameworkPath, { recursive: true });
+      
+      return targetFrameworkPath;
+    } else {
+      throw new Error('CloudSync.xcframework not found in extracted archive');
+    }
+    
+  } finally {
+    // Cleanup temp directory
+    if (fs.existsSync(tempDir)) {
+      fs.rmSync(tempDir, { recursive: true, force: true });
+    }
+  }
+}
+
+/**
+ * Add framework to Xcode project
+ */
+const withCloudSyncFramework = (config) => {
+  return withXcodeProject(config, (config) => {
+    const xcodeProject = config.modResults;
+    const projectName = config.modRequest.projectName || config.name;
+    const target = xcodeProject.getFirstTarget().uuid;
+
+    const frameworkPath = `${projectName}/Frameworks/CloudSync.xcframework`;
+    
+    // Check if framework already exists
+    if (xcodeProject.hasFile(frameworkPath)) {
+      return config;
+    }
+    
+    // First check if "Embed Frameworks" build phase exists, if not create it
+    let embedPhase = xcodeProject.pbxEmbedFrameworksBuildPhaseObj(target);
+    
+    if (!embedPhase) {
+      // Create the embed frameworks build phase with correct parameters for frameworks
+      xcodeProject.addBuildPhase([], 'PBXCopyFilesBuildPhase', 'Embed Frameworks', target, 'frameworks');
+      embedPhase = xcodeProject.pbxEmbedFrameworksBuildPhaseObj(target);
+    }
+    
+    // Add framework to project with embed
+    const frameworkFile = xcodeProject.addFramework(frameworkPath, {
+      target: target,
+      embed: true,
+      customFramework: true
+    });
+    
+    
+    return config;
+  });
+};
+
+/**
+ * Main plugin function
+ */
+const withCloudSync = (config) => {
+  // Android setup
+  config = withDangerousMod(config, [
+    'android',
+    async (config) => {
+      await setupAndroidLibraries(config.modRequest.projectRoot);
+      return config;
+    }
+  ]);
+  
+  // iOS setup - download and place framework
+  config = withDangerousMod(config, [
+    'ios',
+    async (config) => {
+      await setupIOSFramework(config.modRequest.projectRoot);
+      return config;
+    }
+  ]);
+  
+  // iOS setup - add to Xcode project
+  config = withCloudSyncFramework(config);
+  
+  return config;
+};
+
+module.exports = withCloudSync;

package/screens/Categories.js

@@ -0,0 +1,220 @@
+import React, { useState } from "react";
+import { ScrollView, StyleSheet, View } 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";
+import { useSyncContext } from "../components/SyncContext";
+
+const Categories = ({ navigation }) => {
+  const today = new Date();
+  const days = [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
+  const dayIndex = today.getDay();
+  const monthDate = today.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+  });
+
+  const { moreCategories, addCategory } = useCategories();
+  const { setSync } = useSyncContext();
+
+  const [newCategory, setNewCategory] = useState("");
+  const [visible, setVisible] = React.useState(false);
+
+  useFocusEffect(
+    React.useCallback(() => {
+      setSync(true);
+    }, [setSync])
+  );
+
+  const showModal = () => setVisible(true);
+  const hideModal = () => setVisible(false);
+
+  function handleAddCategory() {
+    if (newCategory) {
+      addCategory(newCategory);
+    }
+    setNewCategory("");
+    hideModal();
+  }
+
+  return (
+    <>
+      <Portal>
+        <Modal
+          visible={visible}
+          onDismiss={hideModal}
+          style={{ backgroundColor: "white", padding: 20 }}
+        >
+          <TextInput
+            style={styles.textInput}
+            label="Enter a new category"
+            value={newCategory}
+            onChangeText={(newCategory) => setNewCategory(newCategory)}
+            keyboardType="default"
+            activeUnderlineColor="#6ba2ea"
+            underlineColor="none"
+            activeOutlineColor="#fff"
+            outlineColor="none"
+          />
+          <Button
+            style={styles.button}
+            buttonColor={styles.button.backgroundColor}
+            textColor={styles.button.color}
+            onPress={handleAddCategory}
+          >
+            Add
+          </Button>
+        </Modal>
+      </Portal>
+      <ScrollView
+        style={styles.container}
+        contentContainerStyle={styles.content}
+      >
+        <Text
+          variant="bodyLarge"
+          style={[
+            styles.content,
+            {
+              color: "#6b7280",
+            },
+          ]}
+        >
+          {days[dayIndex]}
+        </Text>
+        <Text
+          variant="headlineSmall"
+          style={[
+            styles.content,
+            {
+              color: "#000",
+            },
+          ]}
+        >
+          {monthDate}
+        </Text>
+        <View style={styles.cardRow}>
+          <Card
+            style={styles.card}
+            onPress={() => navigation.navigate("Tasks")}
+            mode="contained"
+          >
+            <Card.Title
+              left={(props) => (
+                <Avatar.Icon
+                  {...props}
+                  icon="inbox-outline"
+                  color={styles.icon.color}
+                  style={styles.icon}
+                />
+              )}
+            />
+
+            <Text variant="bodyMedium" style={styles.text}>
+              Inbox
+            </Text>
+          </Card>
+
+          {moreCategories.map((category, index) => (
+            <Card
+              key={index}
+              style={styles.card}
+              onPress={() => navigation.navigate("Tasks", { category })}
+              mode="contained"
+            >
+              <Card.Title
+                left={(props) => (
+                  <Avatar.Icon
+                    {...props}
+                    icon="tag-outline"
+                    color={styles.icon.color}
+                    style={styles.icon}
+                  />
+                )}
+              />
+
+              <Text variant="bodyMedium" numberOfLines={1} style={styles.text}>
+                {category}
+              </Text>
+            </Card>
+          ))}
+
+          <Card style={styles.addCard} onPress={showModal} mode="contained">
+            <Card.Title
+              left={(props) => (
+                <Avatar.Icon
+                  {...props}
+                  icon="plus-circle-outline"
+                  color={styles.addIcon.color}
+                  style={styles.addIcon}
+                />
+              )}
+            />
+
+            <Text variant="bodyMedium" style={styles.text}>
+              {" "}
+            </Text>
+          </Card>
+        </View>
+      </ScrollView>
+    </>
+  );
+};
+
+Categories.title = "Categories";
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "#fff",
+  },
+  content: {
+    padding: 10,
+  },
+  cardRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "space-between",
+  },
+  card: {
+    backgroundColor: "#cfe2f8",
+    margin: 5,
+    width: "47%",
+  },
+  addCard: {
+    backgroundColor: "#fff",
+    margin: 5,
+    borderWidth: 1,
+    borderStyle: "dashed",
+    borderColor: "#6BA2EA",
+    width: "47%",
+  },
+  icon: {
+    backgroundColor: "#cfe2f8",
+    color: "#6b7280",
+  },
+  addIcon: {
+    backgroundColor: "#fff",
+    color: "#6BA2EA",
+  },
+  text: {
+    color: "#6b7280",
+    padding: 15,
+  },
+  button: {
+    borderRadius: "none",
+    backgroundColor: "#b2cae9",
+    color: "#000",
+  },
+  textInput: {
+    backgroundColor: "#f0f5fd",
+  },
+});
+
+export default Categories;

package/screens/Cover.js

@@ -0,0 +1,54 @@
+import { useCallback } from 'react';
+import { StatusBar } from 'expo-status-bar';
+import { View, Text, StyleSheet } from 'react-native';
+import { Button } from 'react-native-paper';
+import { useFocusEffect } from '@react-navigation/native';
+import { useSyncContext } from '../components/SyncContext';
+
+export default Cover = ({ navigation }) => {
+  const { setSync } = useSyncContext();
+
+  useFocusEffect(
+    useCallback(() => {
+      setSync(false);
+    }, [setSync])
+  );
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.heading}>Organize Your</Text>
+      <Text style={styles.heading}>Tasks with SQLite</Text>
+      <Text>Designed for Happiness, Not Just Productivity.</Text>
+      <Text>Enjoy a Stress-free Way to Manage Your Day.</Text>
+      <Button
+        style={styles.button}
+        buttonColor="#6BA2EA"
+        textColor="white"
+        onPress={() => navigation.navigate('Categories')}
+      >
+        Get started
+      </Button>
+      <StatusBar style="auto" />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    paddingLeft: 15,
+  },
+  heading: {
+    fontWeight: 'bold',
+    fontSize: 40,
+    marginBottom: 5,
+  },
+  button: {
+    position: 'absolute',
+    bottom: 70,
+    right: 20,
+  },
+});