add comment section translation

weilueluo · Aug 10, 2024 · 87bdc62 · 87bdc62
1 parent 367c448
commit 87bdc62
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 23 deletions.
diff --git a/scripts/deploy/V3_NEXT_TAG.txt b/scripts/deploy/V3_NEXT_TAG.txt
@@ -1 +1 @@
-94
+96
diff --git a/src/app/[locale]/blog/[filename]/comments.tsx b/src/app/[locale]/blog/[filename]/comments.tsx
@@ -3,6 +3,8 @@ import IconedText from "@/components/ui/icon-text";
 import Loading from "@/components/ui/loading/spinner";
 import Separator from "@/components/ui/separator";
 import { useComments } from "@/shared/dynamo";
+import { formattedMessage, FormattedMessage } from "@/shared/i18n/translation";
+import { Messages } from "@/shared/i18n/type";
 import { BaseCompProps } from "@/shared/types/comp";
 import { useEffect, useRef, useState } from "react";
 import { AiFillClockCircle } from "react-icons/ai";
@@ -21,28 +23,17 @@ export interface CommentSectionProps {
 export default function CommentSection({ filename, messages, locale }: CommentSectionProps & BaseCompProps<"div">) {
     const tableName = process.env.NEXT_PUBLIC_COMMENT_TABLE_NAME ?? "";
     const identityPoolId = process.env.NEXT_PUBLIC_COMMENT_COGNITO_POOL_ID ?? "";
-    // console.log("tableName", tableName);
-    // console.log("identityPoolId", identityPoolId);
     const { comments, loading, reload, sendComment } = useComments(identityPoolId, tableName, filename);
 
-    const commentTextareaRef = useRef<HTMLTextAreaElement>(null);
-    const onSendComment = () => {
-        if (commentTextareaRef.current) {
-            const comment = commentTextareaRef.current.value;
-            if (comment) {
-                sendComment(comment);
-                commentTextareaRef.current.value = "";
-            }
-        }
-    };
-
     useEffect(() => {
         reload();
     }, [reload]);
 
     return (
         <>
-            <h1 className="text-center font-bold">Comments (Experimental)</h1>
+            <h1 className="text-center font-bold">
+                <FormattedMessage messages={messages} id="blog.comments.title" />
+            </h1>
             <Separator className="mb-4 h-2" />
             <div className="flex w-4/5 flex-col items-center">
                 {comments.length > 0 && (
@@ -67,8 +58,7 @@ export default function CommentSection({ filename, messages, locale }: CommentSe
                     </>
                 )}
                 {loading && <Loading className="h-24" />}
-                {/* <Separator className="mb-6 mt-6 h-2" /> */}
-                <SendComment sendComment={sendComment} />
+                <SendComment sendComment={sendComment} messages={messages} />
             </div>
         </>
     );
@@ -78,8 +68,8 @@ const getRandomSmallMilliseconds = () => {
     return Math.floor(Math.random() * 50);
 };
 
-function SendComment({ sendComment }: { sendComment: (comment: string) => void }) {
-    const [buttonText, setButtonText] = useState("Add Comment");
+function SendComment({ sendComment, messages }: { sendComment: (comment: string) => void; messages: Messages }) {
+    const [buttonText, setButtonText] = useState(formattedMessage(messages, "blog.comments.send"));
     const commentTextareaRef = useRef<HTMLTextAreaElement>(null);
     const onSendComment = () => {
         if (commentTextareaRef.current) {
@@ -101,7 +91,7 @@ function SendComment({ sendComment }: { sendComment: (comment: string) => void }
                 const currTime = Date.now();
                 const timeLeft = cooldownMs - (currTime - startTime);
                 if (timeLeft <= 0) {
-                    setButtonText("Add Comment");
+                    setButtonText(formattedMessage(messages, "blog.comments.send"));
                     setCooldown(false);
                 } else {
                     setButtonText(`${(timeLeft / 1000).toFixed(2)}s`);
@@ -117,10 +107,10 @@ function SendComment({ sendComment }: { sendComment: (comment: string) => void }
     return (
         <div className="mt-6 flex flex-col gap-2">
             <textarea
-                className="std-bg dark:std-bg-dark std-text w-full rounded-md border border-gray-400 p-2"
-                placeholder={"Write something..."}
+                className="std-bg dark:std-bg-dark std-text max-w-full rounded-md border border-gray-400 p-2"
+                placeholder={formattedMessage(messages, "blog.comments.placeholder")}
                 rows={3}
-                cols={60}
+                cols={64}
                 ref={commentTextareaRef}
             />
             <button

diff --git a/src/public/messages/en.json b/src/public/messages/en.json
@@ -55,6 +55,9 @@
     "anime.search.result.loading": "Loading",
     "anime.search.result.results": "Results",
     "anime.search.settings": "Settings",
+    "blog.comments.placeholder": "Write something...",
+    "blog.comments.send": "Send Comment",
+    "blog.comments.title": "Comments",
     "blog.copy_link": "Copy Link",
     "blog.download": "Download",
     "blog.share": "Share",

diff --git a/src/public/messages/hi.json b/src/public/messages/hi.json
@@ -55,6 +55,9 @@
     "anime.search.result.loading": "लोड हो रहा है",
     "anime.search.result.results": "परिणाम",
     "anime.search.settings": "समायोजन",
+    "blog.comments.placeholder": "कुछ लिखना...",
+    "blog.comments.send": "टिप्पणी भेजें",
+    "blog.comments.title": "टिप्पणियाँ",
     "blog.copy_link": "लिंक की प्रतिलिपि करें",
     "blog.download": "डाउनलोड करना",
     "blog.share": "शेयर करना",

diff --git a/src/public/messages/iw.json b/src/public/messages/iw.json
@@ -55,6 +55,9 @@
     "anime.search.result.loading": "טוען",
     "anime.search.result.results": "תוצאות",
     "anime.search.settings": "הגדרות",
+    "blog.comments.placeholder": "תכתוב משהו...",
+    "blog.comments.send": "שלח תגובה",
+    "blog.comments.title": "הערות",
     "blog.copy_link": "העתק קישור",
     "blog.download": "הורד",
     "blog.share": "לַחֲלוֹק",

diff --git a/src/public/messages/jp.json b/src/public/messages/jp.json
@@ -55,6 +55,9 @@
     "anime.search.result.loading": "読み込み中",
     "anime.search.result.results": "結果",
     "anime.search.settings": "設定",
+    "blog.comments.placeholder": "何か書いてください...",
+    "blog.comments.send": "コメントを送信",
+    "blog.comments.title": "コメント",
     "blog.copy_link": "リンクをコピーする",
     "blog.download": "ダウンロード",
     "blog.share": "共有",

diff --git a/src/public/messages/tw.json b/src/public/messages/tw.json
@@ -55,6 +55,9 @@
     "anime.search.result.loading": "加載中",
     "anime.search.result.results": "結果",
     "anime.search.settings": "設置",
+    "blog.comments.placeholder": "寫點東西...",
+    "blog.comments.send": "發送評論",
+    "blog.comments.title": "評論",
     "blog.copy_link": "複製連結",
     "blog.download": "下載",
     "blog.share": "分享",

diff --git a/src/public/messages/zh.json b/src/public/messages/zh.json
@@ -55,6 +55,9 @@
     "anime.search.result.loading": "加载中",
     "anime.search.result.results": "结果",
     "anime.search.settings": "设置",
+    "blog.comments.placeholder": "写点东西...",
+    "blog.comments.send": "发送评论",
+    "blog.comments.title": "评论",
     "blog.copy_link": "复制链接",
     "blog.download": "下载",
     "blog.share": "分享",

diff --git a/src/shared/i18n/type.ts b/src/shared/i18n/type.ts
@@ -55,6 +55,9 @@ export interface Messages {
     "anime.search.result.loading": string;
     "anime.search.result.results": string;
     "anime.search.settings": string;
+    "blog.comments.placeholder": string;
+    "blog.comments.send": string;
+    "blog.comments.title": string;
     "blog.copy_link": string;
     "blog.download": string;
     "blog.share": string;