From 03b7ccaa5c152c8d7ed73374be8ad4d4d034845b Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Thu, 7 Nov 2024 12:40:42 -0500
Subject: Implement sorting and refactor

---
 extension/src/components/FolderBody.tsx | 72 +++++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 extension/src/components/FolderBody.tsx

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

diff --git a/extension/src/components/FolderBody.tsx b/extension/src/components/FolderBody.tsx
new file mode 100644
index 0000000..a573a6e
--- /dev/null
+++ b/extension/src/components/FolderBody.tsx
@@ -0,0 +1,72 @@
+import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
+import Bookmark from "./Bookmark.tsx";
+import FolderButton from "./FolderButton.tsx";
+import {useContext} from "react";
+import {Settings} from "./Body.tsx";
+
+/**
+ * A component that displays the contents of a bookmark folder
+ *
+ * @param props.data The BookmarkTreeNode with data for the folder
+ * @constructor
+ */
+function FolderBody (props: {data: BookmarkTreeNode}) {
+    const [settings, _] = useContext(Settings)
+
+    if (!props.data.children) return;
+
+    let content = [...props.data.children].sort(getSortFunction(settings.sort))
+    if (settings.foldersFirst) {
+        let [bookmarks, folders] = separateFolders(content)
+        content = folders.concat(bookmarks)
+    }
+
+    return (
+        <div className={"folderBody"}>
+            {content.map(child =>
+                child.children
+                    ? <FolderButton data={child} />
+                    : <Bookmark data={child} />
+            )}
+        </div>
+    )
+}
+
+/**
+ * Gets the correct sort function based on the sort setting
+ * @param sort The sort setting state
+ * @return The corresponding sort function
+ */
+function getSortFunction(sort: "from-bookmarks" | "alphabetical" | "recent"): ((a:BookmarkTreeNode, b:BookmarkTreeNode) => number) | undefined {
+    switch (sort) {
+        case "alphabetical": return (a, b) => {
+            return a.title.localeCompare(b.title);
+        }
+        case "recent": return (a, b) => {
+            // @ts-ignore
+            return a.dateLastUsed - b.dateLastUsed
+        }
+    }
+}
+
+/**
+ * Separate the folders and the bookmarks into two separate lists
+ * @param content THe bookmark list
+ * @returns tuple in the format [bookmarks, folders]
+ */
+function separateFolders(content: BookmarkTreeNode[]) {
+    let bookmarks = [];
+    let folders = [];
+    for (let bookmarkTreeNode of content) {
+        if (bookmarkTreeNode.children) {
+            folders.push(bookmarkTreeNode)
+        } else {
+            bookmarks.push(bookmarkTreeNode)
+        }
+    }
+    return [bookmarks, folders]
+}
+
+
+
+export default FolderBody;
\ No newline at end of file
-- 
cgit v1.2.3