merged the appearance and archive page into preference

components/SettingsSidebar.tsx

@@ -37,30 +37,17 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           </div>
         </Link>
 
-        <Link href="/settings/appearance">
+        <Link href="/settings/preference">
           <div
             className={`${
-              active === `/settings/appearance`
+              active === `/settings/preference`
                 ? "bg-primary/20"
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <i className="bi-palette text-primary text-2xl"></i>
+            <i className="bi-sliders text-primary text-2xl"></i>
 
-            <p className="truncate w-full pr-7">Appearance</p>
+            <p className="truncate w-full pr-7">Preference</p>
-          </div>
-        </Link>
-
-        <Link href="/settings/archive">
-          <div
-            className={`${
-              active === `/settings/archive`
-                ? "bg-primary/20"
-                : "hover:bg-neutral/20"
-            } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
-          >
-            <i className="bi-archive text-primary text-2xl"></i>
-            <p className="truncate w-full pr-7">Archive</p>
           </div>
         </Link>
 

pages/settings/archive.tsx

@@ -1,93 +0,0 @@
-import Checkbox from "@/components/Checkbox";
-import SubmitButton from "@/components/SubmitButton";
-import SettingsLayout from "@/layouts/SettingsLayout";
-import React, { useEffect, useState } from "react";
-import useAccountStore from "@/store/account";
-import { toast } from "react-hot-toast";
-import { AccountSettings } from "@/types/global";
-
-export default function Archive() {
-  const [submitLoader, setSubmitLoader] = useState(false);
-  const { account, updateAccount } = useAccountStore();
-  const [user, setUser] = useState<AccountSettings>(account);
-
-  const [archiveAsScreenshot, setArchiveAsScreenshot] =
-    useState<boolean>(false);
-  const [archiveAsPDF, setArchiveAsPDF] = useState<boolean>(false);
-  const [archiveAsWaybackMachine, setArchiveAsWaybackMachine] =
-    useState<boolean>(false);
-
-  useEffect(() => {
-    setUser({
-      ...account,
-      archiveAsScreenshot,
-      archiveAsPDF,
-      archiveAsWaybackMachine,
-    });
-  }, [account, archiveAsScreenshot, archiveAsPDF, archiveAsWaybackMachine]);
-
-  function objectIsEmpty(obj: object) {
-    return Object.keys(obj).length === 0;
-  }
-
-  useEffect(() => {
-    if (!objectIsEmpty(account)) {
-      setArchiveAsScreenshot(account.archiveAsScreenshot);
-      setArchiveAsPDF(account.archiveAsPDF);
-      setArchiveAsWaybackMachine(account.archiveAsWaybackMachine);
-    }
-  }, [account]);
-
-  const submit = async () => {
-    setSubmitLoader(true);
-
-    const load = toast.loading("Applying...");
-
-    const response = await updateAccount({
-      ...user,
-    });
-
-    toast.dismiss(load);
-
-    if (response.ok) {
-      toast.success("Settings Applied!");
-    } else toast.error(response.data as string);
-    setSubmitLoader(false);
-  };
-
-  return (
-    <SettingsLayout>
-      <p className="capitalize text-3xl font-thin inline">Archive Settings</p>
-
-      <div className="divider my-3"></div>
-
-      <p>Formats to Archive/Preserve webpages:</p>
-      <div className="p-3">
-        <Checkbox
-          label="Screenshot"
-          state={archiveAsScreenshot}
-          onClick={() => setArchiveAsScreenshot(!archiveAsScreenshot)}
-        />
-
-        <Checkbox
-          label="PDF"
-          state={archiveAsPDF}
-          onClick={() => setArchiveAsPDF(!archiveAsPDF)}
-        />
-
-        <Checkbox
-          label="Archive.org Snapshot"
-          state={archiveAsWaybackMachine}
-          onClick={() => setArchiveAsWaybackMachine(!archiveAsWaybackMachine)}
-        />
-      </div>
-
-      <SubmitButton
-        onClick={submit}
-        loading={submitLoader}
-        label="Save Changes"
-        className="mt-2 w-full sm:w-fit"
-      />
-    </SettingsLayout>
-  );
-}

pages/settings/preference.tsx

@@ -5,9 +5,43 @@ import { AccountSettings } from "@/types/global";
 import { toast } from "react-hot-toast";
 import React from "react";
 import useLocalSettingsStore from "@/store/localSettings";
+import Checkbox from "@/components/Checkbox";
+import SubmitButton from "@/components/SubmitButton";
 
 export default function Appearance() {
   const { updateSettings } = useLocalSettingsStore();
+
+  const [submitLoader, setSubmitLoader] = useState(false);
+  const { account, updateAccount } = useAccountStore();
+  const [user, setUser] = useState<AccountSettings>(account);
+
+  const [archiveAsScreenshot, setArchiveAsScreenshot] =
+    useState<boolean>(false);
+  const [archiveAsPDF, setArchiveAsPDF] = useState<boolean>(false);
+  const [archiveAsWaybackMachine, setArchiveAsWaybackMachine] =
+    useState<boolean>(false);
+
+  useEffect(() => {
+    setUser({
+      ...account,
+      archiveAsScreenshot,
+      archiveAsPDF,
+      archiveAsWaybackMachine,
+    });
+  }, [account, archiveAsScreenshot, archiveAsPDF, archiveAsWaybackMachine]);
+
+  function objectIsEmpty(obj: object) {
+    return Object.keys(obj).length === 0;
+  }
+
+  useEffect(() => {
+    if (!objectIsEmpty(account)) {
+      setArchiveAsScreenshot(account.archiveAsScreenshot);
+      setArchiveAsPDF(account.archiveAsPDF);
+      setArchiveAsWaybackMachine(account.archiveAsWaybackMachine);
+    }
+  }, [account]);
+
   const submit = async () => {
     setSubmitLoader(true);
 
@@ -25,40 +59,9 @@ export default function Appearance() {
     setSubmitLoader(false);
   };
 
-  const [submitLoader, setSubmitLoader] = useState(false);
-
-  const { account, updateAccount } = useAccountStore();
-
-  const [user, setUser] = useState<AccountSettings>(
-    !objectIsEmpty(account)
-      ? account
-      : ({
-          // @ts-ignore
-          id: null,
-          name: "",
-          username: "",
-          email: "",
-          emailVerified: null,
-          blurredFavicons: null,
-          image: "",
-          isPrivate: true,
-          // @ts-ignore
-          createdAt: null,
-          whitelistedUsers: [],
-        } as unknown as AccountSettings)
-  );
-
-  function objectIsEmpty(obj: object) {
-    return Object.keys(obj).length === 0;
-  }
-
-  useEffect(() => {
-    if (!objectIsEmpty(account)) setUser({ ...account });
-  }, [account]);
-
   return (
     <SettingsLayout>
-      <p className="capitalize text-3xl font-thin inline">Appearance</p>
+      <p className="capitalize text-3xl font-thin inline">Preference</p>
 
       <div className="divider my-3"></div>
 
@@ -94,12 +97,51 @@ export default function Appearance() {
           </div>
         </div>
 
-        {/* <SubmitButton
+        <div>
+          <p className="capitalize text-3xl font-thin inline">
+            Archive Settings
+          </p>
+
+          <div className="divider my-3"></div>
+
+          <p>Formats to Archive/Preserve webpages:</p>
+          <div className="p-3">
+            <Checkbox
+              label="Screenshot"
+              state={archiveAsScreenshot}
+              onClick={() => setArchiveAsScreenshot(!archiveAsScreenshot)}
+            />
+
+            <Checkbox
+              label="PDF"
+              state={archiveAsPDF}
+              onClick={() => setArchiveAsPDF(!archiveAsPDF)}
+            />
+
+            <Checkbox
+              label="Archive.org Snapshot"
+              state={archiveAsWaybackMachine}
+              onClick={() =>
+                setArchiveAsWaybackMachine(!archiveAsWaybackMachine)
+              }
+            />
+          </div>
+        </div>
+
+        <div>
+          <p className="capitalize text-3xl font-thin inline">Link Settings</p>
+
+          <div className="divider my-3"></div>
+
+          <p>Clicking on Links should:</p>
+        </div>
+
+        <SubmitButton
           onClick={submit}
           loading={submitLoader}
           label="Save Changes"
-          className="mt-2 mx-auto lg:mx-0"
+          className="mt-2 w-full sm:w-fit"
-        /> */}
+        />
       </div>
     </SettingsLayout>
   );