3 files changed, 43 insertions, 12 deletions
diff --git a/extension/src/Body.tsx b/extension/src/Body.tsx
index df1c325..b2f8495 100644
--- a/extension/src/Body.tsx
+++ b/extension/src/Body.tsx
@@ -4,19 +4,51 @@ import Folder from "./Folder.tsx";
 import imageUrl from "./assets/settings.svg"
 import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
 
-function Body(props: {tree: BookmarkTreeNode[]}) {
+// @ts-ignore
+if (typeof browser === "undefined") {
+    var browser = chrome;
+}
+
+export const RootFolder = React.createContext({
+    rootFolder: '0',
+    setRootFolder: (arg0: string) => {}
+});
+
+export const BookmarkTree = React.createContext({
+    bookmarkTree: [] as BookmarkTreeNode[],
+    setBookmarkTree: (arg0: BookmarkTreeNode[]) => {}
+})
+
+function Body() {
     const [settingsOpen, setSettingsOpen] = useState(false);
+    const [rootFolder, setRootFolder] = useState('1')
+    const [bookmarkTree, setBookmarkTree] = useState<BookmarkTreeNode[]>([])
+    const [ogBookmarkTree, setOgBookmarkTree] = useState<BookmarkTreeNode[] | null>([])
+
+    browser.bookmarks.getSubTree(rootFolder).then(t => {
+        console.log(t);
+        if (t != bookmarkTree) {
+            setBookmarkTree(t);
+        }
+        console.log(bookmarkTree == t)
+    });
+
+    if (ogBookmarkTree?.length == 0) {
+        browser.bookmarks.getTree().then(t => {
+            setOgBookmarkTree(t);
+        })
+    }
 
     return (
-        <>
+        <BookmarkTree.Provider value={{bookmarkTree, setBookmarkTree}}>
+        <RootFolder.Provider value={{rootFolder, setRootFolder}}>
             <button id="settings-button" onClick={_ => setSettingsOpen(!settingsOpen)}>
                 <img alt="open settings" src={imageUrl}/>
             </button>
-            {settingsOpen && (<SettingsEditor tree={props.tree} closer={setSettingsOpen}/>)}
-            <Folder data={
-                (props.tree && props.tree[0] && props.tree[0].children && props.tree[0].children[0])!
-            }/>
-        </>
+            {settingsOpen && (<SettingsEditor tree={ogBookmarkTree!} closer={setSettingsOpen}/>)}
+            {bookmarkTree[0] && (<Folder data={bookmarkTree[0]}/>)}
+        </RootFolder.Provider>
+        </BookmarkTree.Provider>
     )
 }
 
diff --git a/extension/src/SettingsEditor.tsx b/extension/src/SettingsEditor.tsx
index 7568bad..f803fc3 100644
--- a/extension/src/SettingsEditor.tsx
+++ b/extension/src/SettingsEditor.tsx
@@ -1,12 +1,13 @@
 import RadioButtonGroup from "./RadioButtonGroup.tsx";
-import React, {useState} from "react";
+import React, {useContext, useState} from "react";
 import imageUrl from "./assets/close.svg"
 import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
+import {RootFolder} from "./Body.tsx";
 
 function SettingsEditor(props: {tree: BookmarkTreeNode[], closer: (arg0: boolean) => void}) {
     const [backgroundType, setBackgroundType] = useState("fromTheme");
     const [sort, setSort] = useState("fromBookmarks");
-    const [rootFolder, setRootFolder] = useState('0');
+    const {rootFolder, setRootFolder} = useContext(RootFolder)
 
     return (
         <div id="settings-menu">
diff --git a/extension/src/main.tsx b/extension/src/main.tsx
index 0b6d9de..5e6503a 100644
--- a/extension/src/main.tsx
+++ b/extension/src/main.tsx
@@ -7,9 +7,7 @@ if (typeof browser === "undefined") {
     var browser = chrome;
 }
 
-browser.bookmarks.getTree().then(tree => {
-    createRoot(document.body).render(<Body tree={tree}/>)
-});
+createRoot(document.body).render(<Body/>)
 
 // chrome.bookmarks.create(
 //     {'parentId': '0', 'title': 'Bookmarks Extension'},