Added client side translations

.github/workflows/node.js.yml

@@ -13,6 +13,7 @@ jobs:
       RESULTS_PER_PAGE: "45"
       NEXT_PUBLIC_SERVER_ADDRESS: "http://localhost:3000"
       NEXT_PUBLIC_IMAGES_HOSTING_ADDRESS: "https://statify-images.netlify.app"
+      NEXT_PUBLIC_LANG: "en"
 
     runs-on: ubuntu-latest
 

core/package.json

@@ -15,6 +15,7 @@
     "test:coverage": "jest --coverage"
   },
   "dependencies": {
+    "@formatjs/intl": "^3.1.0",
     "@hookform/resolvers": "^3.9.0",
     "@prisma/client": "^5.3.1",
     "@unocss/reset": "^0.64.1",

core/src/app/(admin)/admin/dashboard/countries/metadata.ts

@@ -1,22 +1,23 @@
 import { Metadata } from "next"
 import { SERVER_ADDRESS } from "@/constants/general"
+import translate from "@/modules/i18n"
 
 const metadata: Metadata = {
   metadataBase: new URL(SERVER_ADDRESS),
-  title: "Countries Dashboard",
-  description: "Edit countries here: add, update or delete.",
+  title: translate("pages.indicators_dashboard.metadata.title"),
+  description: translate("pages.indicators_dashboard.metadata.description"),
   themeColor: "#ffffff",
   openGraph: {
     images: ["/og.png"],
-    title: "Countries Dashboard",
-    description: "Edit countries here: add, update or delete.",
+    title: translate("pages.indicators_dashboard.metadata.title"),
+    description: translate("pages.indicators_dashboard.metadata.description"),
     type: "website",
     url: "/",
   },
   twitter: {
     images: ["/og.png"],
-    title: "Countries Dashboard",
-    description: "Edit countries here: add, update or delete.",
+    title: translate("pages.indicators_dashboard.metadata.title"),
+    description: translate("pages.indicators_dashboard.metadata.description"),
     card: "summary_large_image",
     site: "@Zhorrrro",
   },

core/src/app/(admin)/admin/dashboard/indicators/metadata.ts

@@ -1,22 +1,23 @@
 import { Metadata } from "next"
 import { SERVER_ADDRESS } from "@/constants/general"
+import translate from "@/modules/i18n"
 
 const metadata: Metadata = {
   metadataBase: new URL(SERVER_ADDRESS),
-  title: "Indicators Dashboard",
-  description: "Edit indicators here: add, update or delete.",
+  title: translate("pages.indicators_dashboard.metadata.title"),
+  description: translate("pages.indicators_dashboard.metadata.description"),
   themeColor: "#ffffff",
   openGraph: {
     images: ["/og.png"],
-    title: "Indicators Dashboard",
-    description: "Edit indicators here: add, update or delete.",
+    title: translate("pages.indicators_dashboard.metadata.title"),
+    description: translate("pages.indicators_dashboard.metadata.description"),
     type: "website",
     url: "/",
   },
   twitter: {
     images: ["/og.png"],
-    title: "Indicators Dashboard",
-    description: "Edit indicators here: add, update or delete.",
+    title: translate("pages.indicators_dashboard.metadata.title"),
+    description: translate("pages.indicators_dashboard.metadata.description"),
     card: "summary_large_image",
     site: "@Zhorrrro",
   },

core/src/app/(admin)/admin/dashboard/values/metadata.ts

@@ -1,22 +1,23 @@
 import { Metadata } from "next"
 import { SERVER_ADDRESS } from "@/constants/general"
+import translate from "@/modules/i18n"
 
 const metadata: Metadata = {
   metadataBase: new URL(SERVER_ADDRESS),
-  title: "Values Dashboard",
-  description: "Edit values here: add, update or delete.",
+  title: translate("pages.values_dashboard.metadata.title"),
+  description: translate("pages.values_dashboard.metadata.description"),
   themeColor: "#ffffff",
   openGraph: {
     images: ["/og.png"],
-    title: "Values Dashboard",
-    description: "Edit values here: add, update or delete.",
+    title: translate("pages.values_dashboard.metadata.title"),
+    description: translate("pages.values_dashboard.metadata.description"),
     type: "website",
     url: "/",
   },
   twitter: {
     images: ["/og.png"],
-    title: "Values Dashboard",
-    description: "Edit values here: add, update or delete.",
+    title: translate("pages.values_dashboard.metadata.title"),
+    description: translate("pages.values_dashboard.metadata.description"),
     card: "summary_large_image",
     site: "@Zhorrrro",
   },

core/src/app/(admin)/admin/signin/metadata.ts

@@ -1,22 +1,23 @@
 import { Metadata } from "next"
 import { SERVER_ADDRESS } from "@/constants/general"
+import translate from "@/modules/i18n"
 
 const metadata: Metadata = {
   metadataBase: new URL(SERVER_ADDRESS),
-  title: "Sign In",
-  description: "Sign In as administrator to be able to edit data.",
+  title: translate("pages.signin.metadata.title"),
+  description: translate("pages.signin.metadata.description"),
   themeColor: "#ffffff",
   openGraph: {
     images: ["/og.png"],
-    title: "Sign In",
-    description: "Sign In as administrator to be able to edit data.",
+    title: translate("pages.signin.metadata.title"),
+    description: translate("pages.signin.metadata.description"),
     type: "website",
     url: "/",
   },
   twitter: {
     images: ["/og.png"],
-    title: "Sign In",
-    description: "Sign In as administrator to be able to edit data.",
+    title: translate("pages.signin.metadata.title"),
+    description: translate("pages.signin.metadata.description"),
     card: "summary_large_image",
     site: "@Zhorrrro",
   },

core/src/app/(public)/(with-toolbar)/bookmarks/layout.tsx

@@ -1,9 +1,14 @@
 import { ReactNode, Suspense } from "react"
 import IndicatorsListViewLoader from "@/containers/indicators-list-view/IndicatorsListViewLoader"
+import translate from "@/modules/i18n"
 
 export default function DashboardLayout({ children }: { children: ReactNode }) {
   return (
-    <Suspense fallback={<IndicatorsListViewLoader text="Search results for" />}>
+    <Suspense
+      fallback={
+        <IndicatorsListViewLoader text={translate("pages.bookmarks.heading")} />
+      }
+    >
       {children}
     </Suspense>
   )

core/src/app/(public)/(with-toolbar)/bookmarks/metadata.ts

@@ -1,25 +1,23 @@
 import { Metadata } from "next/types"
 import { SERVER_ADDRESS } from "@/constants/general"
+import translate from "@/modules/i18n"
 
 const metadata: Metadata = {
   metadataBase: new URL(SERVER_ADDRESS),
-  title: "Bookmarks",
-  description:
-    "Explore our database featuring 100+ indicators for hundreds of regions worldwide.",
+  title: translate("pages.bookmarks.metadata.title"),
+  description: translate("pages.bookmarks.metadata.description"),
   themeColor: "#ffffff",
   openGraph: {
     images: ["/og.png"],
     title: "Statify",
-    description:
-      "Explore our database featuring 100+ indicators for hundreds of regions worldwide.",
+    description: translate("pages.bookmarks.metadata.description"),
     type: "website",
     url: "/",
   },
   twitter: {
     images: ["/og.png"],
     title: "Statify",
-    description:
-      "Explore our database featuring 100+ indicators for hundreds of regions worldwide.",
+    description: translate("pages.bookmarks.metadata.description"),
     card: "summary_large_image",
     site: "@Zhorrrro",
   },

core/src/app/(public)/(with-toolbar)/bookmarks/page.tsx

@@ -5,6 +5,7 @@ import IndicatorsListView from "@/containers/indicators-list-view/IndicatorsList
 import InfoView from "@/containers/info-view/InfoView"
 import { CommonValidations } from "@/utils/validation-schemas/common"
 import pageValidationMiddleware from "@/middlewares/page-validation-middleware/pageValidationMiddleware"
+import translate from "@/modules/i18n"
 
 export { default as metadata } from "@/app/(public)/(with-toolbar)/bookmarks/metadata"
 
@@ -18,11 +19,14 @@ const Bookmarks = pageValidationMiddleware(async ({ searchParams }) => {
   return (
     <IndicatorsListView
       data={data?.data}
-      text="Your Bookmarks"
+      text={translate("pages.bookmarks.heading")}
       pages={data?.pages}
       page={data?.page}
       fallback={
-        <InfoView icon={<BookmarkIcon />} text={"You have no bookmarks yet"} />
+        <InfoView
+          icon={<BookmarkIcon />}
+          text={translate("pages.bookmarks.empty_fallback")}
+        />
       }
     />
   )