add translations to NewBoxModal, fix translations

kristianka · Jun 4, 2024 · 8bd035a · 8bd035a
1 parent 71969d0
commit 8bd035a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 20 deletions.
diff --git a/frontend/src/components/Buttons/NewBoxModal.tsx b/frontend/src/components/Buttons/NewBoxModal.tsx
@@ -2,13 +2,15 @@ import { Button, Label, Modal, TextInput, Textarea } from "flowbite-react";
 import { useState } from "react";
 import { isValid } from "../../misc";
 import ErrorMessage from "../ErrorMessage";
+import { useTranslation } from "react-i18next";
 
 interface props {
   openModal: boolean;
   setOpenModal: (value: boolean) => void;
 }
 
 const NewBoxModal = ({ openModal, setOpenModal }: props) => {
+  const { t } = useTranslation();
   // height, depth, and length are strings not nums so inputs work better
   const [width, setWidth] = useState("");
   const [height, setHeight] = useState("");
@@ -58,7 +60,7 @@ const NewBoxModal = ({ openModal, setOpenModal }: props) => {
         <Modal.Body>
           <div className="space-y-6">
             <h3 className="text-xl font-medium text-gray-900 dark:text-white">
-              Create a new box
+              {t("createBox")}
             </h3>
             {error && (
               <ErrorMessage
@@ -69,26 +71,26 @@ const NewBoxModal = ({ openModal, setOpenModal }: props) => {
             {/* width */}
             <div>
               <div className="mb-2 block">
-                <Label htmlFor="length" value="Width" />
+                <Label htmlFor="width" value={t("width")} />
               </div>
               <TextInput
-                placeholder="Enter width"
+                placeholder={t("enterWidth")}
                 min={0}
                 max={10000}
                 type="number"
-                id="with"
-                value={length}
+                id="width"
+                value={width}
                 onChange={(event) => setWidth(event.target.value)}
                 required
               />
             </div>
             {/* height */}
             <div>
               <div className="mb-2 block">
-                <Label htmlFor="height" value="Height" />
+                <Label htmlFor="height" value={t("height")} />
               </div>
               <TextInput
-                placeholder="Enter height"
+                placeholder={t("enterHeight")}
                 min={0}
                 max={10000}
                 type="number"
@@ -101,10 +103,10 @@ const NewBoxModal = ({ openModal, setOpenModal }: props) => {
             {/* depth */}
             <div>
               <div className="mb-2 block">
-                <Label htmlFor="depth" value="Depth" />
+                <Label htmlFor="depth" value={t("depth")} />
               </div>
               <TextInput
-                placeholder="Enter depth"
+                placeholder={t("enterDepth")}
                 min={0}
                 max={10000}
                 type="number"
@@ -117,20 +119,20 @@ const NewBoxModal = ({ openModal, setOpenModal }: props) => {
             {/* comment */}
             <div>
               <div className="mb-2 block">
-                <Label htmlFor="comment" value="Comment" />
+                <Label htmlFor="comment" value={t("comment")} />
               </div>
               <Textarea
                 rows={5}
                 id="comment"
                 value={comment}
-                placeholder="Comment is optional"
-                helperText="ID of the box is generated automatically."
+                placeholder={t("enterComment")}
+                helperText={t("createBoxIdTip") + "."}
                 onChange={(e) => setComment(e.target.value)}
               />
             </div>
             {/* submit */}
             <div className="w-full">
-              <Button onClick={addBox}>Add</Button>
+              <Button onClick={addBox}>{t("add")}</Button>
             </div>
           </div>
         </Modal.Body>

diff --git a/frontend/src/components/Buttons/Refresh.tsx b/frontend/src/components/Buttons/Refresh.tsx
@@ -1,10 +1,13 @@
 import { Spinner } from "flowbite-react";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 interface props {
   fetchBoxes: () => void;
 }
 const Refresh = ({ fetchBoxes }: props) => {
+  const { t } = useTranslation();
+
   const [isFetching, setIsFetching] = useState(false);
 
   const handleClick = async () => {
@@ -19,7 +22,7 @@ const Refresh = ({ fetchBoxes }: props) => {
       disabled={isFetching}
       onClick={handleClick}
       type="button"
-      title="Refresh list"
+      title={t("refreshTooltip")}
       className="m-1 inline-flex items-center rounded-lg
       border border-gray-300 bg-gray-50 px-5 py-2.5 text-center text-sm font-medium hover:bg-gray-300 disabled:border-slate-200 disabled:bg-slate-50 disabled:text-slate-500 disabled:shadow-none"
     >

diff --git a/frontend/src/i18n/en/translations.json b/frontend/src/i18n/en/translations.json
@@ -16,15 +16,14 @@
     "weightHeightDepthAbbreviation": "W x H x D",
     "createdAt": "Created at",
     "updatedAt": "Updated at",
-    "comments": "Comment",
+    "comment": "Comment",
     "noBoxes": "No boxes found",
     "detailedInfoTip": "Click on a box to see its information",
     "createBox": "Create a new box",
     "enterWidth": "Enter width",
     "enterHeight": "Enter height",
     "enterDepth": "Enter depth",
-    "enterComment": "Enter comment",
-    "commentTip": "Comment is optional",
+    "enterComment": "Comment is optional",
     "add": "Add",
 
     "createBoxIdTip": "ID of the box is generated automatically",

diff --git a/frontend/src/i18n/fi/translations.json b/frontend/src/i18n/fi/translations.json
@@ -16,15 +16,14 @@
     "weightHeightDepthAbbreviation": "L x K x S",
     "createdAt": "Luotu",
     "updatedAt": "Päivitetty",
-    "comments": "Kommentti",
+    "comment": "Kommentti",
     "noBoxes": "Laatikoita ei löytynyt",
     "detailedInfoTip": "Klikkaa laatikkoa nähdääksesi sen tarkemmat tiedot",
     "createBox": "Luo laatikko",
     "enterWidth": "Syötä leveys",
     "enterHeight": "Syötä korkeus",
     "enterDepth": "Syötä syvyys",
-    "enterComment": "Syötä kommentti",
-    "commentTip": "Kommentti on vapaaehtoinen",
+    "enterComment": "Kommentti on vapaaehtoinen",
     "add": "Lisää",
     "createBoxIdTip": "Laatikon ID luodaan automaattisesti",
     "couldntFetchBoxes": "Laatikoita ei voitu hakea. Varmista että olet yhteydessä internetiin ja yritä myöhemmin uudelleen."