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:../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": "^14.2.2",
     "replicache-react": "5.0.1",
     "shared": "^0.1.0",
     "todomvc-app-css": "^2.4.2"

client/src/app.tsx

@@ -2,14 +2,13 @@ import {Dialog} from '@headlessui/react';
 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 {Replicache} from 'replicache';
+import {List, Todo, TodoUpdate} from 'shared';
 import Header from './components/header';
 import MainSection from './components/main-section';
 import {Share} from './components/share';
 import {M} from './mutators';
+import {useQuery, useTable} from './use-query';
 
 // This is the top-level component for our app.
 const App = ({
@@ -46,21 +45,23 @@ 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 listTable = useTable<List>(rep, 'list');
+  const todoTable = useTable<Todo>(rep, 'todo');
 
-  const selectedList = useSubscribe(
-    rep,
-    (tx: ReadTransaction) => getList(tx, listID),
-    {dependencies: [listID]},
-  );
+  const allListsQuery = listTable.select('id', 'name').asc('name');
+  const lists = useQuery(allListsQuery);
 
-  // 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);
+  const selectedListsQuery = allListsQuery.where('id', '=', listID).limit(1);
+  const selectedLists = useQuery(selectedListsQuery, [listID]);
+  const selectedList = selectedLists[0];
+
+  const todosQuery = todoTable
+    .select('id', 'listID', 'text', 'completed', 'sort')
+    .where('listID', '=', listID)
+    .desc('sort');
+  const todos = useQuery(todosQuery, [listID]);
+
+  const todosCount = useQuery(todoTable.where('listID', '=', listID).count());
 
   // Define event handlers and connect them to Replicache mutators. Each
   // of these mutators runs immediately (optimistically) locally, then runs
@@ -110,6 +111,7 @@ const App = ({
 
   return (
     <div id="layout">
+      <div>listID: {listID}</div>
       <div id="nav">
         {lists.map(list => {
           const path = `/list/${list.id}`;
@@ -120,7 +122,6 @@ const App = ({
               onClick={e => {
                 router.navigate(path);
                 e.preventDefault();
-                return false;
               }}
             >
               {list.name}
@@ -130,7 +131,7 @@ const App = ({
       </div>
       <div className="todoapp">
         <Header
-          listName={selectedList?.name}
+          listName={selectedList?.name + ' (' + todosCount + ' items)'}
           userID={userID}
           onNewItem={handleNewItem}
           onNewList={handleNewList}

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/src/components/share.tsx

@@ -1,19 +1,19 @@
-import {useSubscribe} from 'replicache-react';
-import {M} from '../mutators';
-import {Replicache} from 'replicache';
-import {listShares} from 'shared';
-import {FormEvent} from 'react';
 import {Dialog} from '@headlessui/react';
 import {nanoid} from 'nanoid';
+import {FormEvent} from 'react';
+import {Replicache} from 'replicache';
+import {Share as ShareType} from 'shared';
+import {M} from '../mutators';
+import {useQuery, useTable} from '../use-query.js';
 
 export function Share({rep, listID}: {rep: Replicache<M>; listID: string}) {
-  const guests = useSubscribe(
-    rep,
-    async tx => {
-      const allShares = await listShares(tx);
-      return allShares.filter(a => a.listID === listID);
-    },
-    {default: []},
+  const shareTable = useTable<ShareType>(rep, 'share');
+  const guests = useQuery(
+    shareTable
+      .select('id', 'listID', 'userID')
+      .asc('userID')
+      .where('listID', '=', listID),
+    [listID],
   );
 
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {

client/src/use-query.tsx

@@ -0,0 +1,26 @@
+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 {useEffect, useMemo, useState} from 'react';
+
+export function useQuery<S extends EntitySchema, R>(
+  query: EntityQuery<S, R>,
+  dependencies: unknown[] = [],
+): R {
+  const view = useMemo(() => query.prepare().materialize(), dependencies);
+  const [value, setValue] = useState<R>(view.value as R);
+  useEffect(() => {
+    setValue(view.value);
+    return view.on(setValue);
+  }, dependencies);
+  return value;
+}
+
+type ReplicacheLike = Parameters<typeof generateZQL>[0];
+
+export function useTable<E extends Entity>(
+  rep: ReplicacheLike,
+  tableName: string,
+) {
+  return generateZQL<E>(rep, tableName);
+}

package.json

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