single page app

api.js

@@ -0,0 +1,15 @@
+// api.js
+
+import { useQuery } from "react-query";
+
+import turso from "./database";
+
+const fetchCallLogs = async () => {
+  const query = "SELECT * FROM call_logs";
+  const result = await turso.query(query);
+  return result;
+};
+
+export const useCallLogs = () => {
+  return useQuery("callLogs", fetchCallLogs);
+};

app/(tabs)/_layout.tsx

@@ -47,13 +47,6 @@ export default function TabLayout() {
           ),
         }}
       />
-      <Tabs.Screen
-        name="logs"
-        options={{
-          title: "Logs",
-          tabBarIcon: ({ color }) => <TabBarIcon name="code" color={color} />,
-        }}
-      />
     </Tabs>
   );
 }

app/(tabs)/index.tsx

@@ -5,7 +5,9 @@ import { FlatList, TouchableOpacity, Linking, Platform } from "react-native";
 import RNImmediatePhoneCall from "react-native-immediate-phone-call";
 import call from "react-native-phone-call";
 
+import { useCallLogs } from "../../api";
 import { Text, View } from "../../components/Themed";
+// import { syncCallLogsToCloud } from "../../sync";
 
 interface Task {
   id: string;

babel.config.js

@@ -5,6 +5,7 @@ module.exports = function (api) {
     plugins: [
       "expo-router/babel",
       "nativewind/babel",
+      ["inline-import", { extensions: [".sql"] }],
       [
         "module:react-native-dotenv",
         {

database.js

@@ -0,0 +1,9 @@
+// database.js
+
+import * as SQLite from "expo-sqlite";
+import Turso from "turso";
+
+const db = SQLite.openDatabase("call_logs.db");
+const turso = new Turso(db);
+
+export default turso;

drizzle.config.ts

@@ -0,0 +1,6 @@
+import type { Config } from "drizzle-kit";
+export default {
+  schema: "./db/schema.ts",
+  out: "./drizzle",
+  driver: "expo", // <--- very important
+} satisfies Config;

drizzle/meta/_journal.json

@@ -0,0 +1 @@
+{"version":"5","dialect":"sqlite","entries":[]}

drizzleOptions.js

@@ -0,0 +1,9 @@
+// drizzleOptions.js
+
+import CallLogContract from "./contracts/CallLogContract.json"; // You'll need to create this file
+
+const options = {
+  contracts: [CallLogContract],
+};
+
+export default options;

metro.config.js

@@ -6,6 +6,8 @@ const config = getDefaultConfig(__dirname, {
   // [Web-only]: Enables CSS support in Metro.
   isCSSEnabled: true,
 });
+
+config.resolver.sourceExts.push("sql");
 module.exports = {
   ...config,
   watchFolders: [path.resolve(__dirname, "..")],

package.json

@@ -20,18 +20,21 @@
     "@babel/runtime": "^7.23.5",
     "@expo/metro-config": "^0.10.7",
     "@expo/vector-icons": "^13.0.0",
+    "@libsql/client": "^0.4.0-pre.5",
     "@react-native-async-storage/async-storage": "1.18.2",
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.17",
     "@shopify/flash-list": "1.4.3",
     "@shopify/react-native-skia": "0.1.196",
     "@twilio/voice-react-native-sdk": "^1.0.0-rc8",
+    "babel-plugin-inline-import": "^3.0.0",
     "babel-plugin-macros": "^3.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cn": "^0.1.1",
     "cva": "^0.0.0",
     "dotenv": "^16.3.1",
+    "drizzle-orm": "^0.29.3",
     "eas-cli": "^5.9.3",
     "expo": "^49.0.21",
     "expo-av": "~13.4.1",
@@ -41,6 +44,7 @@
     "expo-media-library": "15.4.1",
     "expo-router": "^2.0.0",
     "expo-splash-screen": "~0.20.5",
+    "expo-sqlite": "~11.3.3",
     "expo-status-bar": "~1.6.0",
     "expo-system-ui": "~2.4.0",
     "expo-web-browser": "~12.3.2",
@@ -60,6 +64,7 @@
     "react-native-safe-area-context": "4.6.3",
     "react-native-safearea-height": "^1.0.6",
     "react-native-screens": "~3.22.0",
+    "react-native-sqlite-storage": "^6.0.1",
     "react-native-tailwindcss": "^1.1.11",
     "react-native-url-polyfill": "^2.0.0",
     "react-native-view-shot": "3.7.0",
@@ -75,6 +80,7 @@
     "@babel/core": "^7.20.0",
     "@types/react": "~18.2.14",
     "@types/react-native": "^0.72.8",
+    "drizzle-kit": "^0.20.9",
     "eslint": "^8.56.0",
     "eslint-config-universe": "^12.0.0",
     "jest": "^29.2.1",

sync.js

@@ -0,0 +1,7 @@
+// sync.js
+
+const syncCallTasksFromCloud = async () => {
+  // Implement logic to sync call tasks from the cloud to the mobile app
+};
+
+export { syncCallTasksFromCloud };