Merge pull request #321 from automerge/update-react-use-awareness

update react-use-awareness example
automerge · Mar 20, 2024 · c05e3e0 · c05e3e0
2 parents 19f688d + 9f3d725
commit c05e3e0
Show file tree

Hide file tree

Showing 4 changed files with 2,951 additions and 7,104 deletions.
diff --git a/examples/react-use-awareness/package.json b/examples/react-use-awareness/package.json
@@ -1,8 +1,8 @@
 {
   "name": "automerge-use-awareness-example-project",
-  "repository": "https://github.com/automerge/automerge-repo/tree/master/examples/react-use-awareness",
-  "private": true,
   "version": "1.1.4",
+  "private": true,
+  "repository": "https://github.com/automerge/automerge-repo/tree/master/examples/react-use-awareness",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,6 +12,7 @@
     "@automerge/automerge-repo": "workspace:*",
     "@automerge/automerge-repo-network-broadcastchannel": "workspace:*",
     "@automerge/automerge-repo-react-hooks": "workspace:*",
+    "@automerge/automerge-repo-storage-indexeddb": "workspace:*",
     "eventemitter3": "^5.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -21,4 +22,4 @@
   "devDependencies": {
     "@vitejs/plugin-react-swc": "^3.2.0"
   }
-}
+}
diff --git a/examples/react-use-awareness/src/App.jsx b/examples/react-use-awareness/src/App.jsx
@@ -2,30 +2,32 @@ import {
   useDocument,
   useLocalAwareness,
   useRemoteAwareness,
-} from "@automerge/automerge-repo-react-hooks";
+} from "@automerge/automerge-repo-react-hooks"
 
 export function App({ userId, url }) {
-  const [doc, changeDoc] = useDocument(url);
+  const [doc, changeDoc] = useDocument(url)
 
   const [localState, updateLocalState] = useLocalAwareness({
     handle,
     userId,
-    initialState: {}
-  });
-  
+    initialState: {},
+  })
+
   const [peerStates, heartbeats] = useRemoteAwareness({
-    handle, 
+    handle,
     localUserId: userId,
-  });
+  })
 
-  const newCount = localState?.count;
-  const count = doc?.count ?? 0;
+  const newCount = localState?.count
+  const count = doc?.count ?? 0
 
   return (
     <div>
       <p>
-        This is an example of useAwareness, which is used to share ephemeral state that won't be saved to the document.
-        It's most commonly used for showing which peers are online and their cursor positions, but you can use any serializable data you'd like. 
+        This is an example of useAwareness, which is used to share ephemeral
+        state that won't be saved to the document. It's most commonly used for
+        showing which peers are online and their cursor positions, but you can
+        use any serializable data you'd like.
       </p>
       <hr />
       <div>
@@ -35,8 +37,8 @@ export function App({ userId, url }) {
           value={newCount ?? count}
           placeholder={count}
           style={{ color: newCount ? "red" : "black" }}
-          onChange={(e) =>
-            updateLocalState((state) => ({
+          onChange={e =>
+            updateLocalState(state => ({
               ...state,
               count: e.target.value,
             }))
@@ -64,18 +66,18 @@ export function App({ userId, url }) {
       <br />
       <button
         onClick={() =>
-          changeDoc((doc) => {
-            if (newCount === undefined) return;
+          changeDoc(doc => {
+            if (newCount === undefined) return
             doc.count = newCount
-            updateLocalState((state) => ({ ...state, count: undefined }));
+            updateLocalState(state => ({ ...state, count: undefined }))
           })
         }
         disabled={newCount === undefined}
         children="commit to doc"
       />
       <button
         onClick={() =>
-          updateLocalState((state) => ({ ...state, count: undefined }))
+          updateLocalState(state => ({ ...state, count: undefined }))
         }
         disabled={newCount === undefined}
         children="reset"
@@ -84,5 +86,5 @@ export function App({ userId, url }) {
         {JSON.stringify({ doc, localState, peerStates, heartbeats }, null, 2)}
       </pre>
     </div>
-  );
+  )
 }
diff --git a/examples/react-use-awareness/src/main.jsx b/examples/react-use-awareness/src/main.jsx
@@ -1,29 +1,26 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { App } from "./App";
-import { Repo, isValidAutomergeUrl } from "@automerge/automerge-repo";
-import { BroadcastChannelNetworkAdapter } from "@automerge/automerge-repo-network-broadcastchannel";
-import { RepoContext } from "@automerge/automerge-repo-react-hooks";
-import { v4 } from 'uuid'
+import React from "react"
+import ReactDOM from "react-dom/client"
+import { App } from "./App"
+import { Repo, isValidAutomergeUrl } from "@automerge/automerge-repo"
+import { BroadcastChannelNetworkAdapter } from "@automerge/automerge-repo-network-broadcastchannel"
+import { RepoContext } from "@automerge/automerge-repo-react-hooks"
+import { v4 } from "uuid"
 import { IndexedDBStorageAdapter } from "@automerge/automerge-repo-storage-indexeddb"
 
 const repo = new Repo({
   storage: new IndexedDBStorageAdapter("use-awareness-example"),
-  network: [
-    new BroadcastChannelNetworkAdapter()
-  ],
-});
+  network: [new BroadcastChannelNetworkAdapter()],
+})
 
-const userId = v4();
+const userId = v4()
 
 const rootDocUrl = `${document.location.hash.substring(1)}`
-let handle
-if (isValidAutomergeUrl(rootDocUrl)) {
-  handle = repo.find(rootDocUrl)
-} else {
-  handle = repo.create()
-}
+const handle = isValidAutomergeUrl(rootDocUrl)
+  ? repo.find(rootDocUrl)
+  : repo.create()
+
 const docUrl = (document.location.hash = handle.url)
+
 window.handle = handle // we'll use this later for experimentation
 window.repo = repo
 
@@ -33,4 +30,4 @@ ReactDOM.createRoot(document.getElementById("root")).render(
       <App userId={userId} url={docUrl} />
     </React.StrictMode>
   </RepoContext.Provider>
-);
+)