Merge branch 'feat/dark-mode' into feat/dark-mode

components/Modal/User/PrivacySettings.tsx

@@ -6,6 +6,9 @@ import { signOut, useSession } from "next-auth/react";
 import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
 import SubmitButton from "../../SubmitButton";
 import { toast } from "react-hot-toast";
+import Link from "next/link";
+import ClickAwayHandler from "@/components/ClickAwayHandler";
+import useInitialData from "@/hooks/useInitialData";
 
 type Props = {
   toggleSettingsModal: Function;
@@ -21,6 +24,7 @@ export default function PrivacySettings({
   const { update, data } = useSession();
   const { account, updateAccount } = useAccountStore();
 
+  const [importDropdown, setImportDropdown] = useState(false);
   const [submitLoader, setSubmitLoader] = useState(false);
 
   const [whitelistedUsersTextbox, setWhiteListedUsersTextbox] = useState(
@@ -46,6 +50,38 @@ export default function PrivacySettings({
     return wordsArray;
   };
 
+  const postJSONFile = async (e: any) => {
+    const file: File = e.target.files[0];
+
+    if (file) {
+      var reader = new FileReader();
+      reader.readAsText(file, "UTF-8");
+      reader.onload = async function (e) {
+        const load = toast.loading("Importing...");
+
+        const response = await fetch("/api/data", {
+          method: "POST",
+          body: e.target?.result,
+        });
+
+        const data = await response.json();
+
+        toast.dismiss(load);
+
+        toast.success("Imported the Bookmarks! Reloading the page...");
+
+        setImportDropdown(false);
+
+        setTimeout(() => {
+          location.reload();
+        }, 2000);
+      };
+      reader.onerror = function (e) {
+        console.log("Error:", e);
+      };
+    }
+  };
+
   const submit = async () => {
     setSubmitLoader(true);
 
@@ -115,6 +151,58 @@ export default function PrivacySettings({
         )}
       </div>
 
+      <div className="mt-5">
+        <p className="text-sm text-sky-700 mb-2">Import/Export Data</p>
+
+        <div className="flex gap-2">
+          <div
+            onClick={() => setImportDropdown(true)}
+            className="w-fit relative"
+            id="import-dropdown"
+          >
+            <div
+              id="import-dropdown"
+              className="border border-slate-200 rounded-md bg-white px-2 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-700"
+            >
+              Import From
+            </div>
+            {importDropdown ? (
+              <ClickAwayHandler
+                onClickOutside={(e: Event) => {
+                  const target = e.target as HTMLInputElement;
+                  if (target.id !== "import-dropdown") setImportDropdown(false);
+                }}
+                className={`absolute top-7 left-0 w-36 py-1 shadow-md border border-sky-100 bg-gray-50 rounded-md flex flex-col z-20`}
+              >
+                <div className="cursor-pointer rounded-md">
+                  <label
+                    htmlFor="import-file"
+                    title="JSON"
+                    className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 duration-100 cursor-pointer"
+                  >
+                    Linkwarden
+                    <input
+                      type="file"
+                      name="photo"
+                      id="import-file"
+                      accept=".json"
+                      className="hidden"
+                      onChange={postJSONFile}
+                    />
+                  </label>
+                </div>
+              </ClickAwayHandler>
+            ) : null}
+          </div>
+
+          <Link className="w-fit" href="/api/data">
+            <div className="border border-slate-200 rounded-md bg-white px-2 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-700">
+              Export Data
+            </div>
+          </Link>
+        </div>
+      </div>
+
       <SubmitButton
         onClick={submit}
         loading={submitLoader}