olly/queueful
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working translation

Browse Source
This commit is contained in:
Olly Hearn
2024-04-10 20:20:40 +03:00
parent 5c8d6d9d42
commit 8b8124d58d
9 changed files with 137 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/app/src/components/AuthModal.tsx
View File

@ -10,6 +10,7 @@ import {
} from "../slice/AuthApi";
import { MessageContext } from "../App";
import { store, updateToken, updateUser } from "../config/store";
import tr from "../config/translation";
const AuthModal = (props: {
open: boolean;
@ -43,7 +44,7 @@ const AuthModal = (props: {
})
.then(() => refetch())
.then(() => props.setOpen(false))
.catch(() => messageApi.error("Login failed!"));
.catch(() => messageApi.error(tr("Login failed!")));
};
const submitRegisterForm = (formData: {
@ -55,17 +56,17 @@ const AuthModal = (props: {
registerUser(formData)
.unwrap()
.then(() => props.setOpen(false))
.catch(() => messageApi.error("Registration failed!"));
.catch(() => messageApi.error(tr("Registration failed!")));
};
const items: MenuProps["items"] = [
{
label: "Log In",
label: tr("Log in"),
key: "login",
icon: <KeyOutlined />,
},
{
label: "Register",
label: tr("Register"),
key: "register",
icon: <UserAddOutlined />,
},
@ -79,7 +80,7 @@ const AuthModal = (props: {
current === "register" && registerForm.submit();
current === "login" && loginForm.submit();
}}
okText={current === "login" ? "Log In" : "Register"}
okText={current === "login" ? tr("Log in") : tr("Register")}
confirmLoading={isLoggingIn}
>
<Spin spinning={isLoggingIn || isRegistering}>
@ -99,26 +100,26 @@ const AuthModal = (props: {
>
<Form.Item
name="username"
label="Username"
label={tr("Username")}
rules={[
{
required: true,
message: "Please input your Username!",
message: tr("Please input your Username!"),
},
]}
>
<Input />
</Form.Item>
<Form.Item name="name" label="Display name">
<Form.Item name="name" label={tr("Display name")}>
<Input />
</Form.Item>
<Form.Item
name="password"
label="Password"
label={tr("Password")}
rules={[
{
required: true,
message: "Please input your password!",
message: tr("Please input your password!"),
},
]}
>
@ -126,11 +127,11 @@ const AuthModal = (props: {
</Form.Item>
<Form.Item
name="password2"
label="Repeat password"
label={tr("Repeat password")}
rules={[
{
required: true,
message: "Please confirm your password!",
message: tr("Please confirm your Password!"),
},
({ getFieldValue }) => ({
validator(_, value) {
@ -139,7 +140,7 @@ const AuthModal = (props: {
}
return Promise.reject(
new Error(
"The new password that you entered do not match!"
tr("The new password that you entered do not match!")
)
);
},
@ -158,11 +159,11 @@ const AuthModal = (props: {
>
<Form.Item
name="username"
label="Username"
label={tr("Username")}
rules={[
{
required: true,
message: "Please input your Username!",
message: tr("Please input your Username!"),
},
]}
>
@ -170,11 +171,11 @@ const AuthModal = (props: {
</Form.Item>
<Form.Item
name="password"
label="Password"
label={tr("Password")}
rules={[
{
required: true,
message: "Please input your Password!",
message: tr("Please input your Password!"),
},
]}
>

7
frontend/app/src/components/HeaderComponent.tsx
View File

@ -5,6 +5,7 @@ import AuthModal from "./AuthModal";
import "./styles.css";
import { StorePrototype, logOut, store } from "../config/store";
import { useSelector } from "react-redux";
import tr from "../config/translation";
const { Header } = Layout;
@ -18,9 +19,9 @@ const HeaderComponent = () => {
(state: StorePrototype) => state.auth.user
);
const userMenuItems: MenuProps["userMenuItems"] = [
const userMenuItems: MenuProps["items"] = [
{
label: "Log out",
label: tr("Log out"),
key: "logout",
icon: <LogoutOutlined />,
onClick: () => store.dispatch(logOut()),
@ -39,7 +40,7 @@ const HeaderComponent = () => {
{user.username}
</Popover>
) : (
"Log In"
tr("Log in")
),
key: "login",
icon: <UserOutlined />,

26
frontend/app/src/config/store.ts
View File

@ -17,9 +17,18 @@ const initialAuthDataState: AuthDataType = {
user: null,
};
export type SettingsType = {
language: string | null;
};
const initialSettingsState: SettingsType = {
language: null,
};
export type StorePrototype = {
AuthApi: ReducerType;
auth: AuthDataType;
settings: SettingsType;
};
export const updateToken = createAction<string>("auth/updateToken");
@ -27,6 +36,9 @@ export const getLocalToken = createAction("auth/getLocalToken");
export const updateUser = createAction<User>("auth/updateUser");
export const logOut = createAction("auth/logOut");
export const setLanguage = createAction<string>("settings/setLanguage");
export const loadLanguage = createAction("settings/loadLanguage");
export const store = configureStore({
reducer: {
// Add the generated reducer as a specific top-level slice
@ -51,6 +63,20 @@ export const store = configureStore({
state.user = null;
});
}),
settings: createReducer(initialSettingsState, (builder) => {
builder.addCase(setLanguage, (state, action) => {
state.language = action.payload || "en";
localStorage.setItem("language", action.payload || "en");
});
builder.addCase(loadLanguage, (state) => {
const language: string | null = localStorage.getItem("language");
if (language) {
state.language = language;
} else {
state.language = "en";
}
});
}),
},
// Adding the api middleware enables caching, invalidation, polling,
// and other useful features of `rtk-query`.

21
frontend/app/src/config/translation.ts Normal file
View File

@ -0,0 +1,21 @@
import trMapJson from "./translationMap.json";
import { store } from "./store";
const trMap: unknown = trMapJson;
const tr = (phrase: string): string => {
const currentLanguage = store.getState().settings.language;
if (!currentLanguage || currentLanguage === "en") {
return phrase;
}
return (
((trMap &&
typeof trMap === "object" &&
trMap[phrase as keyof object] &&
trMap[phrase as keyof object][
currentLanguage as keyof object
]) as string) || phrase
);
};
export default tr;

53
frontend/app/src/config/translationMap.json Normal file
View File

@ -0,0 +1,53 @@
{
"Queuing has never been so simple": {
"ru": "Организация очередей еще никогда не была настолько простой"
},
"Log in": {
"ru": "Войти"
},
"Log out": {
"ru": "Выйти"
},
"Register": {
"ru": "Зарегистрироваться"
},
"Username": {
"ru": "Логин"
},
"Password": {
"ru": "Пароль"
},
"Display name": {
"ru": "Отображаемое имя"
},
"Repeat password": {
"ru": "Повторите пароль"
},
"Cancel": {
"ru": "Отмена"
},
"Join a queue": {
"ru": "Присоединиться к очереди"
},
"Take a tour": {
"ru": "Взглянуть на функционал"
},
"Please input your Username!": {
"ru": "Пожалуйста, введите ваш Логин!"
},
"Please input your Password!": {
"ru": "Пожалуйста, введите ваш Пароль!"
},
"Please confirm your password!": {
"ru": "Пожалуйста, подтвердите ваш пароль!"
},
"The new password that you entered do not match!": {
"ru": "Пароли не совпадают!"
},
"Registration failed!": {
"ru": "Регистрация не удалась!"
},
"Login failed!": {
"ru": "Вход не удался!"
}
}

10
frontend/app/src/index.tsx
View File

@ -1,10 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById('root')!);
const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
</React.StrictMode>
);

6
frontend/app/src/pages/AppRoutes.tsx
View File

@ -1,11 +1,11 @@
import React, { useEffect } from "react";
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import MainPage from "./MainPage";
import { useGetUserQuery } from "../slice/AuthApi";
import { getLocalToken, store, updateUser } from "../config/store";
import { getLocalToken, loadLanguage, store } from "../config/store";
const AppRoutes = () => {
store.dispatch(getLocalToken());
store.dispatch(loadLanguage());
return (
<BrowserRouter>

9
frontend/app/src/pages/MainPage.tsx
View File

@ -2,15 +2,18 @@ import React from "react";
import "./styles.css";
import logoSquare from "../../static/logo-square.png";
import { Button } from "antd";
import tr from "../config/translation";
const MainPage = () => {
return (
<div className="card main">
<img src={logoSquare} alt="logo" className="image" />
<p style={{ fontSize: "2rem" }}>Queuing has never been so simple</p>
<p style={{ fontSize: "2rem" }}>
{tr("Queuing has never been so simple")}
</p>
<div className="button-box">
<Button>Join a queue</Button>
<Button>Take a tour</Button>
<Button>{tr("Join a queue")}</Button>
<Button>{tr("Take a tour")}</Button>
</div>
</div>
);

1
frontend/app/src/pages/styles.css
View File

@ -5,6 +5,7 @@
}
.main {
font-family: "Comfortaa", sans-serif;
display: flex;
flex-flow: column;
justify-items: center;