Merge branch 'dev' of https://github.com/linkwarden/linkwarden into feat/single-file

components/ModalContent/NewLinkModal.tsx

@@ -11,14 +11,15 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import toast from "react-hot-toast";
 import Modal from "../Modal";
+import { useTranslation } from "next-i18next";
 
 type Props = {
   onClose: Function;
 };
 
 export default function NewLinkModal({ onClose }: Props) {
+  const { t } = useTranslation();
   const { data } = useSession();
-
   const initial = {
     name: "",
     url: "",
@@ -39,18 +40,14 @@ export default function NewLinkModal({ onClose }: Props) {
 
   const [link, setLink] =
     useState<LinkIncludingShortenedCollectionAndTags>(initial);
-
   const { addLink } = useLinkStore();
   const [submitLoader, setSubmitLoader] = useState(false);
-
   const [optionsExpanded, setOptionsExpanded] = useState(false);
-
   const router = useRouter();
   const { collections } = useCollectionStore();
 
   const setCollection = (e: any) => {
     if (e?.__isNew__) e.value = null;
-
     setLink({
       ...link,
       collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
@@ -58,10 +55,7 @@ export default function NewLinkModal({ onClose }: Props) {
   };
 
   const setTags = (e: any) => {
-    const tagNames = e.map((e: any) => {
-      return { name: e.label };
-    });
-
+    const tagNames = e.map((e: any) => ({ name: e.label }));
     setLink({ ...link, tags: tagNames });
   };
 
@@ -70,7 +64,6 @@ export default function NewLinkModal({ onClose }: Props) {
       const currentCollection = collections.find(
         (e) => e.id == Number(router.query.id)
       );
-
       if (
         currentCollection &&
         currentCollection.ownerId &&
@@ -87,53 +80,42 @@ export default function NewLinkModal({ onClose }: Props) {
     } else
       setLink({
         ...initial,
-        collection: {
-          name: "Unorganized",
-          ownerId: data?.user.id as number,
-        },
+        collection: { name: "Unorganized", ownerId: data?.user.id as number },
       });
   }, []);
 
   const submit = async () => {
     if (!submitLoader) {
       setSubmitLoader(true);
-
-      let response;
-
-      const load = toast.loading("Creating...");
-
-      response = await addLink(link);
-
+      const load = toast.loading(t("creating_link"));
+      const response = await addLink(link);
       toast.dismiss(load);
-
       if (response.ok) {
-        toast.success(`Created!`);
+        toast.success(t("link_created"));
         onClose();
-      } else toast.error(response.data as string);
+      } else {
+        toast.error(response.data as string);
+      }
       setSubmitLoader(false);
-
-      return response;
     }
   };
 
   return (
     <Modal toggleModal={onClose}>
-      <p className="text-xl font-thin">Create a New Link</p>
-
+      <p className="text-xl font-thin">{t("create_new_link")}</p>
       <div className="divider mb-3 mt-1"></div>
-
       <div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
         <div className="sm:col-span-3 col-span-5">
-          <p className="mb-2">Link</p>
+          <p className="mb-2">{t("link")}</p>
           <TextInput
             value={link.url || ""}
             onChange={(e) => setLink({ ...link, url: e.target.value })}
-            placeholder="e.g. http://example.com/"
+            placeholder={t("link_url_placeholder")}
             className="bg-base-200"
           />
         </div>
         <div className="sm:col-span-2 col-span-5">
-          <p className="mb-2">Collection</p>
+          <p className="mb-2">{t("collection")}</p>
           {link.collection.name ? (
             <CollectionSelection
               onChange={setCollection}
@@ -145,40 +127,37 @@ export default function NewLinkModal({ onClose }: Props) {
           ) : null}
         </div>
       </div>
-
       <div className={"mt-2"}>
         {optionsExpanded ? (
           <div className="mt-5">
-            {/* <hr className="mb-3 border border-neutral-content" /> */}
             <div className="grid sm:grid-cols-2 gap-3">
               <div>
-                <p className="mb-2">Name</p>
+                <p className="mb-2">{t("name")}</p>
                 <TextInput
                   value={link.name}
                   onChange={(e) => setLink({ ...link, name: e.target.value })}
-                  placeholder="e.g. Example Link"
+                  placeholder={t("link_name_placeholder")}
                   className="bg-base-200"
                 />
               </div>
-
               <div>
-                <p className="mb-2">Tags</p>
+                <p className="mb-2">{t("tags")}</p>
                 <TagSelection
                   onChange={setTags}
-                  defaultValue={link.tags.map((e) => {
-                    return { label: e.name, value: e.id };
-                  })}
+                  defaultValue={link.tags.map((e) => ({
+                    label: e.name,
+                    value: e.id,
+                  }))}
                 />
               </div>
-
               <div className="sm:col-span-2">
-                <p className="mb-2">Description</p>
+                <p className="mb-2">{t("description")}</p>
                 <textarea
                   value={unescapeString(link.description) as string}
                   onChange={(e) =>
                     setLink({ ...link, description: e.target.value })
                   }
-                  placeholder="Will be auto generated if nothing is provided."
+                  placeholder={t("link_description_placeholder")}
                   className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
                 />
               </div>
@@ -186,27 +165,19 @@ export default function NewLinkModal({ onClose }: Props) {
           </div>
         ) : undefined}
       </div>
-
       <div className="flex justify-between items-center mt-5">
         <div
           onClick={() => setOptionsExpanded(!optionsExpanded)}
           className={`rounded-md cursor-pointer btn btn-sm btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
         >
-          <p className="font-normal">
-            {optionsExpanded ? "Hide" : "More"} Options
-          </p>
-          <i
-            className={`${
-              optionsExpanded ? "bi-chevron-up" : "bi-chevron-down"
-            }`}
-          ></i>
+          <p>{optionsExpanded ? t("hide_options") : t("more_options")}</p>
+          <i className={`bi-chevron-${optionsExpanded ? "up" : "down"}`}></i>
         </div>
-
         <button
           className="btn btn-accent dark:border-violet-400 text-white"
           onClick={submit}
         >
-          Create Link
+          {t("create_link")}
         </button>
       </div>
     </Modal>