feat: add i18n for visibility

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>

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;

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>

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;

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"
+      }
+    }
+  }
+}

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");