From 87bdc624324dc75aaacc5e1a6d2505f86a2d383c Mon Sep 17 00:00:00 2001 From: Weilue Luo Date: Sat, 10 Aug 2024 11:47:24 +0100 Subject: [PATCH] add comment section translation --- scripts/deploy/V3_NEXT_TAG.txt | 2 +- src/app/[locale]/blog/[filename]/comments.tsx | 34 +++++++------------ src/public/messages/en.json | 3 ++ src/public/messages/hi.json | 3 ++ src/public/messages/iw.json | 3 ++ src/public/messages/jp.json | 3 ++ src/public/messages/tw.json | 3 ++ src/public/messages/zh.json | 3 ++ src/shared/i18n/type.ts | 3 ++ 9 files changed, 34 insertions(+), 23 deletions(-) diff --git a/scripts/deploy/V3_NEXT_TAG.txt b/scripts/deploy/V3_NEXT_TAG.txt index 49541f7..f906e18 100644 --- 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 index a094161..74ed24d 100644 --- 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(null); - const onSendComment = () => { - if (commentTextareaRef.current) { - const comment = commentTextareaRef.current.value; - if (comment) { - sendComment(comment); - commentTextareaRef.current.value = ""; - } - } - }; - useEffect(() => { reload(); }, [reload]); return ( <> -

Comments (Experimental)

+

+ +

{comments.length > 0 && ( @@ -67,8 +58,7 @@ export default function CommentSection({ filename, messages, locale }: CommentSe )} {loading && } - {/* */} - +
); @@ -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(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 (