added internationalization to pages [WIP]

pages/settings/access-tokens.tsx

@@ -4,11 +4,14 @@ import NewTokenModal from "@/components/ModalContent/NewTokenModal";
 import RevokeTokenModal from "@/components/ModalContent/RevokeTokenModal";
 import { AccessToken } from "@prisma/client";
 import useTokenStore from "@/store/tokens";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";
 
 export default function AccessTokens() {
   const [newTokenModal, setNewTokenModal] = useState(false);
   const [revokeTokenModal, setRevokeTokenModal] = useState(false);
   const [selectedToken, setSelectedToken] = useState<AccessToken | null>(null);
+  const { t } = useTranslation();
 
   const openRevokeModal = (token: AccessToken) => {
     setSelectedToken(token);
@@ -27,15 +30,14 @@ export default function AccessTokens() {
 
   return (
     <SettingsLayout>
-      <p className="capitalize text-3xl font-thin inline">Access Tokens</p>
+      <p className="capitalize text-3xl font-thin inline">
+        {t("access_tokens")}
+      </p>
 
       <div className="divider my-3"></div>
 
       <div className="flex flex-col gap-3">
-        <p>
-          Access Tokens can be used to access Linkwarden from other apps and
-          services without giving away your Username and Password.
-        </p>
+        <p>{t("access_tokens_description")}</p>
 
         <button
           className={`btn ml-auto btn-accent dark:border-violet-400 text-white tracking-wider w-fit flex items-center gap-2`}
@@ -43,7 +45,7 @@ export default function AccessTokens() {
             setNewTokenModal(true);
           }}
         >
-          New Access Token
+          {t("new_token")}
         </button>
 
         {tokens.length > 0 ? (
@@ -51,13 +53,12 @@ export default function AccessTokens() {
             <div className="divider my-0"></div>
 
             <table className="table">
-              {/* head */}
               <thead>
                 <tr>
                   <th></th>
-                  <th>Name</th>
-                  <th>Created</th>
-                  <th>Expires</th>
+                  <th>{t("name")}</th>
+                  <th>{t("created")}</th>
+                  <th>{t("expires")}</th>
                   <th></th>
                 </tr>
               </thead>
@@ -105,3 +106,5 @@ export default function AccessTokens() {
     </SettingsLayout>
   );
 }
+
+export { getServerSideProps };

pages/settings/account.tsx

@@ -15,17 +15,16 @@ import { dropdownTriggerer } from "@/lib/client/utils";
 import EmailChangeVerificationModal from "@/components/ModalContent/EmailChangeVerificationModal";
 import Button from "@/components/ui/Button";
 import { i18n } from "next-i18next.config";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";
 
 const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
 
 export default function Account() {
   const [emailChangeVerificationModal, setEmailChangeVerificationModal] =
     useState(false);
-
   const [submitLoader, setSubmitLoader] = useState(false);
-
   const { account, updateAccount } = useAccountStore();
-
   const [user, setUser] = useState<AccountSettings>(
     !objectIsEmpty(account)
       ? account
@@ -45,6 +44,8 @@ export default function Account() {
         } as unknown as AccountSettings)
   );
 
+  const { t } = useTranslation();
+
   function objectIsEmpty(obj: object) {
     return Object.keys(obj).length === 0;
   }
@@ -68,17 +69,16 @@ export default function Account() {
         };
         reader.readAsDataURL(resizedFile);
       } else {
-        toast.error("Please select a PNG or JPEG file thats less than 1MB.");
+        toast.error(t("image_upload_size_error"));
       }
     } else {
-      toast.error("Invalid file format.");
+      toast.error(t("image_upload_format_error"));
     }
   };
 
   const submit = async (password?: string) => {
     setSubmitLoader(true);
-
-    const load = toast.loading("Applying...");
+    const load = toast.loading(t("applying_settings"));
 
     const response = await updateAccount({
       ...user,
@@ -91,56 +91,44 @@ export default function Account() {
     if (response.ok) {
       const emailChanged = account.email !== user.email;
 
+      toast.success(t("settings_applied"));
       if (emailChanged) {
-        toast.success("Settings Applied!");
-        toast.success(
-          "Email change request sent. Please verify the new email address."
-        );
+        toast.success(t("email_change_request"));
         setEmailChangeVerificationModal(false);
-      } else toast.success("Settings Applied!");
+      }
     } else toast.error(response.data as string);
     setSubmitLoader(false);
   };
 
   const importBookmarks = async (e: any, format: MigrationFormat) => {
     setSubmitLoader(true);
-
     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 load = toast.loading(t("importing_bookmarks"));
         const request: string = e.target?.result as string;
-
-        const body: MigrationRequest = {
-          format,
-          data: request,
-        };
-
+        const body: MigrationRequest = { format, data: request };
         const response = await fetch("/api/v1/migration", {
           method: "POST",
           body: JSON.stringify(body),
         });
-
         const data = await response.json();
-
         toast.dismiss(load);
-
         if (response.ok) {
-          toast.success("Imported the Bookmarks! Reloading the page...");
+          toast.success(t("import_success"));
           setTimeout(() => {
             location.reload();
           }, 2000);
-        } else toast.error(data.response as string);
+        } else {
+          toast.error(data.response as string);
+        }
       };
       reader.onerror = function (e) {
         console.log("Error:", e);
       };
     }
-
     setSubmitLoader(false);
   };
 
@@ -158,16 +146,14 @@ export default function Account() {
   }, [whitelistedUsersTextbox]);
 
   const stringToArray = (str: string) => {
-    const stringWithoutSpaces = str?.replace(/\s+/g, "");
-
-    const wordsArray = stringWithoutSpaces?.split(",");
-
-    return wordsArray;
+    return str?.replace(/\s+/g, "").split(",");
   };
 
   return (
     <SettingsLayout>
-      <p className="capitalize text-3xl font-thin inline">Account Settings</p>
+      <p className="capitalize text-3xl font-thin inline">
+        {t("accountSettings")}
+      </p>
 
       <div className="divider my-3"></div>
 
@@ -175,7 +161,7 @@ export default function Account() {
         <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
           <div className="flex flex-col gap-3">
             <div>
-              <p className="mb-2">Display Name</p>
+              <p className="mb-2">{t("display_name")}</p>
               <TextInput
                 value={user.name || ""}
                 className="bg-base-200"
@@ -183,17 +169,16 @@ export default function Account() {
               />
             </div>
             <div>
-              <p className="mb-2">Username</p>
+              <p className="mb-2">{t("username")}</p>
               <TextInput
                 value={user.username || ""}
                 className="bg-base-200"
                 onChange={(e) => setUser({ ...user, username: e.target.value })}
               />
             </div>
-
             {emailEnabled ? (
               <div>
-                <p className="mb-2">Email</p>
+                <p className="mb-2">{t("email")}</p>
                 <TextInput
                   value={user.email || ""}
                   className="bg-base-200"
@@ -201,9 +186,8 @@ export default function Account() {
                 />
               </div>
             ) : undefined}
-
             <div>
-              <p className="mb-2">Language</p>
+              <p className="mb-2">{t("language")}</p>
               <select
                 onChange={(e) => {
                   setUser({ ...user, locale: e.target.value });
@@ -221,12 +205,13 @@ export default function Account() {
                     ) || ""}
                   </option>
                 ))}
+                <option disabled>{t("more_coming_soon")}</option>
               </select>
             </div>
           </div>
 
           <div className="sm:row-span-2 sm:justify-self-center my-3">
-            <p className="mb-2 sm:text-center">Profile Photo</p>
+            <p className="mb-2 sm:text-center">{t("profile_photo")}</p>
             <div className="w-28 h-28 flex gap-3 sm:flex-col items-center">
               <ProfilePhoto
                 priority={true}
@@ -244,12 +229,12 @@ export default function Account() {
                   className="text-sm"
                 >
                   <i className="bi-pencil-square text-md duration-100"></i>
-                  Edit
+                  {t("edit")}
                 </Button>
                 <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
                   <li>
                     <label tabIndex={0} role="button">
-                      Upload a new photo...
+                      {t("upload_new_photo")}
                       <input
                         type="file"
                         name="photo"
@@ -272,7 +257,7 @@ export default function Account() {
                           })
                         }
                       >
-                        Remove Photo
+                        {t("remove_photo")}
                       </div>
                     </li>
                   )}
@@ -284,25 +269,22 @@ export default function Account() {
 
         <div className="sm:-mt-3">
           <Checkbox
-            label="Make profile private"
+            label={t("make_profile_private")}
             state={user.isPrivate}
             onClick={() => setUser({ ...user, isPrivate: !user.isPrivate })}
           />
 
-          <p className="text-neutral text-sm">
-            This will limit who can find and add you to new Collections.
-          </p>
+          <p className="text-neutral text-sm">{t("profile_privacy_info")}</p>
 
           {user.isPrivate && (
             <div className="pl-5">
-              <p className="mt-2">Whitelisted Users</p>
+              <p className="mt-2">{t("whitelisted_users")}</p>
               <p className="text-neutral text-sm mb-3">
-                Please provide the Username of the users you wish to grant
-                visibility to your profile. Separated by comma.
+                {t("whitelisted_users_info")}
               </p>
               <textarea
                 className="w-full resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
-                placeholder="Your profile is hidden from everyone right now..."
+                placeholder={t("whitelisted_users_placeholder")}
                 value={whitelistedUsersTextbox}
                 onChange={(e) => setWhiteListedUsersTextbox(e.target.value)}
               />
@@ -319,14 +301,14 @@ export default function Account() {
             }
           }}
           loading={submitLoader}
-          label="Save Changes"
+          label={t("save_changes")}
           className="mt-2 w-full sm:w-fit"
         />
 
         <div>
           <div className="flex items-center gap-2 w-full rounded-md h-8">
             <p className="truncate w-full pr-7 text-3xl font-thin">
-              Import & Export
+              {t("import_export")}
             </p>
           </div>
 
@@ -334,7 +316,7 @@ export default function Account() {
 
           <div className="flex gap-3 flex-col">
             <div>
-              <p className="mb-2">Import your data from other platforms.</p>
+              <p className="mb-2">{t("import_data")}</p>
               <div className="dropdown dropdown-bottom">
                 <Button
                   tabIndex={0}
@@ -345,7 +327,7 @@ export default function Account() {
                   id="import-dropdown"
                 >
                   <i className="bi-cloud-upload text-xl duration-100"></i>
-                  Import From
+                  {t("import_links")}
                 </Button>
 
                 <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
@@ -354,9 +336,9 @@ export default function Account() {
                       tabIndex={0}
                       role="button"
                       htmlFor="import-linkwarden-file"
-                      title="JSON File"
+                      title={t("from_linkwarden")}
                     >
-                      From Linkwarden
+                      {t("from_linkwarden")}
                       <input
                         type="file"
                         name="photo"
@@ -374,9 +356,9 @@ export default function Account() {
                       tabIndex={0}
                       role="button"
                       htmlFor="import-html-file"
-                      title="HTML File"
+                      title={t("from_html")}
                     >
-                      From Bookmarks HTML file
+                      {t("from_html")}
                       <input
                         type="file"
                         name="photo"
@@ -394,9 +376,9 @@ export default function Account() {
                       tabIndex={0}
                       role="button"
                       htmlFor="import-wallabag-file"
-                      title="Wallabag File"
+                      title={t("from_wallabag")}
                     >
-                      From Wallabag (JSON file)
+                      {t("from_wallabag")}
                       <input
                         type="file"
                         name="photo"
@@ -414,11 +396,11 @@ export default function Account() {
             </div>
 
             <div>
-              <p className="mb-2">Download your data instantly.</p>
+              <p className="mb-2">{t("download_data")}</p>
               <Link className="w-fit" href="/api/v1/migration">
                 <div className="select-none relative duration-200 rounded-lg text-sm text-center w-fit flex justify-center items-center gap-2 disabled:pointer-events-none disabled:opacity-50 bg-neutral-content text-secondary-foreground hover:bg-neutral-content/80 border border-neutral/30 h-10 px-4 py-2">
                   <i className="bi-cloud-download text-xl duration-100"></i>
-                  <p>Export Data</p>
+                  <p>{t("export_data")}</p>
                 </div>
               </Link>
             </div>
@@ -428,23 +410,22 @@ export default function Account() {
         <div>
           <div className="flex items-center gap-2 w-full rounded-md h-8">
             <p className="text-red-500 dark:text-red-500 truncate w-full pr-7 text-3xl font-thin">
-              Delete Account
+              {t("delete_account")}
             </p>
           </div>
 
           <div className="divider my-3"></div>
 
           <p>
-            This will permanently delete ALL the Links, Collections, Tags, and
-            archived data you own.{" "}
+            {t("delete_account_warning")}
             {process.env.NEXT_PUBLIC_STRIPE
-              ? "It will also cancel your subscription. "
+              ? " " + t("cancel_subscription_notice")
               : undefined}
           </p>
         </div>
 
         <Link href="/settings/delete" className="underline">
-          Account deletion page
+          {t("account_deletion_page")}
         </Link>
       </div>
 
@@ -459,3 +440,5 @@ export default function Account() {
     </SettingsLayout>
   );
 }
+
+export { getServerSideProps };

pages/settings/billing.tsx

@@ -1,9 +1,12 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";
 
 export default function Billing() {
   const router = useRouter();
+  const { t } = useTranslation();
 
   useEffect(() => {
     if (!process.env.NEXT_PUBLIC_STRIPE) router.push("/settings/profile");
@@ -11,26 +14,27 @@ export default function Billing() {
 
   return (
     <SettingsLayout>
-      <p className="capitalize text-3xl font-thin inline">Billing Settings</p>
+      <p className="capitalize text-3xl font-thin inline">
+        {t("billing_settings")}
+      </p>
 
       <div className="divider my-3"></div>
 
       <div className="w-full mx-auto flex flex-col gap-3 justify-between">
         <p className="text-md">
-          To manage/cancel your subscription, visit the{" "}
+          {t("manage_subscription_intro")}{" "}
           <a
             href={process.env.NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL}
             className="underline"
             target="_blank"
           >
-            Billing Portal
+            {t("billing_portal")}
           </a>
           .
         </p>
 
         <p className="text-md">
-          If you still need help or encountered any issues, feel free to reach
-          out to us at:{" "}
+          {t("help_contact_intro")}{" "}
           <a className="font-semibold" href="mailto:support@linkwarden.app">
             support@linkwarden.app
           </a>
@@ -39,3 +43,5 @@ export default function Billing() {
     </SettingsLayout>
   );
 }
+
+export { getServerSideProps };

pages/settings/delete.tsx

@@ -5,18 +5,16 @@ import CenteredForm from "@/layouts/CenteredForm";
 import { signOut, useSession } from "next-auth/react";
 import Link from "next/link";
 import Button from "@/components/ui/Button";
-
-const keycloakEnabled = process.env.NEXT_PUBLIC_KEYCLOAK_ENABLED === "true";
-const authentikEnabled = process.env.NEXT_PUBLIC_AUTHENTIK_ENABLED === "true";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";
 
 export default function Delete() {
   const [password, setPassword] = useState("");
   const [comment, setComment] = useState<string>();
   const [feedback, setFeedback] = useState<string>();
-
   const [submitLoader, setSubmitLoader] = useState(false);
-
   const { data } = useSession();
+  const { t } = useTranslation();
 
   const submit = async () => {
     const body = {
@@ -27,13 +25,12 @@ export default function Delete() {
       },
     };
 
-    if (!keycloakEnabled && !authentikEnabled && password == "") {
-      return toast.error("Please fill the required fields.");
+    if (password === "") {
+      return toast.error(t("fill_required_fields"));
     }
 
     setSubmitLoader(true);
-
-    const load = toast.loading("Deleting everything, please wait...");
+    const load = toast.loading(t("deleting_message"));
 
     const response = await fetch(`/api/v1/users/${data?.user.id}`, {
       method: "DELETE",
@@ -49,7 +46,9 @@ export default function Delete() {
 
     if (response.ok) {
       signOut();
-    } else toast.error(message);
+    } else {
+      toast.error(message);
+    }
 
     setSubmitLoader(false);
   };
@@ -61,75 +60,65 @@ export default function Delete() {
           href="/settings/account"
           className="absolute top-4 left-4 btn btn-ghost btn-square btn-sm"
         >
-          <i className="bi-chevron-left  text-neutral text-xl"></i>
+          <i className="bi-chevron-left text-neutral text-xl"></i>
         </Link>
         <div className="flex items-center gap-2 w-full rounded-md h-8">
           <p className="text-red-500 dark:text-red-500 truncate w-full text-3xl text-center">
-            Delete Account
+            {t("delete_account")}
           </p>
         </div>
 
         <div className="divider my-0"></div>
 
-        <p>
-          This will permanently delete all the Links, Collections, Tags, and
-          archived data you own. It will also log you out
-          {process.env.NEXT_PUBLIC_STRIPE
-            ? " and cancel your subscription"
-            : undefined}
-          . This action is irreversible!
-        </p>
+        <p>{t("delete_warning")}</p>
 
-        {process.env.NEXT_PUBLIC_KEYCLOAK_ENABLED !== "true" ? (
-          <div>
-            <p className="mb-2">Confirm Your Password</p>
-
-            <TextInput
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="••••••••••••••"
-              className="bg-base-100"
-              type="password"
-            />
-          </div>
-        ) : undefined}
+        <div>
+          <p className="mb-2">{t("confirm_password")}</p>
+          <TextInput
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            placeholder="••••••••••••••"
+            className="bg-base-100"
+            type="password"
+          />
+        </div>
 
         {process.env.NEXT_PUBLIC_STRIPE ? (
           <fieldset className="border rounded-md p-2 border-primary">
             <legend className="px-3 py-1 text-sm sm:text-base border rounded-md border-primary">
-              <b>Optional</b>{" "}
-              <i className="min-[390px]:text-sm text-xs">
-                (but it really helps us improve!)
-              </i>
+              <b>{t("optional")}</b> <i>{t("feedback_help")}</i>
             </legend>
             <label className="w-full flex min-[430px]:items-center items-start gap-2 mb-3 min-[430px]:flex-row flex-col">
-              <p className="text-sm">Reason for cancellation:</p>
+              <p className="text-sm">{t("reason_for_cancellation")}:</p>
               <select
                 className="rounded-md p-1 outline-none"
                 value={feedback}
                 onChange={(e) => setFeedback(e.target.value)}
               >
-                <option value={undefined}>Please specify</option>
-                <option value="customer_service">Customer Service</option>
-                <option value="low_quality">Low Quality</option>
-                <option value="missing_features">Missing Features</option>
-                <option value="switched_service">Switched Service</option>
-                <option value="too_complex">Too Complex</option>
-                <option value="too_expensive">Too Expensive</option>
-                <option value="unused">Unused</option>
-                <option value="other">Other</option>
+                <option value={undefined}>{t("please_specify")}</option>
+                <option value="customer_service">
+                  {t("customer_service")}
+                </option>
+                <option value="low_quality">{t("low_quality")}</option>
+                <option value="missing_features">
+                  {t("missing_features")}
+                </option>
+                <option value="switched_service">
+                  {t("switched_service")}
+                </option>
+                <option value="too_complex">{t("too_complex")}</option>
+                <option value="too_expensive">{t("too_expensive")}</option>
+                <option value="unused">{t("unused")}</option>
+                <option value="other">{t("other")}</option>
               </select>
             </label>
             <div>
-              <p className="text-sm mb-2">
-                More information (the more details, the more helpful it&apos;d
-                be)
-              </p>
+              <p className="text-sm mb-2">{t("more_information")}</p>
 
               <textarea
                 value={comment}
                 onChange={(e) => setComment(e.target.value)}
-                placeholder="e.g. I needed a feature that..."
+                placeholder={t("feedback_placeholder")}
                 className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-100 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
               />
             </div>
@@ -142,9 +131,11 @@ export default function Delete() {
           loading={submitLoader}
           onClick={submit}
         >
-          <p className="text-center w-full">Delete Your Account</p>
+          <p className="text-center w-full">{t("delete_your_account")}</p>
         </Button>
       </div>
     </CenteredForm>
   );
 }
+
+export { getServerSideProps };

pages/settings/password.tsx

@@ -4,25 +4,26 @@ import useAccountStore from "@/store/account";
 import SubmitButton from "@/components/SubmitButton";
 import { toast } from "react-hot-toast";
 import TextInput from "@/components/TextInput";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps";
 
 export default function Password() {
+  const { t } = useTranslation();
+
   const [oldPassword, setOldPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
-
   const [submitLoader, setSubmitLoader] = useState(false);
-
   const { account, updateAccount } = useAccountStore();
 
   const submit = async () => {
-    if (newPassword == "" || oldPassword == "") {
-      return toast.error("Please fill all the fields.");
+    if (newPassword === "" || oldPassword === "") {
+      return toast.error(t("fill_all_fields"));
     }
-    if (newPassword.length < 8)
-      return toast.error("Passwords must be at least 8 characters.");
+    if (newPassword.length < 8) return toast.error(t("password_length_error"));
 
     setSubmitLoader(true);
 
-    const load = toast.loading("Applying...");
+    const load = toast.loading(t("applying_changes"));
 
     const response = await updateAccount({
       ...account,
@@ -33,26 +34,27 @@ export default function Password() {
     toast.dismiss(load);
 
     if (response.ok) {
-      toast.success("Settings Applied!");
+      toast.success(t("settings_applied"));
       setNewPassword("");
       setOldPassword("");
-    } else toast.error(response.data as string);
+    } else {
+      toast.error(response.data as string);
+    }
 
     setSubmitLoader(false);
   };
 
   return (
     <SettingsLayout>
-      <p className="capitalize text-3xl font-thin inline">Change Password</p>
+      <p className="capitalize text-3xl font-thin inline">
+        {t("change_password")}
+      </p>
 
       <div className="divider my-3"></div>
 
-      <p className="mb-3">
-        To change your password, please fill out the following. Your password
-        should be at least 8 characters.
-      </p>
+      <p className="mb-3">{t("password_change_instructions")}</p>
       <div className="w-full flex flex-col gap-2 justify-between">
-        <p>Old Password</p>
+        <p>{t("old_password")}</p>
 
         <TextInput
           value={oldPassword}
@@ -62,7 +64,7 @@ export default function Password() {
           type="password"
         />
 
-        <p className="mt-3">New Password</p>
+        <p className="mt-3">{t("new_password")}</p>
 
         <TextInput
           value={newPassword}
@@ -75,10 +77,12 @@ export default function Password() {
         <SubmitButton
           onClick={submit}
           loading={submitLoader}
-          label="Save Changes"
+          label={t("save_changes")}
           className="mt-3 w-full sm:w-fit"
         />
       </div>
     </SettingsLayout>
   );
 }
+
+export { getServerSideProps };

pages/settings/preference.tsx

@@ -1,31 +1,33 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
 import { useState, useEffect } from "react";
 import useAccountStore from "@/store/account";
-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";
+import { toast } from "react-hot-toast";
+import Checkbox from "@/components/Checkbox";
+import useLocalSettingsStore from "@/store/localSettings";
+import { useTranslation } from "next-i18next";
+import getServerSideProps from "@/lib/client/getServerSideProps"; // Import getServerSideProps for server-side data fetching
 import { LinksRouteTo } from "@prisma/client";
 
 export default function Appearance() {
+  const { t } = useTranslation();
   const { updateSettings } = useLocalSettingsStore();
-
   const [submitLoader, setSubmitLoader] = useState(false);
   const { account, updateAccount } = useAccountStore();
-  const [user, setUser] = useState<AccountSettings>(account);
+  const [user, setUser] = useState(account);
 
-  const [preventDuplicateLinks, setPreventDuplicateLinks] =
-    useState<boolean>(false);
-  const [archiveAsScreenshot, setArchiveAsScreenshot] =
-    useState<boolean>(false);
-  const [archiveAsPDF, setArchiveAsPDF] = useState<boolean>(false);
-  const [archiveAsWaybackMachine, setArchiveAsWaybackMachine] =
-    useState<boolean>(false);
-  const [linksRouteTo, setLinksRouteTo] = useState<LinksRouteTo>(
-    user.linksRouteTo
+  const [preventDuplicateLinks, setPreventDuplicateLinks] = useState<boolean>(
+    account.preventDuplicateLinks
   );
+  const [archiveAsScreenshot, setArchiveAsScreenshot] = useState<boolean>(
+    account.archiveAsScreenshot
+  );
+  const [archiveAsPDF, setArchiveAsPDF] = useState<boolean>(
+    account.archiveAsPDF
+  );
+  const [archiveAsWaybackMachine, setArchiveAsWaybackMachine] =
+    useState<boolean>(account.archiveAsWaybackMachine);
+  const [linksRouteTo, setLinksRouteTo] = useState(account.linksRouteTo);
 
   useEffect(() => {
     setUser({
@@ -62,29 +64,29 @@ export default function Appearance() {
   const submit = async () => {
     setSubmitLoader(true);
 
-    const load = toast.loading("Applying...");
+    const load = toast.loading(t("applying_changes"));
 
-    const response = await updateAccount({
-      ...user,
-    });
+    const response = await updateAccount({ ...user });
 
     toast.dismiss(load);
 
     if (response.ok) {
-      toast.success("Settings Applied!");
-    } else toast.error(response.data as string);
+      toast.success(t("settings_applied"));
+    } else {
+      toast.error(response.data as string);
+    }
     setSubmitLoader(false);
   };
 
   return (
     <SettingsLayout>
-      <p className="capitalize text-3xl font-thin inline">Preference</p>
+      <p className="capitalize text-3xl font-thin inline">{t("preference")}</p>
 
       <div className="divider my-3"></div>
 
       <div className="flex flex-col gap-5">
         <div>
-          <p className="mb-3">Select Theme</p>
+          <p className="mb-3">{t("select_theme")}</p>
           <div className="flex gap-3 w-full">
             <div
               className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
@@ -95,9 +97,7 @@ export default function Appearance() {
               onClick={() => updateSettings({ theme: "dark" })}
             >
               <i className="bi-moon-fill text-6xl"></i>
-              <p className="ml-2 text-2xl">Dark</p>
-
-              {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
+              <p className="ml-2 text-2xl">{t("dark")}</p>
             </div>
             <div
               className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
@@ -108,35 +108,30 @@ export default function Appearance() {
               onClick={() => updateSettings({ theme: "light" })}
             >
               <i className="bi-sun-fill text-6xl"></i>
-              <p className="ml-2 text-2xl">Light</p>
-              {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
+              <p className="ml-2 text-2xl">{t("light")}</p>
             </div>
           </div>
         </div>
 
         <div>
           <p className="capitalize text-3xl font-thin inline">
-            Archive Settings
+            {t("archive_settings")}
           </p>
-
           <div className="divider my-3"></div>
-
-          <p>Formats to Archive/Preserve webpages:</p>
+          <p>{t("formats_to_archive")}</p>
           <div className="p-3">
             <Checkbox
-              label="Screenshot"
+              label={t("screenshot")}
               state={archiveAsScreenshot}
               onClick={() => setArchiveAsScreenshot(!archiveAsScreenshot)}
             />
-
             <Checkbox
-              label="PDF"
+              label={t("pdf")}
               state={archiveAsPDF}
               onClick={() => setArchiveAsPDF(!archiveAsPDF)}
             />
-
             <Checkbox
-              label="Archive.org Snapshot"
+              label={t("archive_org_snapshot")}
               state={archiveAsWaybackMachine}
               onClick={() =>
                 setArchiveAsWaybackMachine(!archiveAsWaybackMachine)
@@ -146,18 +141,18 @@ export default function Appearance() {
         </div>
 
         <div>
-          <p className="capitalize text-3xl font-thin inline">Link Settings</p>
-
+          <p className="capitalize text-3xl font-thin inline">
+            {t("link_settings")}
+          </p>
           <div className="divider my-3"></div>
           <div className="mb-3">
             <Checkbox
-              label="Prevent duplicate links"
+              label={t("prevent_duplicate_links")}
               state={preventDuplicateLinks}
               onClick={() => setPreventDuplicateLinks(!preventDuplicateLinks)}
             />
           </div>
-
-          <p>Clicking on Links should:</p>
+          <p>{t("clicking_on_links_should")}</p>
           <div className="p-3">
             <label
               className="label cursor-pointer flex gap-2 justify-start w-fit"
@@ -172,7 +167,7 @@ export default function Appearance() {
                 checked={linksRouteTo === LinksRouteTo.ORIGINAL}
                 onChange={() => setLinksRouteTo(LinksRouteTo.ORIGINAL)}
               />
-              <span className="label-text">Open the original content</span>
+              <span className="label-text">{t("open_original_content")}</span>
             </label>
 
             <label
@@ -188,7 +183,7 @@ export default function Appearance() {
                 checked={linksRouteTo === LinksRouteTo.PDF}
                 onChange={() => setLinksRouteTo(LinksRouteTo.PDF)}
               />
-              <span className="label-text">Open PDF, if available</span>
+              <span className="label-text">{t("open_pdf_if_available")}</span>
             </label>
 
             <label
@@ -204,7 +199,9 @@ export default function Appearance() {
                 checked={linksRouteTo === LinksRouteTo.READABLE}
                 onChange={() => setLinksRouteTo(LinksRouteTo.READABLE)}
               />
-              <span className="label-text">Open Readable, if available</span>
+              <span className="label-text">
+                {t("open_readable_if_available")}
+              </span>
             </label>
 
             <label
@@ -220,7 +217,9 @@ export default function Appearance() {
                 checked={linksRouteTo === LinksRouteTo.SCREENSHOT}
                 onChange={() => setLinksRouteTo(LinksRouteTo.SCREENSHOT)}
               />
-              <span className="label-text">Open Screenshot, if available</span>
+              <span className="label-text">
+                {t("open_screenshot_if_available")}
+              </span>
             </label>
           </div>
         </div>
@@ -228,10 +227,12 @@ export default function Appearance() {
         <SubmitButton
           onClick={submit}
           loading={submitLoader}
-          label="Save Changes"
+          label={t("save_changes")}
           className="mt-2 w-full sm:w-fit"
         />
       </div>
     </SettingsLayout>
   );
 }
+
+export { getServerSideProps };