feat: update React example to todos (#22)

* feat: create remix app

* feat: create hook for rocketrpc

* feat: update react example

---------

Co-authored-by: Akash Joshi <akash.joshi@sigtech.com>

.gitignore

@@ -106,4 +106,5 @@ dist
 .parcel-cache/
 dev.db
 dev.db-journal
-examples/prisma/migrations/
+examples/prisma/migrations/
+bun.lockb

examples/prisma/README.md

@@ -0,0 +1,4 @@
+## How to Run this?
+
+1. Run `npm i` or your preferred installer on the `examples` directory.
+2. `cd` into the prisma directory and run `npx prisma migrate dev`.

examples/prisma/schema.prisma

@@ -20,7 +20,7 @@ model User {
 
 model Todo {
   id        String   @id @default(cuid())
-  status    Boolean?  @default(false)
+  status    Boolean  @default(false)
   text      String
   owner     User?    @relation(fields: [userId], references: [id])
   createdAt DateTime @default(now())

examples/react/App.tsx

@@ -1,53 +1,10 @@
-import React, { useEffect, useState } from "react";
-import { Client } from "../../src";
-import { User } from "@prisma/client";
-import { API } from "../prisma/server";
-
-const client = Client<API>("http://localhost:8080");
-
-const { sum } = client;
+import React from "react";
+import Rocket from "./rocket";
 
 export function App() {
-  const [helloResult, setHelloResult] = useState("loading...");
-  const [users, setUsers] = useState<User[]>([]);
-
-  useEffect(() => {
-    client.ping("World!").then(setHelloResult);
-  }, []);
-
-  const [num1, setNum1] = useState(0);
-  const [num2, setNum2] = useState(0);
-  const [sumResult, setSumResult] = useState(0);
-
-  useEffect(() => {
-    sum(num1, num2).then(setSumResult);
-  }, [num1, num2]);
-
-  useEffect(() => {
-    client.prisma.user.findMany().then(setUsers);
-  }, []);
-
-  console.log({ users });
-
   return (
     <main>
-      <h1>Hello world!</h1>
-      <h2>Ping Result: {helloResult}</h2>
-      <h2>
-        Sum of{" "}
-        <input
-          value={num1}
-          onChange={(e) => setNum1(parseInt(e.target.value))}
-          type="number"
-        />{" "}
-        and{" "}
-        <input
-          value={num2}
-          onChange={(e) => setNum2(parseInt(e.target.value))}
-          type="number"
-        />{" "}
-        is {sumResult}
-      </h2>
+      <Rocket />
     </main>
   );
 }

examples/react/Todos.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+export type Todo = { text: string; status: boolean; id: string };
+
+export const Todos = ({
+  notes,
+  addNote,
+  onDone,
+  onDelete,
+}: {
+  notes: Todo[];
+  addNote: (newNote: string) => void;
+  onDone: (index: string, done: boolean) => void;
+  onDelete: (index: string) => void;
+}) => {
+  return (
+    <div>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+
+          // Read the form data
+          const form = e.target as HTMLFormElement;
+          const formData = new FormData(form);
+
+          const newTodo = formData.get("newTodo") as string;
+          if (newTodo) {
+            addNote(newTodo);
+            form.reset();
+          }
+        }}
+      >
+        <input required name="newTodo" type="text" />
+        <button type="submit">Add Todo</button>
+      </form>
+      {notes.map((note) => (
+        <p key={note.id}>
+          <input
+            onChange={(e) => onDone(note.id, e.target.checked)}
+            type="checkbox"
+          />
+          <span>{note.text}</span>
+          <button
+            style={{ marginLeft: "0.5em" }}
+            onClick={() => onDelete(note.id)}
+          >
+            ❌
+          </button>
+        </p>
+      ))}
+    </div>
+  );
+};

examples/react/rocket.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from "react";
+import type { Todo } from "./Todos";
+import { Todos } from "./Todos";
+import { useClient } from "./useRocketRpc";
+
+export default function Rocket() {
+  const [notes, setNotes] = useState<Todo[]>([]);
+
+  const client = useClient("http://localhost:8080");
+  const { prisma } = client;
+
+  useEffect(() => {
+    prisma.todo.findMany().then(setNotes);
+  }, []);
+
+  useEffect(() => {
+    console.log({ client }, client.hello());
+  }, [client]);
+
+  return (
+    <Todos
+      notes={notes}
+      addNote={(newNote) => {
+        prisma.todo
+          .create({
+            data: { text: newNote, status: false },
+          })
+          .then((newNote) => setNotes([...notes, newNote]));
+      }}
+      onDone={(id, status) => {
+        prisma.todo
+          .update({
+            where: {
+              id,
+            },
+            data: {
+              status,
+            },
+          })
+          .then(({ id }) =>
+            setNotes(
+              notes.map((note) => ({
+                ...note,
+                status: note.id === id ? status : note.status,
+              }))
+            )
+          );
+      }}
+      onDelete={(id) => {
+        prisma.todo
+          .delete({
+            where: {
+              id,
+            },
+          })
+          .then(({ id }) => {
+            setNotes(notes.filter((note) => note.id !== id));
+          });
+      }}
+    />
+  );
+}

examples/react/useRocketRpc.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import { Client } from "../../src";
+import type { API } from "../../examples/prisma/server";
+
+export const useClient = (endpoint: string) => {
+  return Client<API>(endpoint);
+};
+
+export const useRocketRpc = (endpoint: string) => {
+  const [client, setClient] = useState<ReturnType<typeof Client<API>> | null>(
+    null
+  );
+
+  useEffect(() => {
+    setClient(Client<API>(endpoint));
+
+    return () => {
+      client?._rocketRpcContext.closeConnection();
+    };
+  }, [endpoint]);
+
+  console.log(client?._rocketRpcContext);
+
+  if (!client?._rocketRpcContext?.socket.connected) {
+    return null;
+  }
+
+  return client;
+};