build: 🌐 setup react-i18next

package.json

@@ -15,10 +15,14 @@
     "@reduxjs/toolkit": "^1.9.5",
     "firebase": "^10.3.1",
     "framer-motion": "^10.16.2",
+    "i18next": "^23.5.1",
+    "i18next-browser-languagedetector": "^7.1.0",
+    "i18next-http-backend": "^2.2.2",
     "immer": "^10.0.2",
     "next-themes": "^0.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^13.2.2",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.15.0"
   },

src/components/Drawer/AddReportDrawer/AddReportDrawerConfirm.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 import {
   Button,
   Modal,
@@ -19,23 +20,27 @@ const AddReportDrawerConfirm: React.FC<AddReportDrawerConfirmProps> = (
 ) => {
   const { disclosure, onSubmit } = props;
 
+  const { t } = useTranslation();
+
   const handleSubmit = () => {
     onSubmit();
     disclosure.onClose();
   };
   return (
     <Modal isOpen={disclosure.isOpen} onOpenChange={disclosure.onOpenChange}>
       <ModalContent>
-        <ModalHeader className="flex flex-col gap-1">Confirm</ModalHeader>
+        <ModalHeader className="flex flex-col gap-1">
+          {t("addReport.confirm.title", { ns: ["drawer"] })}
+        </ModalHeader>
         <ModalBody className="items-center">
-          Are you sure to add this report?
+          {t("addReport.confirm.content", { ns: ["drawer"] })}
         </ModalBody>
         <ModalFooter>
           <Button color="danger" variant="light" onPress={disclosure.onClose}>
-            Cancel
+            {t("addReport.confirm.buttons.cancel", { ns: ["drawer"] })}
           </Button>
           <Button color="primary" onPress={handleSubmit}>
-            Confirm
+            {t("addReport.confirm.buttons.confirm", { ns: ["drawer"] })}
           </Button>
         </ModalFooter>
       </ModalContent>

src/components/Drawer/AddReportDrawer/AddReportDrawerContent.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import { Button, Input } from "@nextui-org/react";
 
@@ -6,6 +7,8 @@ import { AddReportData, updateAddReportData } from "../../../store/report";
 import { maps } from "../../../utils/googleMaps";
 
 const AddReportDrawerContent: React.FC = () => {
+  const { t } = useTranslation();
+
   const dispatch = useDispatch();
   const reportData = useSelector((state: IRootState) => state.report.data);
 
@@ -31,26 +34,40 @@ const AddReportDrawerContent: React.FC = () => {
     <div>
       <Input
         autoFocus
-        label="Name"
-        placeholder="Enter the name"
+        label={t("addReport.content.inputs.name.label", { ns: ["drawer"] })}
+        placeholder={t("addReport.content.inputs.name.placeholder", {
+          ns: ["drawer"],
+        })}
         autoComplete="text"
         value={reportData.name || ""}
         isInvalid={!reportData.name}
         onValueChange={handleUpdataData("name")}
         variant="bordered"
       />
       <Input
-        label="Description"
-        placeholder="Enter the description"
+        label={t("addReport.content.inputs.description.label", {
+          ns: ["drawer"],
+        })}
+        placeholder={t("addReport.content.inputs.description.placeholder", {
+          ns: ["drawer"],
+        })}
         autoComplete="text"
         value={reportData.description || ""}
         isInvalid={!reportData.description}
         onValueChange={handleUpdataData("description")}
         variant="bordered"
       />
       <div className="flex justify-between items-center">
-        <h1>Location</h1>
-        <Button onClick={handleSetLatLng}>Mark</Button>
+        <h1>
+          {t("addReport.content.textWithButton.text", {
+            ns: ["drawer"],
+          })}
+        </h1>
+        <Button onClick={handleSetLatLng}>
+          {t("addReport.content.textWithButton.button", {
+            ns: ["drawer"],
+          })}
+        </Button>
       </div>
     </div>
   );

src/components/Drawer/AddReportDrawer/index.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import { useSearchParams } from "react-router-dom";
 import { Button, useDisclosure } from "@nextui-org/react";
@@ -19,6 +20,8 @@ import AddReportDrawerContent from "./AddReportDrawerContent";
 import AddReportDrawerConfirm from "./AddReportDrawerConfirm";
 
 const AddReportDrawer: React.FC = () => {
+  const { t } = useTranslation();
+
   const [searchParams, setSearchParams] = useSearchParams();
 
   const dispatch = useDispatch();
@@ -69,7 +72,14 @@ const AddReportDrawer: React.FC = () => {
     <Drawer
       open={selected}
       onClose={handleDrawerDismiss}
-      title={<span>Add a report for {cluster?.data.name}</span>}
+      title={
+        <span>
+          {t("addReport.title", {
+            cluster: cluster?.data.name,
+            ns: ["drawer"],
+          })}
+        </span>
+      }
       children={
         <>
           <AddReportDrawerContent />
@@ -79,8 +89,16 @@ const AddReportDrawer: React.FC = () => {
           />
         </>
       }
-      primaryButton={<Button onClick={handleDrawerConfirm}>Add</Button>}
-      secondaryButton={<button onClick={handleDrawerDismiss}>Dismiss</button>}
+      primaryButton={
+        <Button onClick={handleDrawerConfirm}>
+          {t("addReport.buttons.add", { ns: ["drawer"] })}
+        </Button>
+      }
+      secondaryButton={
+        <button onClick={handleDrawerDismiss}>
+          {t("addReport.buttons.cancel", { ns: ["drawer"] })}
+        </button>
+      }
     />
   );
 };

src/components/Drawer/ClusterDrawer/index.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import { useSearchParams } from "react-router-dom";
 import { Button } from "@nextui-org/react";
@@ -15,6 +16,8 @@ import {
 import Drawer from "..";
 
 const ClusterDrawer: React.FC = () => {
+  const { t } = useTranslation();
+
   const [searchParams, setSearchParams] = useSearchParams();
 
   const dispatch = useDispatch();
@@ -50,18 +53,37 @@ const ClusterDrawer: React.FC = () => {
     <Drawer
       open={selected}
       onClose={handleDrawerDismiss}
-      title={cluster?.data.name}
+      title={t("cluster.title", {
+        name: cluster?.data.name,
+        ns: ["drawer"],
+      })}
       children={
         <div>
-          <div>description: {cluster?.data.description}</div>
           <div>
-            latlng: {cluster?.data.latlng.latitude},{" "}
-            {cluster?.data.latlng.longitude}
+            {t("cluster.content.texts.description", {
+              description: cluster?.data.description,
+              ns: ["drawer"],
+            })}
+          </div>
+          <div>
+            {t("cluster.content.texts.latlng", {
+              latitude: cluster?.data.latlng.latitude,
+              longitude: cluster?.data.latlng.longitude,
+              ns: ["drawer"],
+            })}
           </div>
         </div>
       }
-      primaryButton={<Button onClick={handleDrawerConfirm}>Add</Button>}
-      secondaryButton={<button onClick={handleDrawerDismiss}>Dismiss</button>}
+      primaryButton={
+        <Button onClick={handleDrawerConfirm}>
+          {t("cluster.buttons.add", { ns: ["drawer"] })}
+        </Button>
+      }
+      secondaryButton={
+        <button onClick={handleDrawerDismiss}>
+          {t("cluster.buttons.cancel", { ns: ["drawer"] })}
+        </button>
+      }
     />
   );
 };

src/components/Drawer/PoiDrawer/index.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { useSearchParams } from "react-router-dom";
 import { Button } from "@nextui-org/react";
 
@@ -12,6 +13,8 @@ import {
 import Drawer from "..";
 
 const PoiDrawer: React.FC = () => {
+  const { t } = useTranslation();
+
   const [searchParams, setSearchParams] = useSearchParams();
 
   const selected = isCurrentDrawerParams("poi", searchParams);
@@ -29,17 +32,37 @@ const PoiDrawer: React.FC = () => {
     <Drawer
       open={selected}
       onClose={handleDrawerClose}
-      title={poi?.data.name}
+      title={t("poi.title", {
+        name: poi?.data.name,
+        ns: ["drawer"],
+      })}
       children={
         <div>
-          <div>description: {poi?.data.description}</div>
           <div>
-            latlng: {poi?.data.latlng.latitude}, {poi?.data.latlng.longitude}
+            {t("poi.content.texts.description", {
+              description: poi?.data.description,
+              ns: ["drawer"],
+            })}
+          </div>
+          <div>
+            {t("poi.content.texts.latlng", {
+              latitude: poi?.data.latlng.latitude,
+              longitude: poi?.data.latlng.longitude,
+              ns: ["drawer"],
+            })}
           </div>
         </div>
       }
-      primaryButton={<Button onClick={handleDrawerClose}>primary</Button>}
-      secondaryButton={<button onClick={handleDrawerClose}>secondary</button>}
+      primaryButton={
+        <Button onClick={handleDrawerClose}>
+          {t("poi.buttons.edit", { ns: ["drawer"] })}
+        </Button>
+      }
+      secondaryButton={
+        <button onClick={handleDrawerClose}>
+          {t("poi.buttons.cancel", { ns: ["drawer"] })}
+        </button>
+      }
     />
   );
 };

src/components/Map/Fabs/UserFab/UserFabMenu/index.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 import {
   DropdownItem,
   DropdownMenu,
@@ -34,11 +35,16 @@ const MenuItemUser: React.FC = () => {
 
 interface UserFabMenuProps {
   loginDisclosure: ReturnType<typeof useDisclosure>;
+  switchLanguageDisclosure: ReturnType<typeof useDisclosure>;
   switchThemeDisclosure: ReturnType<typeof useDisclosure>;
 }
 
 const UserFabMenu: React.FC<UserFabMenuProps> = (props) => {
-  const { loginDisclosure, switchThemeDisclosure } = props;
+  const { loginDisclosure, switchLanguageDisclosure, switchThemeDisclosure } =
+    props;
+
+  const { t } = useTranslation();
+
   const { data: isLoggedIn } = useIsLoggedInQuery();
   const [logout] = useLogoutMutation();
 
@@ -76,28 +82,41 @@ const UserFabMenu: React.FC<UserFabMenuProps> = (props) => {
           onPress={loginDisclosure.onOpen}
           style={{ display: isLoggedIn ? "none" : "block" }}
         >
-          Login
+          {t("fabs.user.menu.options.login", { ns: ["map"] })}
+        </DropdownItem>
+        <DropdownItem key="dashboard">
+          {t("fabs.user.menu.options.dashboard", { ns: ["map"] })}
+        </DropdownItem>
+        <DropdownItem key="settings">
+          {t("fabs.user.menu.options.settings", { ns: ["map"] })}
+        </DropdownItem>
+        <DropdownItem
+          key="language"
+          textValue="Language"
+          onPress={switchLanguageDisclosure.onOpen}
+        >
+          {t("fabs.user.menu.options.language", { ns: ["map"] })}
         </DropdownItem>
-        <DropdownItem key="dashboard">Dashboard</DropdownItem>
-        <DropdownItem key="settings">Settings</DropdownItem>
         <DropdownItem
           key="theme"
           textValue="Theme"
           onPress={switchThemeDisclosure.onOpen}
         >
-          Change Theme
+          {t("fabs.user.menu.options.theme", { ns: ["map"] })}
         </DropdownItem>
       </DropdownSection>
 
       <DropdownSection aria-label="Help & Feedback">
-        <DropdownItem key="help_and_feedback">Help & Feedback</DropdownItem>
+        <DropdownItem key="help_and_feedback">
+          {t("fabs.user.menu.options.helpAndFeedback", { ns: ["map"] })}
+        </DropdownItem>
         <DropdownItem
           key="logout"
           textValue="logout"
           onPress={logout}
           style={{ display: isLoggedIn ? "block" : "none" }}
         >
-          logout
+          {t("fabs.user.menu.options.logout", { ns: ["map"] })}
         </DropdownItem>
       </DropdownSection>
     </DropdownMenu>

src/components/Map/Fabs/UserFab/index.tsx

@@ -7,6 +7,7 @@ import {
 } from "@nextui-org/react";
 
 import { useGetUserQuery } from "../../../../api/user";
+import SwitchLanguage from "../../../modal/SwitchLanguage";
 import SwitchTheme from "../../../modal/SwitchTheme";
 
 import UserFabMenu from "./UserFabMenu";
@@ -29,6 +30,7 @@ const Trigger: React.FC = () => {
 
 const UserFab: React.FC = () => {
   const loginDisclosure = useDisclosure();
+  const switchLanguageDisclosure = useDisclosure();
   const switchThemeDisclosure = useDisclosure();
 
   return (
@@ -37,10 +39,12 @@ const UserFab: React.FC = () => {
         <Trigger />
         <UserFabMenu
           loginDisclosure={loginDisclosure}
+          switchLanguageDisclosure={switchLanguageDisclosure}
           switchThemeDisclosure={switchThemeDisclosure}
         />
       </Dropdown>
       <Login disclosure={loginDisclosure} />
+      <SwitchLanguage disclosure={switchLanguageDisclosure} />
       <SwitchTheme disclosure={switchThemeDisclosure} />
     </>
   );