From d987ae4e8707dac3c40608bbe1bc3ac11f6634e9 Mon Sep 17 00:00:00 2001
From: Vincent Ahrend <vincent.ahrend@ditto.live>
Date: Fri, 20 Sep 2024 15:52:41 +0200
Subject: [PATCH] WIP update example app

---
 .../src/App.tsx                               | 60 ++++++++++++++-----
 .../src/AppContainer.tsx                      |  8 ++-
 2 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/examples/dql-create-react-app-typescript-example/src/App.tsx b/examples/dql-create-react-app-typescript-example/src/App.tsx
index a4d8e61..ce8ba05 100644
--- a/examples/dql-create-react-app-typescript-example/src/App.tsx
+++ b/examples/dql-create-react-app-typescript-example/src/App.tsx
@@ -1,8 +1,15 @@
 import './App.css'
 
-import { useMutations, useQuery } from '@dittolive/react-ditto'
+import { useExecuteQuery, useQuery } from '@dittolive/react-ditto'
 import React, { useState } from 'react'
 
+type Task = {
+  _id: string
+  body: string
+  isCompleted: boolean
+  isDeleted: boolean
+}
+
 const styles: Record<string, React.CSSProperties> = {
   app: {
     maxWidth: '600px',
@@ -22,17 +29,42 @@ type Props = {
   path: string
 }
 
-const App: React.FC<Props> = ({ path }) => {
+function isError(error: unknown): error is Error {
+  return error instanceof Error
+}
+
+const App: React.FC<Props> = ({ path: persistenceDirectory }) => {
   const [newBodyText, setNewBodyText] = useState<string>('')
   const {
     items: tasks,
     error,
     storeObserver,
     isLoading,
-  } = useQuery('select * from tasks')
-  const { upsert, removeByID, updateByID } = useMutations({
-    collection: 'tasks',
-    path: path,
+  } = useQuery<Task>('select * from tasks where isDeleted = false', {
+    queryArguments: { val: false },
+    persistenceDirectory,
+  })
+
+  const [upsert] = useExecuteQuery<unknown, { value: Partial<Task> }>(
+    'insert into tasks documents (:value) on id conflict do update',
+    {
+      queryArguments: { value: { isDeleted: false } },
+      persistenceDirectory,
+    },
+  )
+
+  const [removeByID] = useExecuteQuery<unknown, { id: string }>(
+    'update tasks set isDeleted = true where _id = :id',
+    {
+      persistenceDirectory,
+    },
+  )
+
+  const [setCompletedByID] = useExecuteQuery<
+    unknown,
+    Pick<Task, '_id' | 'isCompleted'>
+  >('update tasks set isCompleted = :isCompleted where _id = :_id', {
+    persistenceDirectory,
   })
 
   if (isLoading) {
@@ -43,12 +75,13 @@ const App: React.FC<Props> = ({ path }) => {
     <div className="App" style={styles.app}>
       <div className="header" style={styles.header}>
         <p>
-          Using Ditto with path &ldquo;{path}&ldquo; and query &ldquo;
+          Using Ditto with persistence directory &ldquo;{persistenceDirectory}
+          &ldquo; and query &ldquo;
           {storeObserver.queryString}&ldquo;
         </p>
         <span>Number of tasks {tasks?.length}</span>
 
-        {error && <p style={styles.error}>Error: {error.message}</p>}
+        {isError(error) && <p style={styles.error}>Error: {error.message}</p>}
 
         <div style={{ marginTop: '1rem', marginBottom: '1rem' }}>
           <input
@@ -64,6 +97,7 @@ const App: React.FC<Props> = ({ path }) => {
                 value: {
                   body: newBodyText,
                   isCompleted: false,
+                  isDeleted: false,
                 },
               })
               setNewBodyText('')
@@ -85,20 +119,16 @@ const App: React.FC<Props> = ({ path }) => {
               </p>
               <button
                 onClick={() => {
-                  removeByID({ _id: task.value._id })
+                  removeByID({ id: task.value._id })
                 }}
               >
                 Remove
               </button>
               <button
                 onClick={() => {
-                  updateByID({
+                  setCompletedByID({
                     _id: task.value._id,
-                    updateClosure: (mutableDoc) => {
-                      mutableDoc
-                        .at('isCompleted')
-                        .set(!mutableDoc.value.isCompleted)
-                    },
+                    isCompleted: !task.value.isCompleted,
                   })
                 }}
               >
diff --git a/examples/dql-create-react-app-typescript-example/src/AppContainer.tsx b/examples/dql-create-react-app-typescript-example/src/AppContainer.tsx
index 0198b85..047b788 100644
--- a/examples/dql-create-react-app-typescript-example/src/AppContainer.tsx
+++ b/examples/dql-create-react-app-typescript-example/src/AppContainer.tsx
@@ -29,12 +29,16 @@ const AppContainer: React.FC = () => {
     useOnlineIdentity()
   const [currentPath, setCurrentPath] = useState('/path-development')
 
-  const handleCreateDittoInstances = () => {
+  const handleCreateDittoInstances = async () => {
     // Example of how to create a development instance
     const dittoDevelopment = new Ditto(
-      createDevelopment({ appID: 'live.ditto.example', siteID: 1234 }),
+      createDevelopment({
+        appID: '12e5e73c-68af-4af8-9322-5fd262ff5c7d',
+        siteID: 1234,
+      }),
       '/path-development',
     )
+    await dittoDevelopment.disableSyncWithV3()
 
     // Example of how to create an online instance with authentication enabled
     const dittoOnline = new Ditto(