feat: i18n

src/routes/settingChannel/DeleteConfirmModal.tsx

@@ -5,6 +5,7 @@ import Modal from "../../common/component/Modal";
 import { useLazyRemoveChannelQuery } from "../../app/services/channel";
 import StyledModal from "../../common/component/styled/Modal";
 import Button from "../../common/component/styled/Button";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   id: number;
@@ -12,6 +13,7 @@ interface Props {
 }
 
 const DeleteConfirmModal: FC<Props> = ({ id, closeModal }) => {
+  const { t } = useTranslation("setting");
   const navigateTo = useNavigate();
   const [deleteChannel, { isLoading, isSuccess }] = useLazyRemoveChannelQuery();
   const handleDelete = () => {
@@ -31,15 +33,15 @@ const DeleteConfirmModal: FC<Props> = ({ id, closeModal }) => {
     <Modal id="modal-modal">
       <StyledModal
         className="compact"
-        title="Delete Channel"
-        description="Are you sure want to delete this channel?"
+        title={t("channel.delete") || ""}
+        description={t("channel.delete_desc") || ""}
         buttons={
           <>
             <Button onClick={closeModal.bind(null, undefined)} className="cancel">
-              Cancel
+              {t("action.cancel", { ns: "common" })}
             </Button>
             <Button onClick={handleDelete} className="danger">
-              {isLoading ? "Deleting" : `Delete`}
+              {isLoading ? "Deleting" : t("action.remove", { ns: "common" })}
             </Button>
           </>
         }

src/routes/settingChannel/Overview.tsx

@@ -16,6 +16,7 @@ import SaveTip from "../../common/component/SaveTip";
 import channelIcon from "../../assets/icons/channel.svg?url";
 import { useAppSelector } from "../../app/store";
 import { Channel } from "../../types/channel";
+import { useTranslation } from "react-i18next";
 
 const StyledWrapper = styled.div`
   position: relative;
@@ -48,6 +49,7 @@ const StyledWrapper = styled.div`
   }
 `;
 export default function Overview({ id = 0 }) {
+  const { t } = useTranslation("setting", { keyPrefix: "channel" });
   const { loginUser, channel } = useAppSelector((store) => {
     return {
       loginUser: store.authData.user,
@@ -122,7 +124,7 @@ export default function Overview({ id = 0 }) {
       <AvatarUploader type="channel" url={channel?.icon} name={name} uploadImage={updateIcon} />
       <div className="inputs">
         <div className="input">
-          <Label htmlFor="name">Channel Name</Label>
+          <Label htmlFor="name">{t("name")}</Label>
           <Input
             disabled={readOnly}
             className="name"
@@ -131,11 +133,11 @@ export default function Overview({ id = 0 }) {
             value={name}
             name="name"
             id="name"
-            placeholder="Channel Name"
+            placeholder={t("name") || ""}
           />
         </div>
         <div className="input">
-          <Label htmlFor="desc">Channel Topic</Label>
+          <Label htmlFor="desc">{t("topic")}</Label>
           <Textarea
             disabled={readOnly}
             data-type="description"
@@ -144,13 +146,12 @@ export default function Overview({ id = 0 }) {
             rows={4}
             name="name"
             id="name"
-            placeholder="Let everyone know how to use this channel."
-          />
+            placeholder={t("topic_placeholder") || ""} />
         </div>
         {!readOnly && <div className="input">
-          <Label htmlFor="desc">Channel Visibility</Label>
+          <Label htmlFor="desc">{t("visibility")}</Label>
           <Radio
-            options={["Public", "Private"]}
+            options={[t("public"), t("private")]}
             values={["true", "false"]}
             value={String(channel.is_public)}
             onChange={(v: string) => {

src/routes/settingChannel/index.tsx

@@ -5,10 +5,12 @@ import StyledSettingContainer from "../../common/component/StyledSettingContaine
 import DeleteConfirmModal from "./DeleteConfirmModal";
 import useNavs from "./navs";
 import { useAppSelector } from "../../app/store";
+import { useTranslation } from "react-i18next";
 
 let from: string = "";
 
 export default function ChannelSetting() {
+  const { t } = useTranslation("setting");
   const { cid = 0 } = useParams();
   const { loginUser, channel } = useAppSelector((store) => {
     return {
@@ -52,11 +54,11 @@ export default function ChannelSetting() {
         navs={navs}
         dangers={[
           canLeave && {
-            title: "Leave Channel",
+            title: t("channel.leave"),
             handler: toggleLeaveConfirm
           },
           canDelete && {
-            title: "Delete Channel",
+            title: t("channel.delete"),
             handler: toggleDeleteConfirm
           }
         ]}

src/routes/settingChannel/navs.tsx

@@ -1,6 +1,7 @@
 import Overview from "./Overview";
 import ManageMembers from "../../common/component/ManageMembers";
 import { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
 
 export interface NavItem {
   name: string;
@@ -15,18 +16,19 @@ export interface Nav {
 }
 
 const useNavs = (cid: number): Nav[] => {
+  const { t } = useTranslation("setting");
   return [
     {
-      title: "General",
+      title: t("nav.general"),
       items: [
         {
           name: "overview",
-          title: "Overview",
+          title: t("nav.overview"),
           component: <Overview id={cid} />
         },
         {
           name: "members",
-          title: "Members",
+          title: t("nav.members"),
           component: <ManageMembers cid={cid} />
         }
       ]