feat: i18n
This commit is contained in:
Tristan Yang
@@ -0,0 +1,138 @@
|
||||
// import { useState, useEffect, ChangeEvent } from "react";
|
||||
import styled from "styled-components";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import StyledRadio from "../../../common/component/styled/Radio";
|
||||
import { useAppSelector } from "../../../app/store";
|
||||
import { LoginConfig, WhoCanSignUp } from "../../../types/server";
|
||||
import useConfig from "../../../common/hook/useConfig";
|
||||
import Server from './server';
|
||||
import Language from './language';
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
position: relative;
|
||||
width: 512px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
.logo {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
.preview {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
.upload {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
.tip {
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #374151;
|
||||
}
|
||||
}
|
||||
}
|
||||
.inputs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
margin-bottom: 64px;
|
||||
.input {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
> .setting {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
> .label {
|
||||
font-weight: 500;
|
||||
}
|
||||
> .tip {
|
||||
font-weight: 400;
|
||||
color: #667085;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
> form {
|
||||
margin-top: 16px;
|
||||
width: 512px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default function Overview() {
|
||||
const { t } = useTranslation("setting");
|
||||
const { loginUser } = useAppSelector((store) => {
|
||||
return { loginUser: store.authData.user };
|
||||
});
|
||||
|
||||
|
||||
const { values: loginConfig, updateConfig: updateLoginConfig } = useConfig("login");
|
||||
|
||||
|
||||
const handleUpdateWhoCanSignUp = (value: WhoCanSignUp) => {
|
||||
updateLoginConfig({ ...loginConfig, who_can_sign_up: value });
|
||||
};
|
||||
|
||||
const handleGuestToggle = (v: "true" | "false") => {
|
||||
const guest = v === "true";
|
||||
updateLoginConfig({ ...loginConfig, guest });
|
||||
};
|
||||
|
||||
|
||||
|
||||
if (!loginConfig) return null;
|
||||
|
||||
const { who_can_sign_up: whoCanSignUp, guest } = loginConfig as LoginConfig;
|
||||
const isAdmin = loginUser?.is_admin;
|
||||
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<Server />
|
||||
{isAdmin && (
|
||||
<>
|
||||
<div className="setting">
|
||||
<p className="label">{t("overview.sign_up.title")}</p>
|
||||
<p className="tip">{t("overview.sign_up.desc")}</p>
|
||||
<StyledRadio
|
||||
options={[t("overview.sign_up.everyone"), t("overview.sign_up.invite")]}
|
||||
values={["EveryOne", "InvitationOnly"]}
|
||||
value={whoCanSignUp}
|
||||
onChange={(v: WhoCanSignUp) => {
|
||||
handleUpdateWhoCanSignUp(v);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="setting">
|
||||
<p className="label">{t("overview.guest_mode.title")}</p>
|
||||
<p className="tip">
|
||||
<span className="txt">
|
||||
{t("overview.guest_mode.desc")}
|
||||
</span>
|
||||
</p>
|
||||
<StyledRadio
|
||||
options={[t("overview.guest_mode.enable"), t("overview.guest_mode.disable")]}
|
||||
values={["true", "false"]}
|
||||
value={String(guest)}
|
||||
onChange={(v) => {
|
||||
console.log("wtff", v);
|
||||
|
||||
handleGuestToggle(v);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<Language />
|
||||
</StyledWrapper>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
// import React from 'react'
|
||||
import dayjs from 'dayjs';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import StyledRadio from "../../../common/component/styled/Radio";
|
||||
|
||||
// type Props = {}
|
||||
|
||||
const Index = () => {
|
||||
const { t, i18n } = useTranslation("setting");
|
||||
const handleGuestToggle = (v: "zh" | "en") => {
|
||||
i18n.changeLanguage(v);
|
||||
dayjs.locale(v === "zh" ? "zh-cn" : "en");
|
||||
};
|
||||
return (
|
||||
<div className="setting">
|
||||
<p className="label">{t("overview.lang.title")}</p>
|
||||
<p className="tip">
|
||||
<span className="txt">
|
||||
{t("overview.lang.desc")}
|
||||
</span>
|
||||
</p>
|
||||
<StyledRadio
|
||||
options={[t("overview.lang.en"), t("overview.lang.zh")]}
|
||||
values={["en", "zh"]}
|
||||
value={i18n.language.split("-")[0]}
|
||||
onChange={(v) => {
|
||||
console.log("wtff", v);
|
||||
|
||||
handleGuestToggle(v);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Index;
|
||||
@@ -0,0 +1,114 @@
|
||||
import { ChangeEvent, useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import toast from "react-hot-toast";
|
||||
import { useUpdateLogoMutation, useUpdateServerMutation } from '../../../app/services/server';
|
||||
import LogoUploader from "../../../common/component/AvatarUploader";
|
||||
import Input from "../../../common/component/styled/Input";
|
||||
import Label from "../../../common/component/styled/Label";
|
||||
import Textarea from "../../../common/component/styled/Textarea";
|
||||
import SaveTip from '../../../common/component/SaveTip';
|
||||
import { useAppSelector } from '../../../app/store';
|
||||
|
||||
|
||||
const Index = () => {
|
||||
const { t } = useTranslation("setting");
|
||||
const { loginUser, server } = useAppSelector((store) => {
|
||||
return { loginUser: store.authData.user, server: store.server };
|
||||
});
|
||||
|
||||
const [uploadLogo, { isSuccess: uploadSuccess }] = useUpdateLogoMutation();
|
||||
const [updateServer] = useUpdateServerMutation();
|
||||
const [changed, setChanged] = useState(false);
|
||||
const [serverValues, setServerValues] = useState<typeof server>(server);
|
||||
const handleChange = (evt: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const newValue = evt.target.value;
|
||||
const { type = "" } = evt.target.dataset;
|
||||
setServerValues((prev) => {
|
||||
return { ...prev, [type]: newValue };
|
||||
});
|
||||
};
|
||||
const handleUpdateServer = () => {
|
||||
const { name, description } = serverValues;
|
||||
updateServer({ name, description });
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setServerValues(server);
|
||||
};
|
||||
useEffect(() => {
|
||||
if (server) {
|
||||
setServerValues(server);
|
||||
}
|
||||
}, [server]);
|
||||
useEffect(() => {
|
||||
if (uploadSuccess) {
|
||||
toast.success("Update logo successfully!");
|
||||
}
|
||||
}, [uploadSuccess]);
|
||||
useEffect(() => {
|
||||
if (server && serverValues) {
|
||||
const { name, description } = serverValues;
|
||||
const { name: oName, description: oDescription } = server;
|
||||
if (oName !== name || oDescription !== description) {
|
||||
setChanged(true);
|
||||
} else {
|
||||
setChanged(false);
|
||||
}
|
||||
}
|
||||
}, [server, serverValues]);
|
||||
const { name, description, logo } = serverValues;
|
||||
const isAdmin = loginUser?.is_admin;
|
||||
if (!loginUser || !serverValues) return null;
|
||||
return (
|
||||
<>
|
||||
<div className="logo">
|
||||
<div className="preview">
|
||||
<LogoUploader
|
||||
disabled={!isAdmin}
|
||||
url={uploadSuccess ? `${logo}?t=${+new Date()}` : logo}
|
||||
name={name}
|
||||
uploadImage={uploadLogo}
|
||||
/>
|
||||
</div>
|
||||
{isAdmin && (
|
||||
<div className="upload">
|
||||
<div className="tip">
|
||||
{t("overview.upload_desc")}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="inputs">
|
||||
<div className="input">
|
||||
<Label htmlFor="name">{t("overview.name")}</Label>
|
||||
<Input
|
||||
disabled={!isAdmin}
|
||||
data-type="name"
|
||||
onChange={handleChange}
|
||||
value={name}
|
||||
name="name"
|
||||
id="name"
|
||||
placeholder="Server Name"
|
||||
/>
|
||||
</div>
|
||||
<div className="input">
|
||||
<Label htmlFor="desc">{t("overview.desc")}</Label>
|
||||
<Textarea
|
||||
disabled={!isAdmin}
|
||||
data-type="description"
|
||||
onChange={handleChange}
|
||||
value={description ?? ""}
|
||||
rows={4}
|
||||
name="name"
|
||||
id="name"
|
||||
placeholder="Tell the world a bit about this server"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{changed && <SaveTip saveHandler={handleUpdateServer} resetHandler={handleReset} />}
|
||||
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Index;
|
||||
Reference in New Issue
Block a user