Vite + React + TS

From 61bb02110ccebbbd78119dd490716637ec86419b Mon Sep 17 00:00:00 2001 From: sowgro Date: Wed, 16 Oct 2024 00:02:25 -0400 Subject: Refactor --- extension/index.html | 2 +- extension/src/Bookmark.tsx | 23 ++++++++++++++--------- extension/src/Folder.tsx | 19 ++++++++++++------- extension/src/main.tsx | 37 ++++--------------------------------- 4 files changed, 31 insertions(+), 50 deletions(-) diff --git a/extension/index.html b/extension/index.html index 1bd99ac..4b28d70 100644 --- a/extension/index.html +++ b/extension/index.html @@ -3,7 +3,7 @@ - Vite + React + TS + Bookmarks Home

diff --git a/extension/src/Bookmark.tsx b/extension/src/Bookmark.tsx index d9652a4..c555ffb 100644 --- a/extension/src/Bookmark.tsx +++ b/extension/src/Bookmark.tsx @@ -1,16 +1,21 @@ -interface BookmarkProps { - name: string; - url: string; - icon: string; -} +import BookmarkTreeNode = chrome.bookmarks.BookmarkTreeNode; -function Bookmark(props: BookmarkProps) { +function Bookmark(props: {data: BookmarkTreeNode}) { return( - -

- {props.name} + +

+ {props.data.title} ); } +function faviconURL(u: string | undefined) { + if (!u) return ""; + u = new URL(u).origin.toString(); + const url = new URL(chrome.runtime.getURL("/_favicon/")); + url.searchParams.set("pageUrl", u); + url.searchParams.set("size", "32"); + return url.toString(); +} + export default Bookmark; \ No newline at end of file diff --git a/extension/src/Folder.tsx b/extension/src/Folder.tsx index e831e62..07d56ac 100644 --- a/extension/src/Folder.tsx +++ b/extension/src/Folder.tsx @@ -1,14 +1,19 @@ -interface FolderProps { - name: string; - children?: React.ReactNode; -} +import BookmarkTreeNode = chrome.bookmarks.BookmarkTreeNode; +import Bookmark from "./Bookmark.tsx"; -function Folder (props: FolderProps) { +function Folder (props: {data: BookmarkTreeNode}) { return (

- {props.name} + {props.data.title}

- {props.children} + { + props.data.children && + props.data.children.map(child => { + return child.children + ? + : + }) + }

) diff --git a/extension/src/main.tsx b/extension/src/main.tsx index 36df6f6..0aaf551 100644 --- a/extension/src/main.tsx +++ b/extension/src/main.tsx @@ -1,41 +1,12 @@ import { createRoot } from 'react-dom/client' import './index.css' import Folder from "./Folder.tsx"; -import BookmarkTreeNode = chrome.bookmarks.BookmarkTreeNode; -import Bookmark from "./Bookmark.tsx"; -chrome.bookmarks.getTree((tree) => { - createRoot(document.getElementById('root')!).render(createFolder(tree[0])) -}); - -function createFolder(lev: BookmarkTreeNode) { - return ( - - { - lev.children ? lev.children.map(item => { - if (item.children) { - return createFolder(item) - } else { - return - } - }) : err - } - +chrome.bookmarks.getTree(tree => { + createRoot(document.getElementById('root')!).render( + ) -} - -function faviconURL(u: string | undefined) { - if (!u) { - return ""; - } - u = new URL(u).origin.toString(); - const url = new URL(chrome.runtime.getURL("/_favicon/")); - url.searchParams.set("pageUrl", u); - url.searchParams.set("size", "32"); - console.log(u) - return url.toString(); -} - +}); // chrome.bookmarks.create( // {'parentId': '0', 'title': 'Bookmarks Extension'}, -- cgit v1.2.3