Fix bmEditing without refresh

3 files changed, 22 insertions, 14 deletions

diff --git a/extension/src/components/Bookmark.tsx b/extension/src/components/Bookmark.tsx
index 05d0430..bf075a3 100644
--- a/extension/src/components/Bookmark.tsx
+++ b/extension/src/components/Bookmark.tsx
@@ -47,7 +47,7 @@ function Bookmark(props: {id: string}) {
             parentId: bmData.parentId,
             index: bmData.index
         })
-        location.reload()
+        // location.reload()
     };
 
     const handleDropRight = () => {
@@ -55,7 +55,7 @@ function Bookmark(props: {id: string}) {
             parentId: bmData.parentId,
             index: (bmData.index! + 1)
         })
-        location.reload();
+        // location.reload();
     };
 
     const handleDropCenter = () => {
@@ -66,14 +66,14 @@ function Bookmark(props: {id: string}) {
         }).then(r => {
             getBrowser().bookmarks.move(bmData.id, {parentId: r.id});
             getBrowser().bookmarks.move(activeDrag!.id, {parentId: r.id});
-            location.reload()
+            // location.reload()
         })
     };
 
     // actions
     const handleDelete = () => {
         getBrowser().bookmarks.remove(bmData.id);
-        location.reload();
+        // location.reload();
     };
 
     const handleEdit = (e: React.MouseEvent<HTMLButtonElement>) => {
diff --git a/extension/src/components/FolderBody.tsx b/extension/src/components/FolderBody.tsx
index 9b7c5f4..0d9ddec 100644
--- a/extension/src/components/FolderBody.tsx
+++ b/extension/src/components/FolderBody.tsx
@@ -27,10 +27,18 @@ function FolderBody (props: {id: string}) {
 
     useEffect(() => {
         updateBookmarks();
-        // getBrowser().bookmarks.onRemoved.addListener((id: string, moveInfo) => {
-        //     if (moveInfo.parentId !== props.id) return;
-        //     updateBookmarks();
-        // })
+        getBrowser().bookmarks.onRemoved.addListener((id: string, moveInfo) => {
+            if (moveInfo.parentId !== props.id) return;
+            updateBookmarks();
+        })
+        getBrowser().bookmarks.onMoved.addListener((id: string, moveInfo) => {
+            if (moveInfo.parentId !== props.id && moveInfo.oldParentId !== props.id ) return;
+            updateBookmarks();
+        })
+        getBrowser().bookmarks.onCreated.addListener((id: string, moveInfo) => {
+            if (moveInfo.parentId !== props.id) return;
+            updateBookmarks();
+        })
     }, []);
 
     useEffect(() => {
@@ -43,8 +51,8 @@ function FolderBody (props: {id: string}) {
         <div className={"folderBody"}>
             {children.map(child =>
                 child.children
-                    ? <FolderButton id={child.id} />
-                    : <Bookmark id={child.id} />
+                    ? <FolderButton id={child.id} key={child.id}/>
+                    : <Bookmark id={child.id} key={child.id}/>
             )}
         </div>
     )
diff --git a/extension/src/components/FolderButton.tsx b/extension/src/components/FolderButton.tsx
index 8d64ffd..03bcc76 100644
--- a/extension/src/components/FolderButton.tsx
+++ b/extension/src/components/FolderButton.tsx
@@ -59,7 +59,7 @@ function FolderButton(props: {id: string}) {
             parentId: bmData.parentId,
             index: bmData.index
         })
-        location.reload()
+        // location.reload()
     };
 
     const handleDropRight = () => {
@@ -67,20 +67,20 @@ function FolderButton(props: {id: string}) {
             parentId: bmData.parentId,
             index: (bmData.index! + 1)
         })
-        location.reload();
+        // location.reload();
     };
 
     const handleDropCenter = () => {
         getBrowser().bookmarks.move(activeDrag!.id, {
             parentId: bmData.id
         });
-        location.reload()
+        // location.reload()
     };
 
     // actions
     const handleDelete = () => {
         getBrowser().bookmarks.removeTree(bmData.id);
-        location.reload();
+        // location.reload();
     };
 
     const handleEdit = (e: React.MouseEvent<HTMLButtonElement>) => {