From 1ca4340e46f7fec3d2689cb8a3c60f9018ead048 Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Tue, 17 Dec 2024 03:16:10 -0500
Subject: backup push: not quite working

---
 extension/src/components/Bookmark.tsx | 139 +++++++++++++++++++++++-----------
 1 file changed, 95 insertions(+), 44 deletions(-)

(limited to 'extension/src/components/Bookmark.tsx')

diff --git a/extension/src/components/Bookmark.tsx b/extension/src/components/Bookmark.tsx
index 2442e02..e378b0f 100644
--- a/extension/src/components/Bookmark.tsx
+++ b/extension/src/components/Bookmark.tsx
@@ -1,33 +1,63 @@
 import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
-import React, {SyntheticEvent, useEffect} from "react";
+import React, {SyntheticEvent, useContext, useEffect, useState} from "react";
 import {getBrowser} from "../main.tsx";
-import {ActiveDrag, Settings} from "./Body.tsx";
+import {ActiveDrag, ActiveEdit, Settings} from "./Body.tsx";
 import ColorThief from 'colorthief'
 import DropTargets from "./DropTargets.tsx";
+import ContextMenu from "./ContextMenu.tsx";
 
 /**
  * A component for a single bookmark
- *
- * @param props.data The BookmarkTreeNode with the data for the bookmark
  */
-function Bookmark(props: {data: BookmarkTreeNode}) {
-    let [settings, _] = React.useContext(Settings);
+function Bookmark(props: {id: string}) {
+    let [settings] = React.useContext(Settings);
     let [activeDrag, setActiveDrag] = React.useContext(ActiveDrag);
+    const [, setActiveEdit] = useContext(ActiveEdit)
 
     let [favicon, setFavicon] = React.useState<string | null>(null);
     let [iconMode, setIconMode] = React.useState<"large" | "small" | "letter">("letter");
     let [bgColor, setBgColor] = React.useState<[number, number, number] | null>(null)
     let [bgColorPriority, setBgColorPriority] = React.useState(0);
+    const [bmData, setBmData] = useState<BookmarkTreeNode | undefined>()
+    const [renameMode, setRenameMode] = useState(false);
+
+    useEffect(() => {
+        getBrowser().bookmarks.get(props.id).then(r => {
+            setBmData(r[0]);
+        })
 
+        getBrowser().bookmarks.onChanged.addListener((id: string) => {
+            if (id !== props.id) return;
+            getBrowser().bookmarks.get(props.id).then(r => {
+                setBmData(r[0]);
+            })
+        })
+    }, []);
 
     useEffect(() => {
-        faviconURL(props.data).then(r => {
+        if (!bmData) return;
+        faviconURL(bmData).then(r => {
             if (r) {
                 setFavicon(r)
                 setIconMode("small");
             }
         })
-    }, []);
+    }, [bmData]);
+
+    useEffect(() => {
+        let evl = () => {
+            console.log("clicked")
+            renameMode && setRenameMode(false);
+            console.log("evl unregistered")
+            document.body.removeEventListener('click', evl);
+        }
+        if (renameMode) {
+            console.log("evl registered")
+            document.body.addEventListener('click', evl);
+        }
+    }, [renameMode]);
+
+    if (!bmData) return;
 
     function handleImageLoad(e: SyntheticEvent<HTMLImageElement, Event>) {
         if (e.currentTarget.naturalWidth >= 75 || favicon!.startsWith("data:image/svg+xml")) {
@@ -39,71 +69,92 @@ function Bookmark(props: {data: BookmarkTreeNode}) {
     }
 
     // Dragging
-    function handleDrag() {
-        setActiveDrag(props.data);
-    }
+    const handleDrag = () => {
+        setActiveDrag(bmData);
+    };
 
-    function handleDragEnd() {
+    const handleDragEnd = () => {
         setActiveDrag(null);
-    }
+    };
 
     // Dropping
-    function handleDropLeft() {
+    const handleDropLeft = () => {
         console.log("drop left bm")
         getBrowser().bookmarks.move(activeDrag!.id, {
-            parentId: props.data.parentId,
-            index: props.data.index
+            parentId: bmData.parentId,
+            index: bmData.index
         })
         location.reload()
-    }
+    };
 
-    function handleDropRight() {
+    const handleDropRight = () => {
         console.log("drop right bm")
         getBrowser().bookmarks.move(activeDrag!.id, {
-            parentId: props.data.parentId,
-            index: (props.data.index! + 1)
+            parentId: bmData.parentId,
+            index: (bmData.index! + 1)
         })
         location.reload();
-    }
+    };
 
-    function handleDropCenter() {
+    const handleDropCenter = () => {
         console.log("drop center bm")
         chrome.bookmarks.create({
             // type: "folder",
-            parentId: props.data.parentId,
-            index: props.data.index,
+            parentId: bmData.parentId,
+            index: bmData.index,
             title: "New Folder"
         }).then(r => {
-            getBrowser().bookmarks.move(props.data.id, {parentId: r.id});
+            getBrowser().bookmarks.move(bmData.id, {parentId: r.id});
             getBrowser().bookmarks.move(activeDrag!.id, {parentId: r.id});
             location.reload()
         })
-    }
+    };
+
+    const handleDelete = () => {
+        getBrowser().bookmarks.remove(bmData.id);
+        location.reload();
+    };
+
+    const handleEdit = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault()
+        setRenameMode(true)
+        // setActiveEdit(bmData);
+    };
 
     return(
         <div className={"bookmark"}>
-            <a href={props.data.url} draggable={settings.editMode} onDrag={handleDrag} onDragEnd={handleDragEnd}>
-                <div className={"icon-box " + (iconMode)} style={bgColor ? {"--icon-bg": `rgba(${bgColor[0]}, ${bgColor[1]}, ${bgColor[2]}, 0.2)`} as React.CSSProperties : undefined}>
-                    {(() => { switch (iconMode) {
-                        case "letter": {
-                            let url = new URL(props.data.url!);
-                            if (bgColorPriority < 1) {
-                                setBgColor(hashStringToColor(url.hostname));
-                                setBgColorPriority(1);
+            <a href={bmData.url} draggable={settings.editMode} onDrag={handleDrag} onDragEnd={handleDragEnd}>
+                <div className={"icon-box " + (iconMode)}
+                     style={bgColor ? {"--icon-bg": `rgba(${bgColor[0]}, ${bgColor[1]}, ${bgColor[2]}, 0.2)`} as React.CSSProperties : undefined}>
+                    {(() => {
+                        switch (iconMode) {
+                            case "letter": {
+                                let url = new URL(bmData.url!);
+                                if (bgColorPriority < 1) {
+                                    setBgColor(hashStringToColor(url.hostname));
+                                    setBgColorPriority(1);
+                                }
+                                return (<span className={"letter"}>{url.hostname.charAt(0)}</span>)
+                            }
+                            case "small": {
+                                return (<img alt="Bookmark icon" src={favicon!} onLoad={handleImageLoad}/>)
+                            }
+                            case "large": {
+                                return (<img alt="Bookmark icon" src={favicon!}/>)
                             }
-                            return (<span className={"letter"}>{url.hostname.charAt(0)}</span>)
-                        }
-                        case "small": {
-                            return (<img alt="Bookmark icon" src={favicon!} onLoad={handleImageLoad}/>)
-                        }
-                        case "large": {
-                            return(<img alt="Bookmark icon" src={favicon!}/>)
                         }
-                    }})()}
+                    })()}
                 </div>
-                <span>{props.data.title}</span>
+                {renameMode
+                    ? <input type={'text'}
+                              defaultValue={bmData.title}
+                              onChange={e => {
+                                  getBrowser().bookmarks.update(props.id, {title: e.target.value})
+                              }}/>
+                    : <span>{bmData.title}</span>}
             </a>
-            {activeDrag && activeDrag !== props.data &&
+            {settings.editMode && <ContextMenu onEdit={handleEdit} onDelete={handleDelete}/>}
+            {activeDrag && activeDrag !== bmData &&
                 <DropTargets onDropLeft={handleDropLeft} onDropRight={handleDropRight} onDropCenter={handleDropCenter}/>}
         </div>
     );
-- 
cgit v1.2.3

