[IMP] Import/Export Bookmarks

This commit adds functionality of importing/exporting your personal bookmarks.
It can help to share your bookmarks with your friends or get their bookmarks too.

Author: user-64bit

src/features/settings/components/BookmarkSettings/BookmarkSettings.tsx

@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react'
 import { BiBookmarkMinus } from 'react-icons/bi'
 import toast from 'react-simple-toasts'
 import { CardLink } from 'src/components/Elements'
@@ -60,17 +61,77 @@ const BookmarkItem = ({ item, appendRef = false }: BookmarkItemProps) => {
 }
 
 export const BookmarkSettings = () => {
-  const { userBookmarks } = useBookmarks()
+  const inputFile = useRef<HTMLInputElement | null>(null)
+  const {initState, userBookmarks } = useBookmarks()
+
+  const importBookmarks = () => {
+    inputFile.current?.click()
+  }
+
+  const exportBookmarks = () => {
+    const blob = new Blob([JSON.stringify(userBookmarks, null, 2)], {
+      type: 'application/json',
+    })
+    const downloadURL = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = downloadURL;
+    link.download = "hackertabBookmarks";
+    link.click();
+  }
+  const handleFileChange = (event: any) => {
+    const file = event.target.files?.[0];
+    if (file && file.type === 'application/json') {
+      const reader = new FileReader()
+      reader.onload = () => {
+        const importData: BookmarkedPost[] = JSON.parse(reader.result as string);
+        const validatedData = importData.filter(
+          (data: BookmarkedPost) =>
+            data.title &&
+            data.url &&
+            !userBookmarks.some((bm) => bm.title === data.title && bm.url === data.url))
+        .map((data) => ({
+            title: data.title,
+            url: data.url,
+            source: data.source || '',
+            sourceType: data.sourceType || '',
+        }));
+        initState({
+          userBookmarks: [...userBookmarks, ...validatedData],
+        });
+      }
+      reader.readAsText(file)
+    }
+  }
+
 
   return (
-    <SettingsContentLayout
-      title="Bookmarks"
-      description="Find all your bookmarks here. You can remove a bookmark by clicking on the remove icon.">
-      <div className="bookmarks">
-        {userBookmarks.map((bm) => (
-          <BookmarkItem item={bm} key={bm.url} />
-        ))}
+    <>
+      <div className="btn-group">
+        <div>
+          <input
+            type="file"
+            id="file"
+            ref={inputFile}
+            style={{ display: 'none' }}
+            onChange={handleFileChange}
+          />
+          <button className="notbtn btn" onClick={() => importBookmarks()}>
+            Import
+          </button>
+        </div>
+        <button className="notbtn btn" onClick={() => exportBookmarks()}>
+            Export
+        </button>
       </div>
-    </SettingsContentLayout>
+      <SettingsContentLayout
+        title="Bookmarks"
+        description="Find all your bookmarks here. You can remove a bookmark by clicking on the remove icon.">
+        <div className="bookmarks">
+          {userBookmarks.map((bm) => (
+            <BookmarkItem item={bm} key={bm.url} />
+          ))}
+        </div>
+      </SettingsContentLayout>
+    </>
   )
 }

src/features/settings/components/BookmarkSettings/bookmarkSettings.css

@@ -53,3 +53,31 @@
   align-items: center;
   justify-content: center;
 }
+
+/* Export/Import Bookmark Buttons */
+
+/* removing that ugly default button design */
+.notbtn {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+}
+
+.btn-group {
+  padding: 10px;
+  display: flex;
+}
+
+.btn {
+  border-radius: 12px;
+  padding: 6px 12px;
+  margin-right: 5px;
+  background-color: var(--chip-background);
+}
+.btn:hover {
+  filter: brightness(85%);
+}