refactor: enhance translation function to support placeholder values and update related components

Author: kingRayhan

src/app/dashboard/_components/ArticleList.tsx

@@ -74,9 +74,6 @@ const ArticleList = () => {
 
       return { previousData };
     },
-    onSuccess(data, variables, context) {
-      // data
-    },
     onError: (err, variables, context) => {
       if (context?.previousData) {
         queryClient.setQueryData(["dashboard-articles"], context.previousData);
@@ -113,7 +110,7 @@ const ArticleList = () => {
 
       return { previousData };
     },
-    onError: (err, variables, context) => {
+    onError: (_, __, context) => {
       if (context?.previousData) {
         queryClient.setQueryData(["dashboard-articles"], context.previousData);
       }
@@ -157,12 +154,12 @@ const ArticleList = () => {
                 </Link>
                 {article?.delete_scheduled_at && (
                   <p className="text-destructive text-sm">
-                    Article will be deleted within{" "}
-                    {differenceInHours(
-                      new Date(article?.delete_scheduled_at!),
-                      new Date()
-                    )}{" "}
-                    hours
+                    {_t("Article will be deleted within $ days", [
+                      differenceInHours(
+                        new Date(article?.delete_scheduled_at!),
+                        new Date()
+                      ),
+                    ])}
                   </p>
                 )}
 

src/i18n/_t.ts

@@ -1,16 +1,24 @@
 "use server";
 
-import {cookies} from "next/headers";
+import { cookies } from "next/headers";
 import bn from "@/i18n/bn.json";
 
 const dictionaries: {
   [key: string]: any;
 } = { bn };
 
-const _t = async (key: string) => {
+const _t = async (key: string, placeholderValues?: (string | number)[]) => {
   const cookiesStore = await cookies();
   const _lang = cookiesStore.get("language")?.value || "en";
-  return dictionaries[_lang]?.[key] || key;
+  let translation = dictionaries[_lang]?.[key] || key;
+
+  if (placeholderValues && placeholderValues.length > 0) {
+    placeholderValues.forEach((value) => {
+      translation = translation.replace("$", String(value));
+    });
+  }
+
+  return translation;
 };
 
 export const getLang = async () => {

src/i18n/bn.json

@@ -108,5 +108,6 @@
   "Login Sessions": "লগইন সেশন সমূহ",
   "These are the login sessions of your account. You can use this to revoke access to your account": "এটি আপনার একাউন্ট এর লগইন সেশন তালিকা। আপনি অন্য ডিভাইস থেকে লগাউট করে দিতে পারবেন",
   "You are not logged in": "আপনি লগইন করেননি",
-  "To do this, you must be logged in": "এটি করতে হলে আপনাকে লগইন করতে হবে"
+  "To do this, you must be logged in": "এটি করতে হলে আপনাকে লগইন করতে হবে",
+  "Article will be deleted within $ days": "আর্টিক্যাল $ দিনের মধ্যে মুছে যাবে"
 }

src/i18n/use-translation.ts

@@ -9,7 +9,17 @@ const dictionaries: {
 export const useTranslation = () => {
   const [lang, setLang] = useAtom(i18nLangAtom);
   return {
-    _t: (key: string) => dictionaries?.[lang || "en"]?.[key] || key,
+    _t: (key: string, placeholderValues?: (string | number)[]) => {
+      let translation = dictionaries?.[lang || "en"]?.[key] || key;
+
+      if (placeholderValues && placeholderValues.length > 0) {
+        placeholderValues.forEach((value) => {
+          translation = translation.replace("$", String(value));
+        });
+      }
+
+      return translation;
+    },
     lang,
     toggle: async () => {
       setLang(lang === "en" ? "bn" : "en");