blob: 0ac2e4c0c2cc2098e8832e8ac683be2072bfabc2 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
import React, {useEffect, useState} from "react";
import SettingsEditor from "./SettingsEditor.tsx";
import Folder from "./Folder.tsx";
import imageUrl from "./assets/settings.svg"
import BookmarkTreeNode = browser.bookmarks.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>([])
const [backgroundURL, setBackgroundURL] = useState("")
useEffect(() => {
browser.bookmarks.getTree().then(t => {
setOgBookmarkTree(t);
})
}, [])
useEffect(() => {
browser.bookmarks.getSubTree(rootFolder).then(t => {
setBookmarkTree(t);
});
}, [rootFolder]);
return (
<BookmarkTree.Provider value={{bookmarkTree, setBookmarkTree}}>
<RootFolder.Provider value={{rootFolder, setRootFolder}}>
<style>{"body {background-image: url(\""+ backgroundURL +"\")}"}</style>
<button id="settings-button" onClick={_ => setSettingsOpen(!settingsOpen)}>
<img alt="open settings" src={imageUrl}/>
</button>
{settingsOpen && (<SettingsEditor tree={ogBookmarkTree!} closer={setSettingsOpen} setBackgroundURL={setBackgroundURL}/>)}
{bookmarkTree[0] && (<Folder data={bookmarkTree[0]}/>)}
</RootFolder.Provider>
</BookmarkTree.Provider>
)
}
export default Body
|
