From 691b40c968b23bec41f63dd7fd6861f5cbe589fc Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Mon, 26 Jun 2023 20:34:28 +0800
Subject: [PATCH] feat: add i18n for visibility

---
 web/src/components/CreateShortcutDialog.tsx | 10 +++++++---
 web/src/components/EditUserinfoDialog.tsx   |  2 +-
 web/src/components/ShortcutView.tsx         |  6 ++++--
 web/src/i18n.ts                             | 15 +++++++++++++++
 web/src/locales/en.json                     | 18 ++++++++++++++++++
 web/src/main.tsx                            |  1 +
 6 files changed, 46 insertions(+), 6 deletions(-)
 create mode 100644 web/src/i18n.ts
 create mode 100644 web/src/locales/en.json

diff --git a/web/src/components/CreateShortcutDialog.tsx b/web/src/components/CreateShortcutDialog.tsx
index 44d941b..afbe0ad 100644
--- a/web/src/components/CreateShortcutDialog.tsx
+++ b/web/src/components/CreateShortcutDialog.tsx
@@ -1,5 +1,6 @@
 import { Button, Input, Modal, ModalDialog, Radio, RadioGroup } from "@mui/joy";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { toast } from "react-hot-toast";
 import { shortcutService } from "../services";
 import useLoading from "../hooks/useLoading";
@@ -15,8 +16,11 @@ interface State {
   shortcutCreate: ShortcutCreate;
 }
 
+const visibilities: Visibility[] = ["PRIVATE", "WORKSPACE", "PUBLIC"];
+
 const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
   const { onClose, onConfirm, shortcutId } = props;
+  const { t } = useTranslation();
   const [state, setState] = useState<State>({
     shortcutCreate: {
       name: "",
@@ -172,9 +176,9 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
             </span>
             <div className="w-full flex flex-row justify-start items-center text-base">
               <RadioGroup orientation="horizontal" value={state.shortcutCreate.visibility} onChange={handleVisibilityInputChange}>
-                <Radio value="PRIVATE" label="Private" />
-                <Radio value="WORKSPACE" label="Workspace" />
-                <Radio value="PUBLIC" label="Public" />
+                {visibilities.map((visibility) => (
+                  <Radio key={visibility} value={visibility} label={t(`shortcut.visibility.${visibility.toLowerCase()}.self`)} />
+                ))}
               </RadioGroup>
             </div>
           </div>
diff --git a/web/src/components/EditUserinfoDialog.tsx b/web/src/components/EditUserinfoDialog.tsx
index 4402758..3c9d740 100644
--- a/web/src/components/EditUserinfoDialog.tsx
+++ b/web/src/components/EditUserinfoDialog.tsx
@@ -3,8 +3,8 @@ import { useState } from "react";
 import { toast } from "react-hot-toast";
 import useLoading from "../hooks/useLoading";
 import { userService } from "../services";
-import Icon from "./Icon";
 import { useAppSelector } from "../stores";
+import Icon from "./Icon";
 
 interface Props {
   onClose: () => void;
diff --git a/web/src/components/ShortcutView.tsx b/web/src/components/ShortcutView.tsx
index 1caa9c8..252c36f 100644
--- a/web/src/components/ShortcutView.tsx
+++ b/web/src/components/ShortcutView.tsx
@@ -1,5 +1,6 @@
 import { Tooltip } from "@mui/joy";
 import copy from "copy-to-clipboard";
+import { useTranslation } from "react-i18next";
 import toast from "react-hot-toast";
 import { shortcutService } from "../services";
 import { useAppSelector } from "../stores";
@@ -16,6 +17,7 @@ interface Props {
 
 const ShortcutView = (props: Props) => {
   const { shortcut, handleEdit } = props;
+  const { t } = useTranslation();
   const user = useAppSelector((state) => state.user.user as User);
   const havePermission = user.role === "ADMIN" || shortcut.creatorId === user.id;
 
@@ -100,10 +102,10 @@ const ShortcutView = (props: Props) => {
             {shortcut.creator.nickname}
           </div>
         </Tooltip>
-        <Tooltip title="View count" variant="solid" placement="top" arrow>
+        <Tooltip title={t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.description`)} variant="solid" placement="top" arrow>
           <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
             <VisibilityIcon className="w-4 h-auto mr-1" visibility={shortcut.visibility} />
-            {shortcut.visibility}
+            {t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.self`)}
           </div>
         </Tooltip>
         <Tooltip title="View count" variant="solid" placement="top" arrow>
diff --git a/web/src/i18n.ts b/web/src/i18n.ts
new file mode 100644
index 0000000..aeb536b
--- /dev/null
+++ b/web/src/i18n.ts
@@ -0,0 +1,15 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import en from "./locales/en.json";
+
+i18n.use(initReactI18next).init({
+  resources: {
+    en: {
+      translation: en,
+    },
+  },
+  lng: "en",
+  fallbackLng: "en",
+});
+
+export default i18n;
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
new file mode 100644
index 0000000..a9c5264
--- /dev/null
+++ b/web/src/locales/en.json
@@ -0,0 +1,18 @@
+{
+  "shortcut": {
+    "visibility": {
+      "private": {
+        "self": "Private",
+        "description": "Only you can see this"
+      },
+      "workspace": {
+        "self": "Workspace",
+        "description": "Only people in your workspace can see this"
+      },
+      "public": {
+        "self": "Public",
+        "description": "Anyone can see this"
+      }
+    }
+  }
+}
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 3816d2a..54334e6 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -2,6 +2,7 @@ import { createRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 import store from "./stores";
 import App from "./App";
+import "./i18n";
 import "./css/index.css";
 
 const container = document.getElementById("root");