feat(i18n): use translated strings in components

Guayaba-Devs · Sep 24, 2023 · de6efbb · de6efbb
1 parent a7a7abd
commit de6efbb
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 59 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,17 +1,14 @@
-import { useState } from 'react'
 import './App.css'
 import { Message } from './components/CreateMessage/Message'
 import { Flower } from './components/FlowerVisualize/Flower'
 import { Routes, Route } from 'react-router-dom'
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
     <>
       <Routes>
         <Route path="/" element={<Message />} />
-        <Route path='/message/:message' element={<Flower />}/> 
+        <Route path="/message/:message" element={<Flower />} />
       </Routes>
     </>
   )

diff --git a/src/components/CreateMessage/Message.jsx b/src/components/CreateMessage/Message.jsx
@@ -1,10 +1,10 @@
 import { useState } from "react";
 import toast, { Toaster } from "react-hot-toast";
-import { useLocation } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 export const Message = () => {
   const url = window.location.origin;
-  const { pathname } = useLocation();
+  const { t } = useTranslation();
 
   const [message, setMessage] = useState("");
   const [messageUrl, setMessageUrl] = useState("");
@@ -16,12 +16,12 @@ export const Message = () => {
 
   const generateLink = (e) => {
     e.preventDefault();
-    if(message.trim() === ""){
-      toast.error("Debes ingresar un mensaje", {
-        style:{
+    if (message.trim() === "") {
+      toast.error(t("message.form.input.error"), {
+        style: {
           background: "#242424",
           color: "#fff",
-        }
+        },
       });
       return;
     }
@@ -31,69 +31,69 @@ export const Message = () => {
   };
 
   const copyToClipboard = (e) => {
-    e.preventDefault()
+    e.preventDefault();
     const textArea = document.createElement("textarea");
     textArea.value = messageUrl;
     document.body.appendChild(textArea);
     textArea.select();
     document.execCommand("copy");
     document.body.removeChild(textArea);
     setCopied(true);
-    setTimeout(() => setCopied(false), 2000); 
+    setTimeout(() => setCopied(false), 2000);
   };
 
   return (
     <div>
-    <div><Toaster></Toaster></div>
+      <div>
+        <Toaster />
+      </div>
       <h1 className="text-3xl font-bold mb-6">
-        Envía una flor amarilla!
+        {t("message.title")}
         <span role="img" aria-label="flower">
           🌻
         </span>
       </h1>
 
-      <p className="text-xl mb-3">
-        Escribe un mensaje y envíalo a tu persona favorita!
-      </p>
+      <p className="text-xl mb-3">{t("message.description")}</p>
 
-      <form action="" className="w-full flex items-center justify-center flex-col">
+      <form
+        action=""
+        className="w-full flex items-center justify-center flex-col"
+      >
         <textarea
           className="border-2 border-yellow-300 rounded-lg p-2 w-full h-24 mt-2 max-w-lg mb-3"
           onChange={handleMessageChange}
-          placeholder="Ingresa tu mensaje para esa persona :D"
+          placeholder={t("message.form.input.placeholder")}
         />
         <button
-          className="bg-yellow-300 hover:bg-yellow-400 text-black rounded-lg px-4 py-2 mt-2 w-32"
+          className="bg-yellow-300 hover:bg-yellow-400 text-black rounded-lg px-4 py-2 mt-2"
           onClick={generateLink}
         >
-          Generar Link
+          {t("message.form.submit")}
         </button>
         {messageUrl && (
           <button
             className="bg-green-500 hover:bg-green-600 text-white rounded-lg px-4 py-2 mt-2 w-32"
             onClick={copyToClipboard}
           >
-            {copied ? "Copiado" : "Copiar el link"}
+            {copied ? t("message.copied") : t("message.copyLink")}
           </button>
         )}
       </form>
 
-      <div className="mt-5">
-        {messageUrl && (
-          <p className="bg-slate-600 max-w-lg mx-auto rounded-sm p-4 overflow-hidden">
-            URL generada:{" "}
-            <a
-              className="bg-stone-400 overflow-x-scroll"
-              href={messageUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {messageUrl}
-            </a>
-          </p>
-        )}
-      </div>
+      {messageUrl && (
+        <div className="flex flex-col gap-2 items-center mt-5 bg-slate-600 max-w-lg mx-auto rounded-sm p-4">
+          <span>{t("message.generatedUrl")}:</span>
+          <a
+            className="bg-stone-400 break-all fit-content"
+            href={messageUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {messageUrl}
+          </a>
+        </div>
+      )}
     </div>
   );
 };
-
diff --git a/src/components/FlowerVisualize/Flower.jsx b/src/components/FlowerVisualize/Flower.jsx
@@ -1,40 +1,49 @@
 import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
 
 export const Flower = () => {
   const [decodedMessage, setDecodedMessage] = useState("");
   const { message } = useParams();
+  const { t } = useTranslation();
 
   useEffect(() => {
     setDecodedMessage(atob(message));
   }, [message]);
 
   return (
     <div className="h-full">
-        <h1 className="text-3xl font-bold mb-6">
-            Alguien que te quiere te envio una flor!
-            <span role="img" aria-label="flower">
-            🌻
-            </span>
-        </h1>
+      <h1 className="text-3xl font-bold mb-6">
+        {t("flower.title")}
+        <span role="img" aria-label="flower">
+          🌻
+        </span>
+      </h1>
 
-        <img 
-            className="w-full max-w-lg mx-auto rounded-lg" 
-            src="https://www.bloomberglinea.com/resizer/-duYn76ZQbqQ4X1XzJkLSOxu7p0=/600x0/filters:format(webp):quality(75)/cloudfront-us-east-1.images.arcpublishing.com/bloomberglinea/NJKR6OXHYZA5TKBTNL66O5BM3A.jpg" 
-            alt="imagen de flores" 
-        />
+      <img
+        className="w-full max-w-lg mx-auto rounded-lg"
+        src="https://www.bloomberglinea.com/resizer/-duYn76ZQbqQ4X1XzJkLSOxu7p0=/600x0/filters:format(webp):quality(75)/cloudfront-us-east-1.images.arcpublishing.com/bloomberglinea/NJKR6OXHYZA5TKBTNL66O5BM3A.jpg"
+        alt="imagen de flores"
+      />
 
-        <div className="w-full my-5 text-start">
-            <h3 className="w-full text-start text-2xl mb-1">Y un mensaje...</h3>
-            <p className="text-xl">
-                {decodedMessage}
-            </p>
-        </div>
+      <div className="w-full my-5 text-start">
+        <h3 className="w-full text-start text-2xl mb-1">
+          {t("flower.andMessage")}
+        </h3>
+        <p className="text-xl">{decodedMessage}</p>
+      </div>
 
-
-        <p className="">
-            Desarrollado por <a className="text-teal-400 hover:text-teal-600" href="https://github.com/Escihu-Wizards" target="_blank" rel="noopener noreferrer">Escihu-Wizards</a>
-        </p>
+      <p>
+        {`${t("flower.developedBy")} `}
+        <a
+          className="text-teal-400 hover:text-teal-600"
+          href="https://github.com/Escihu-Wizards"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Escihu-Wizards
+        </a>
+      </p>
     </div>
   );
 };