[materialite] Re-introduce Materialite [1/n]

client/package.json

@@ -34,7 +34,8 @@
     "react-window": "^1.8.9",
     "replicache-react": "5.0.1",
     "shared": "^0.1.0",
-    "todomvc-app-css": "^2.4.2"
+    "@vlcn.io/materialite": "file:../../vulcan/materialite/public/packages/materialite",
+    "@vlcn.io/materialite-react": "file:../../vulcan/materialite/public/packages/react"
   },
   "devDependencies": {
     "@rocicorp/eslint-config": "^0.1.2",

client/src/app.tsx

@@ -1,8 +1,12 @@
-import {useCallback, useEffect, useReducer} from 'react';
-import type {ReadTransaction, Replicache} from 'replicache';
+import {useCallback, useEffect} from 'react';
+import type {
+  ReadTransaction,
+  Replicache,
+  ExperimentalDiff as Diff,
+} from 'replicache';
 import type {M} from './model/mutators';
 import {useState} from 'react';
-import {minBy, pickBy} from 'lodash';
+import {pickBy} from 'lodash';
 import {generateKeyBetween} from 'fractional-indexing';
 import type {UndoManager} from '@rocicorp/undo';
 import {HotKeys} from 'react-hotkeys';
@@ -25,13 +29,40 @@ import {
 } from 'shared';
 import {getFilters, getIssueOrder} from './filters';
 import {Layout} from './layout/layout';
-import {timedReducer} from './reducer';
+import {db} from './materialite/db';
+import {useQuery} from '@vlcn.io/materialite-react';
+import {issueFromKeyAndValue} from './issue/issue';
 
 type AppProps = {
   rep: Replicache<M>;
   undoManager: UndoManager;
 };
 
+function onNewDiff(diff: Diff) {
+  if (diff.length === 0) {
+    return;
+  }
+
+  const start = performance.now();
+  db.tx(() => {
+    for (const diffOp of diff) {
+      if ('oldValue' in diffOp) {
+        db.issues.delete(
+          issueFromKeyAndValue(diffOp.key as string, diffOp.oldValue),
+        );
+      }
+      if ('newValue' in diffOp) {
+        db.issues.add(
+          issueFromKeyAndValue(diffOp.key as string, diffOp.newValue),
+        );
+      }
+    }
+  });
+
+  const duration = performance.now() - start;
+  console.log(`Diff duration: ${duration}ms`);
+}
+
 const App = ({rep, undoManager}: AppProps) => {
   const [view] = useViewState();
   const [priorityFilter] = usePriorityFilterState();
@@ -40,13 +71,28 @@ const App = ({rep, undoManager}: AppProps) => {
   const [detailIssueID, setDetailIssueID] = useIssueDetailState();
   const [menuVisible, setMenuVisible] = useState(false);
 
-  const [state, dispatch] = useReducer(timedReducer, {
-    allIssuesMap: new Map(),
-    viewIssueCount: 0,
-    filteredIssues: [],
-    filters: getFilters(view, priorityFilter, statusFilter),
-    issueOrder: getIssueOrder(view, orderBy),
-  });
+  const [filters, setFilters] = useState(
+    getFilters(view, priorityFilter, statusFilter),
+  );
+  const [issueOrder, setIssueOrder] = useState(getIssueOrder(view, orderBy));
+
+  const [, filterdIssues] = useQuery(() => {
+    const start = performance.now();
+    const source = db.issues.getSortedSource(issueOrder);
+    const ret = source.stream
+      .filter(issue => filters.issuesFilter(issue))
+      .materialize(source.comparator);
+
+    console.log(`Filter update duration: ${performance.now() - start}ms`);
+    return ret;
+  }, [issueOrder, filters]);
+  const [, viewIssueCount] = useQuery(() => {
+    const source = db.issues.getSortedSource(issueOrder);
+    return source.stream
+      .filter(issue => filters.viewFilter(issue))
+      .size()
+      .materializeValue(0);
+  }, [filters]);
 
   const partialSync = useSubscribe(
     rep,
@@ -73,37 +119,29 @@ const App = ({rep, undoManager}: AppProps) => {
   }, []);
 
   useEffect(() => {
-    return rep.experimentalWatch(
-      diff => {
-        dispatch({
-          type: 'diff',
-          diff,
-        });
-      },
-      {prefix: ISSUE_KEY_PREFIX, initialValuesInFirstDiff: true},
-    );
+    return rep.experimentalWatch(onNewDiff, {
+      prefix: ISSUE_KEY_PREFIX,
+      initialValuesInFirstDiff: true,
+    });
   }, [rep]);
 
   useEffect(() => {
-    dispatch({
-      type: 'setFilters',
-      filters: getFilters(view, priorityFilter, statusFilter),
-    });
+    const f = getFilters(view, priorityFilter, statusFilter);
+    if (f.equals(filters)) {
+      return;
+    }
+    setFilters(f);
   }, [view, priorityFilter?.join(), statusFilter?.join()]);
 
   useEffect(() => {
-    dispatch({
-      type: 'setIssueOrder',
-      issueOrder: getIssueOrder(view, orderBy),
-    });
+    setIssueOrder(getIssueOrder(view, orderBy));
   }, [view, orderBy]);
 
   const handleCreateIssue = useCallback(
     async (issue: Omit<Issue, 'kanbanOrder'>, description: Description) => {
-      const minKanbanOrderIssue = minBy(
-        [...state.allIssuesMap.values()],
-        issue => issue.kanbanOrder,
-      );
+      const minKanbanOrderIssue = db.issues
+        .getSortedSource('KANBAN')
+        .value.getMin();
       const minKanbanOrder = minKanbanOrderIssue
         ? minKanbanOrderIssue.kanbanOrder
         : null;
@@ -116,7 +154,7 @@ const App = ({rep, undoManager}: AppProps) => {
         description,
       });
     },
-    [rep.mutate, state.allIssuesMap],
+    [rep.mutate],
   );
   const handleCreateComment = useCallback(
     async (comment: Comment) => {
@@ -204,7 +242,9 @@ const App = ({rep, undoManager}: AppProps) => {
         view={view}
         detailIssueID={detailIssueID}
         isLoading={!partialSyncComplete}
-        state={state}
+        filters={filters}
+        viewIssueCount={viewIssueCount || 0}
+        filteredIssues={filterdIssues}
         rep={rep}
         onCloseMenu={handleCloseMenu}
         onToggleMenu={handleToggleMenu}

client/src/hooks/useQueryState.ts

@@ -52,7 +52,6 @@ export function useQueryState<T>(
 
   useEffect(() => {
     const handlePopState = () => {
-      console.log('pop state event...');
       const encoded = getQueryValue();
       setValue(encoded);
     };

client/src/issue/issue-board.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
+import {PersistentTreeView} from '@vlcn.io/materialite';
 import {generateNKeysBetween} from 'fractional-indexing';
 import {groupBy, indexOf} from 'lodash';
 import {memo, useCallback} from 'react';
@@ -14,8 +15,11 @@ export type IssuesByStatusType = {
   CANCELED: Issue[];
 };
 
-export const getIssueByType = (allIssues: Issue[]): IssuesByStatusType => {
-  const issuesBySType = groupBy(allIssues, 'status');
+// TODO (mlaw): Group kanban board via filtered queries against materialite rather than this thing here.
+export const getIssueByType = (
+  allIssues: PersistentTreeView<Issue>['value'],
+): IssuesByStatusType => {
+  const issuesBySType = groupBy([...allIssues], 'status');
   const defaultIssueByType = {
     BACKLOG: [],
     TODO: [],
@@ -30,7 +34,7 @@ export const getIssueByType = (allIssues: Issue[]): IssuesByStatusType => {
 export function getKanbanOrderIssueUpdates(
   issueToMove: Issue,
   issueToInsertBefore: Issue,
-  issues: Issue[],
+  issues: PersistentTreeView<Issue>['value'],
 ): IssueUpdate[] {
   const indexInKanbanOrder = indexOf(issues, issueToInsertBefore);
   let beforeKey: string | null = null;
@@ -43,11 +47,11 @@ export function getKanbanOrderIssueUpdates(
   // have identical kanbanOrder values, we need to fix up the
   // collision by re-keying the issues.
   for (let i = indexInKanbanOrder; i < issues.length; i++) {
-    if (issues[i].kanbanOrder !== beforeKey) {
-      afterKey = issues[i].kanbanOrder;
+    if (issues.at(i).kanbanOrder !== beforeKey) {
+      afterKey = issues.at(i).kanbanOrder;
       break;
     }
-    issuesToReKey.push(issues[i]);
+    issuesToReKey.push(issues.at(i));
   }
   const newKanbanOrderKeys = generateNKeysBetween(
     beforeKey,
@@ -71,7 +75,7 @@ export function getKanbanOrderIssueUpdates(
 }
 
 interface Props {
-  issues: Issue[];
+  issues: PersistentTreeView<Issue>['value'];
   onUpdateIssues: (issueUpdates: IssueUpdate[]) => void;
   onOpenDetail: (issue: Issue) => void;
 }

client/src/issue/issue-detail.tsx

@@ -26,11 +26,12 @@ import {
   Priority,
   Status,
 } from 'shared';
+import {PersistentTreeView} from '@vlcn.io/materialite';
 
 interface Props {
   onUpdateIssues: (issueUpdates: IssueUpdate[]) => void;
   onAddComment: (comment: Comment) => void;
-  issues: Issue[];
+  issues: PersistentTreeView<Issue>['value'];
   isLoading: boolean;
   rep: Replicache<M>;
 }
@@ -82,7 +83,9 @@ export default function IssueDetail({
 
   useEffect(() => {
     if (detailIssueID) {
-      const index = issues.findIndex(issue => issue.id === detailIssueID);
+      const index = issues.findIndex(
+        (issue: Issue) => issue.id === detailIssueID,
+      );
       setCurrentIssueIdx(index);
     }
   }, [issues, detailIssueID]);
@@ -166,12 +169,12 @@ export default function IssueDetail({
         if (currentIssueIdx === 0) {
           return;
         }
-        newIss = issues[currentIssueIdx - 1].id;
+        newIss = issues.at(currentIssueIdx - 1).id;
       } else {
-        if (currentIssueIdx === issues.length - 1) {
+        if (currentIssueIdx === issues.size - 1) {
           return;
         }
-        newIss = issues[currentIssueIdx + 1].id;
+        newIss = issues.at(currentIssueIdx + 1).id;
       }
 
       await setDetailIssueID(newIss);

client/src/issue/issue-list.tsx

@@ -10,22 +10,23 @@ import IssueRow from './issue-row';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import {FixedSizeList} from 'react-window';
 import {Issue, IssueUpdate, Priority, Status} from 'shared';
+import {PersistentTreeView} from '@vlcn.io/materialite';
 
 interface Props {
   onUpdateIssues: (issueUpdates: IssueUpdate[]) => void;
   onOpenDetail: (issue: Issue) => void;
-  issues: Issue[];
+  issues: PersistentTreeView<Issue>['value'];
   view: string | null;
 }
 
 type ListData = {
-  issues: Issue[];
+  issues: PersistentTreeView<Issue>['value'];
   handleChangePriority: (issue: Issue, priority: Priority) => void;
   handleChangeStatus: (issue: Issue, status: Status) => void;
   onOpenDetail: (issue: Issue) => void;
 };
 
-const itemKey = (index: number, data: ListData) => data.issues[index].id;
+const itemKey = (index: number, data: ListData) => data.issues.at(index).id;
 
 const RawRow = ({
   data,
@@ -38,7 +39,7 @@ const RawRow = ({
 }) => (
   <div style={style}>
     <IssueRow
-      issue={data.issues[index]}
+      issue={data.issues.at(index)}
       onChangePriority={data.handleChangePriority}
       onChangeStatus={data.handleChangeStatus}
       onOpenDetail={data.onOpenDetail}
@@ -90,7 +91,7 @@ const IssueList = ({onUpdateIssues, onOpenDetail, issues, view}: Props) => {
           <FixedSizeList
             ref={fixedSizeListRef}
             height={height}
-            itemCount={issues.length}
+            itemCount={issues.size}
             itemSize={43}
             itemData={itemData}
             itemKey={itemKey}

client/src/issue/issue.ts

@@ -10,20 +10,20 @@ import {
 } from 'shared';
 import {z} from 'zod';
 
-export const priorityOrderValues: Record<Priority, string> = {
-  URGENT: '1',
-  HIGH: '2',
-  MEDIUM: '3',
-  LOW: '4',
-  NONE: '5',
+export const priorityOrderValues: Record<Priority, number> = {
+  URGENT: 1,
+  HIGH: 2,
+  MEDIUM: 3,
+  LOW: 4,
+  NONE: 5,
 };
 
-export const statusOrderValues: Record<Status, string> = {
-  BACKLOG: '1',
-  TODO: '2',
-  IN_PROGRESS: '3',
-  DONE: '4',
-  CANCELED: '5',
+export const statusOrderValues: Record<Status, number> = {
+  BACKLOG: 1,
+  TODO: 2,
+  IN_PROGRESS: 3,
+  DONE: 4,
+  CANCELED: 5,
 };
 
 export enum Filter {
@@ -54,15 +54,3 @@ export async function getIssueComments(
     return commentSchema.parse(val);
   });
 }
-
-const REVERSE_TIMESTAMP_LENGTH = Number.MAX_SAFE_INTEGER.toString().length;
-
-export function reverseTimestampSortKey(timestamp: number, id: string): string {
-  return (
-    Math.floor(Number.MAX_SAFE_INTEGER - timestamp)
-      .toString()
-      .padStart(REVERSE_TIMESTAMP_LENGTH, '0') +
-    '-' +
-    id
-  );
-}