WIP

client/package.json

@@ -18,11 +18,13 @@
     "watch": "concurrently --kill-others 'npm run server' 'npm run check-types -- --watch --preserveWatchOutput' 'sleep 3; npm run dev'"
   },
   "dependencies": {
+    "@rocicorp/rails": "file:../../rails/rocicorp-rails-0.10.0.tgz",
     "classnames": "^2.3.1",
     "navigo": "^8.11.1",
     "qs": "^6.11.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "replicache": "file:../../mono/replicache-14.2.2.tgz",
     "replicache-react": "5.0.1",
     "shared": "^0.1.0",
     "todomvc-app-css": "^2.4.2"

client/src/app.tsx

@@ -1,16 +1,67 @@
 import {Dialog} from '@headlessui/react';
+import {Entity, generateZQL} from '@rocicorp/rails';
+import {EntityQuery} from '@rocicorp/rails/out/zql/query/entity-query.js';
+import {EntitySchema} from '@rocicorp/rails/out/zql/schema/entity-schema.js';
 import {nanoid} from 'nanoid';
 import Navigo from 'navigo';
-import {useEffect, useState} from 'react';
-import {ReadTransaction, Replicache} from 'replicache';
-import {useSubscribe} from 'replicache-react';
-import {TodoUpdate, todosByList} from 'shared';
-import {getList, listLists} from 'shared/src/list';
+import {useCallback, useEffect, useMemo, useState} from 'react';
+import {Replicache} from 'replicache';
+import {TodoUpdate, todoSchema} from 'shared';
+import {listSchema} from 'shared/src/list';
 import Header from './components/header';
 import MainSection from './components/main-section';
 import {Share} from './components/share';
 import {M} from './mutators';
 
+function useZQL<T extends Entity>(
+  rep: Replicache,
+  tableName: string,
+  parse: (data: unknown) => T,
+): EntityQuery<{fields: T}> {
+  return useMemo(() => generateZQL<T>(rep, tableName, parse), [rep]);
+}
+
+function useQuery<S extends EntitySchema, R>(
+  query: EntityQuery<S, R>,
+  dependencies: readonly unknown[] = [],
+  debugName?: string,
+): R {
+  const view = useMemo(
+    () => query.prepare().materialize(),
+    [query, ...dependencies],
+  );
+  const [value, setValue] = useState<R>(view.value as R);
+  const cb: <T>(value: T, version: number) => void = useCallback((v): void => {
+    debugger;
+    console.log('xxx useQuery.on', {
+      debugName,
+      query,
+      v,
+    });
+    setValue(v);
+  }, []);
+
+  useEffect(() => {
+    console.log('xxx useQuery', {
+      debugName,
+      query,
+      dependencies,
+      value: view.value,
+    });
+    setValue(view.value as R);
+    view.on(cb);
+    return () => {
+      console.log('xxx unsubscribe useQuery', {
+        debugName,
+        query,
+        dependencies,
+      });
+      view.off(cb);
+    };
+  }, [view]);
+  return value;
+}
+
 // This is the top-level component for our app.
 const App = ({
   rep,
@@ -24,6 +75,8 @@ const App = ({
   const router = new Navigo('/');
   const [listID, setListID] = useState('');
   const [showingShare, setShowingShare] = useState(false);
+  const listZQL = useZQL(rep, 'list', listSchema.parse);
+  const todoZQL = useZQL(rep, 'todo', todoSchema.parse);
 
   router.on('/list/:listID', match => {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -42,21 +95,54 @@ const App = ({
   // Listen for pokes related to the docs this user has access to.
   useEventSourcePoke(`/api/replicache/poke?channel=user/${userID}`, rep);
 
-  const lists = useSubscribe(rep, listLists, {default: []});
-  lists.sort((a, b) => a.name.localeCompare(b.name));
-
-  const selectedList = useSubscribe(
-    rep,
-    (tx: ReadTransaction) => getList(tx, listID),
-    {dependencies: [listID]},
+  const lists = useQuery(
+    useMemo(() => listZQL.select('id', 'name', 'ownerID'), []),
+    [],
+    'lists',
   );
+  // const [zqlLists, setZQLLists] = useState<readonly List[]>([]);
+  // useEffect(() => {
+  //   return listZQL
+  //     .select('id', 'name', 'ownerID')
+  //     .prepare()
+  //     .materialize()
+  //     .on(setZQLLists);
+  // }, [listZQL]);
+
+  // const lists = useSubscribe(rep, listLists, {default: []});
+  // lists.sort((a, b) => a.name.localeCompare(b.name));
+
+  // const selectedList = useSubscribe(
+  //   rep,
+  //   (tx: ReadTransaction) => getList(tx, listID),
+  //   {dependencies: [listID]},
+  // );
+  const selectedLists = useQuery(
+    useMemo(() => listZQL.select('name').where('id', '=', listID), [listID]),
+    [listID],
+    'selectedLists',
+  );
+  const selectedList = selectedLists[0];
+  // console.log('xxx', {listID, selectedLists, selectedList});
 
   // Subscribe to all todos and sort them.
-  const todos = useSubscribe(rep, async tx => todosByList(tx, listID), {
-    default: [],
-    dependencies: [listID],
-  });
-  todos.sort((a, b) => a.sort - b.sort);
+
+  let todos = useQuery(
+    useMemo(
+      () =>
+        todoZQL
+          .select('id', 'listID', 'text', 'completed', 'sort')
+          .where('listID', '=', listID),
+      [listID],
+    ),
+    [listID],
+    'todos',
+  );
+  // const todos = useSubscribe(rep, async tx => todosByList(tx, listID), {
+  //   default: [],
+  //   dependencies: [listID],
+  // });
+  todos = todos.slice().sort((a, b) => a.sort - b.sort);
 
   // Define event handlers and connect them to Replicache mutators. Each
   // of these mutators runs immediately (optimistically) locally, then runs

client/src/components/main-section.tsx

@@ -9,7 +9,7 @@ const MainSection = ({
   onDeleteTodos,
   onCompleteTodos,
 }: {
-  todos: Todo[];
+  todos: readonly Todo[];
   onUpdateTodo: (update: TodoUpdate) => void;
   onDeleteTodos: (ids: string[]) => void;
   onCompleteTodos: (completed: boolean, ids: string[]) => void;

client/vite.config.ts

@@ -1,5 +1,5 @@
-import {defineConfig} from 'vite';
 import react from '@vitejs/plugin-react';
+import {defineConfig} from 'vite';
 
 // https://vitejs.dev/config/
 export default defineConfig({

package.json

@@ -29,7 +29,7 @@
     "shared"
   ],
   "dependencies": {
-    "@rocicorp/rails": "0.8.1",
+    "@rocicorp/rails": "file:../rails/rocicorp-rails-0.10.0.tgz",
     "replicache": "^14.2.2"
   }
 }