update to replicache 14

see #159 which we're merging into this fork with this commit

Author: tantaman

client/package.json

@@ -32,7 +32,7 @@
     "react-remark": "^2.1.0",
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.9",
-    "replicache-react": "3.0.0",
+    "replicache-react": "5.0.1",
     "shared": "^0.1.0",
     "todomvc-app-css": "^2.4.2"
   },

client/src/app.tsx

@@ -22,7 +22,6 @@ import {
   IssueUpdate,
   IssueUpdateWithID,
   ISSUE_KEY_PREFIX,
-  PartialSyncState,
 } from 'shared';
 import {getFilters, getIssueOrder} from './filters';
 import {Layout} from './layout/layout';
@@ -49,27 +48,20 @@ const App = ({rep, undoManager}: AppProps) => {
     issueOrder: getIssueOrder(view, orderBy),
   });
 
-  const partialSync = useSubscribe<
-    PartialSyncState | 'NOT_RECEIVED_FROM_SERVER'
-  >(
+  const partialSync = useSubscribe(
     rep,
     async (tx: ReadTransaction) => {
       return (await getPartialSyncState(tx)) || 'NOT_RECEIVED_FROM_SERVER';
     },
-    'NOT_RECEIVED_FROM_SERVER',
+    {default: 'NOT_RECEIVED_FROM_SERVER'},
   );
   const partialSyncComplete = partialSync === 'COMPLETE';
-  function pull() {
+  useEffect(() => {
     console.log('partialSync', partialSync);
     if (!partialSyncComplete) {
-      if (document.hidden) {
-        setTimeout(pull, 1000);
-      } else {
-        rep.pull();
-      }
+      void rep.pull();
     }
-  }
-  useEffect(pull, [rep, partialSync, partialSyncComplete]);
+  }, [rep, partialSync, partialSyncComplete]);
 
   useEffect(() => {
     const ev = new EventSource(`/api/replicache/poke?channel=poke`);

client/src/index.tsx

@@ -5,7 +5,6 @@ import {Replicache} from 'replicache';
 import {UndoManager} from '@rocicorp/undo';
 import App from './app';
 
-// TODO: see `id.tsx`
 async function init() {
   // See https://doc.replicache.dev/licensing for how to get a license key.
   const licenseKey = import.meta.env.VITE_REPLICACHE_LICENSE_KEY;

client/src/issue/issue-detail.tsx

@@ -19,7 +19,6 @@ import {sortBy} from 'lodash';
 import {useIssueDetailState} from '../hooks/query-state-hooks';
 import {
   Comment,
-  Description,
   getDescription,
   getIssue,
   Issue,
@@ -88,39 +87,45 @@ export default function IssueDetail({
     }
   }, [issues, detailIssueID]);
 
-  const issue = useSubscribe<Issue | null>(
+  const issue = useSubscribe(
     rep,
     async tx => {
       if (detailIssueID) {
         return (await getIssue(tx, detailIssueID)) || null;
       }
       return null;
     },
-    null,
-    [detailIssueID],
+    {
+      default: null,
+      dependencies: [detailIssueID],
+    },
   );
-  const description = useSubscribe<Description | null>(
+  const description = useSubscribe(
     rep,
     async tx => {
       if (detailIssueID) {
         return (await getDescription(tx, detailIssueID)) || null;
       }
       return null;
     },
-    null,
-    [detailIssueID],
+    {
+      default: null,
+      dependencies: [detailIssueID],
+    },
   );
 
-  const comments = useSubscribe<Comment[] | []>(
+  const comments = useSubscribe(
     rep,
     async tx => {
       if (detailIssueID) {
         return (await getIssueComments(tx, detailIssueID)) || [];
       }
       return [];
     },
-    [],
-    [detailIssueID],
+    {
+      default: [],
+      dependencies: [detailIssueID],
+    },
   );
 
   const handleClose = useCallback(async () => {

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "todo-row-versioning",
+  "name": "repliear-row-versioning",
   "version": "0.1.0",
   "devDependencies": {
     "@headlessui/react": "^1.7.16",
@@ -31,8 +31,8 @@
   "dependencies": {
     "@emotion/styled": "^11.11.0",
     "@mui/styled-engine": "^5.14.17",
-    "@rocicorp/rails": "0.8.0",
+    "@rocicorp/rails": "0.8.1",
     "fractional-indexing": "^3.2.0",
-    "replicache": "^13.0.1"
+    "replicache": ">=14.0.3"
   }
 }