From a5a429fb2f696b72b1a96262d064685ddee9cef0 Mon Sep 17 00:00:00 2001
From: acaldas <acaldas.dev@gmail.com>
Date: Fri, 29 Nov 2024 11:42:17 +0000
Subject: [PATCH] fix: updates editor when opened document receives a new
 strand

---
 package-lock.json           |   4 +-
 src/store/document-drive.ts | 149 ++++++++++++++++++++----------------
 2 files changed, 83 insertions(+), 70 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9e1d08b9..93ceaa55 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@powerhousedao/connect",
-    "version": "1.0.0-dev.171",
+    "version": "1.0.0-dev.172",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@powerhousedao/connect",
-            "version": "1.0.0-dev.171",
+            "version": "1.0.0-dev.172",
             "license": "AGPL-3.0-only",
             "dependencies": {
                 "commander": "^12.1.0",
diff --git a/src/store/document-drive.ts b/src/store/document-drive.ts
index 7acc862a..1974a190 100644
--- a/src/store/document-drive.ts
+++ b/src/store/document-drive.ts
@@ -1,7 +1,6 @@
 import { FILE, TUiNodesContext } from '@powerhousedao/design-system';
 import { Document, Operation } from 'document-model/document';
-import { atom, useAtom, useAtomValue } from 'jotai';
-import { selectAtom } from 'jotai/utils';
+import { atom, useAtom } from 'jotai';
 import { useCallback, useEffect, useMemo } from 'react';
 import { IReadModeContext } from 'src/context/read-mode';
 import { documentToHash } from 'src/hooks/useDocumentDrives';
@@ -110,9 +109,18 @@ const fileNodeDocumentAtom = atom(
     },
 );
 
-const selectedDocumentAtom = selectAtom(
-    fileNodeDocumentAtom,
-    fileNode => fileNode?.document,
+const selectedDocumentAtom = atom(
+    get => get(fileNodeDocumentAtom)?.document,
+    (get, set, document: Document | undefined) => {
+        const fileNodeDocument = get(fileNodeDocumentAtom);
+        if (!fileNodeDocument) {
+            throw new Error('fileNodeDocument is undefined');
+        } else if (!document) {
+            set(fileNodeDocumentAtom, undefined);
+        } else {
+            set(fileNodeDocumentAtom, { ...fileNodeDocument, document });
+        }
+    },
 );
 
 export function useFileNodeDocument(
@@ -137,19 +145,8 @@ export function useFileNodeDocument(
     const documentType =
         kind === 'FILE' ? selectedNode?.documentType : undefined;
 
-    const selectedDocument = useAtomValue(selectedDocumentAtom);
-    const setSelectedDocument = useMemo(() => {
-        function setSelectedDocument(document: Document | undefined) {
-            if (!document) {
-                setFileNodeDocument(undefined);
-            } else if (fileNodeDocument) {
-                setFileNodeDocument({ ...fileNodeDocument, document });
-            } else {
-                throw new Error('fileNodeDocument is undefined');
-            }
-        }
-        return setSelectedDocument;
-    }, [fileNodeDocument, setFileNodeDocument]);
+    const [selectedDocument, setSelectedDocument] =
+        useAtom(selectedDocumentAtom);
 
     const fetchDocument = useCallback(
         async (driveId: string, id: string, documentType: string) => {
@@ -187,56 +184,39 @@ export function useFileNodeDocument(
                 status: 'LOADING',
             });
 
-            // if the selected file node didn't change then does nothing
-            if (!changed) {
-                return;
-            }
-            fetchDocument(driveId, documentId, documentType)
-                .then(document =>
-                    setFileNodeDocument(
-                        document
-                            ? {
-                                  driveId,
-                                  documentId,
-                                  documentType,
-                                  document,
-                                  status: 'LOADED',
-                              }
-                            : {
-                                  driveId,
-                                  documentId,
-                                  documentType,
-                                  document,
-                                  status: 'ERROR',
-                              },
-                    ),
-                )
-                .catch(error => {
-                    logger.error(error);
-                    setFileNodeDocument({
-                        driveId,
-                        documentId,
-                        documentType,
-                        document: undefined,
-                        status: 'ERROR',
+            // if the selected file node changed then fetches the new document
+            if (changed) {
+                fetchDocument(driveId, documentId, documentType)
+                    .then(document =>
+                        setFileNodeDocument(
+                            document
+                                ? {
+                                      driveId,
+                                      documentId,
+                                      documentType,
+                                      document,
+                                      status: 'LOADED',
+                                  }
+                                : {
+                                      driveId,
+                                      documentId,
+                                      documentType,
+                                      document,
+                                      status: 'ERROR',
+                                  },
+                        ),
+                    )
+                    .catch(error => {
+                        logger.error(error);
+                        setFileNodeDocument({
+                            driveId,
+                            documentId,
+                            documentType,
+                            document: undefined,
+                            status: 'ERROR',
+                        });
                     });
-                });
-
-            // watches for strand updates to update the document
-            const handler = onStrandUpdate(strand => {
-                if (
-                    strand.driveId === driveId &&
-                    strand.documentId === documentId
-                ) {
-                    fetchDocument(driveId, documentId, documentType)
-                        .then(setSelectedDocument)
-                        .catch(logger.error);
-                }
-            });
-
-            return () => {
-                handler();
-            };
+            }
         }
     }, [
         selectedNode,
@@ -245,8 +225,41 @@ export function useFileNodeDocument(
         driveId,
         fetchDocument,
         fileNodeDocument,
-        onStrandUpdate,
         setFileNodeDocument,
+    ]);
+
+    useEffect(() => {
+        if (
+            !fileNodeDocument?.driveId ||
+            !fileNodeDocument.documentId ||
+            !fileNodeDocument.documentType
+        ) {
+            return;
+        }
+
+        // watches for strand updates to update the document
+        const removeListener = onStrandUpdate(strand => {
+            if (
+                strand.driveId === fileNodeDocument.driveId &&
+                strand.documentId === fileNodeDocument.documentId
+            ) {
+                fetchDocument(
+                    fileNodeDocument.driveId,
+                    fileNodeDocument.documentId,
+                    fileNodeDocument.documentType,
+                )
+                    .then(setSelectedDocument)
+                    .catch(logger.error);
+            }
+        });
+
+        return removeListener;
+    }, [
+        fileNodeDocument?.driveId,
+        fileNodeDocument?.documentId,
+        fileNodeDocument?.documentType,
+        onStrandUpdate,
+        fetchDocument,
         setSelectedDocument,
     ]);