add delete msg to guestbook

Author: carlsverre

GUIDE.md

@@ -5,7 +5,7 @@
 
 SQLSync is distributed as a JavaScript package as well as a Rust Crate.  Currently, both are required to use SQLSync. Also, React is the only supported framework at the moment.
 
-If you want to jump ahead to a working demo, [check out the finished product here][guestbook-src]
+If you want to jump ahead to a working demo, [check out the finished product here][guestbook-src]. Note that it has a couple more features than what you get with this guide.
 
 [guestbook-src]: examples/guestbook-react
 

examples/guestbook-react/src/doctype.ts

@@ -15,6 +15,10 @@ export type Mutation =
       tag: "AddMessage";
       id: string;
       msg: string;
+    }
+  | {
+      tag: "DeleteMessage";
+      id: string;
     };
 
 export const TaskDocType: DocType<Mutation> = {

examples/guestbook-react/src/main.tsx

@@ -62,6 +62,16 @@ export function App() {
     [mutate, msg, setMsg],
   );
 
+  // create a callback to delete a message
+  const handleDelete = useCallback(
+    (id: string) => {
+      mutate({ tag: "DeleteMessage", id }).catch((err) => {
+        console.error("Failed to delete message", err);
+      });
+    },
+    [mutate],
+  );
+
   // finally, query SQLSync for all the messages, sorted by created_at
   const { rows } = useQuery<{ id: string; msg: string }>(
     DOC_ID,
@@ -76,7 +86,12 @@ export function App() {
       <h1>Guestbook:</h1>
       <ul>
         {(rows ?? []).map(({ id, msg }) => (
-          <li key={id}>{msg}</li>
+          <li key={id}>
+            {msg}
+            <button type="button" onClick={() => handleDelete(id)} style={{ marginLeft: "40px" }}>
+              remove msg
+            </button>
+          </li>
         ))}
       </ul>
       <h3>Leave a message:</h3>

examples/reducer-guestbook/src/lib.rs

@@ -6,6 +6,7 @@ use sqlsync_reducer::{execute, init_reducer, types::ReducerError};
 enum Mutation {
     InitSchema,
     AddMessage { id: String, msg: String },
+    DeleteMessage { id: String },
 }
 
 init_reducer!(reducer);
@@ -33,6 +34,10 @@ async fn reducer(mutation: Vec<u8>) -> Result<(), ReducerError> {
             )
             .await?;
         }
+
+        Mutation::DeleteMessage { id } => {
+            execute!("delete from messages where id = ?", id).await?;
+        }
     }
 
     Ok(())