Skip to content

Commit ae00ab0

Browse files
jc21jc21
committed
Fixes to lang selection now apply immediately
Moved lang list to separate file Cleaned up some lang workarounds
1 parent d2554c6 commit ae00ab0

File tree

18 files changed

+137
-117
lines changed

18 files changed

+137
-117
lines changed

‎frontend/src/components/Button/Button.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { ReactNode } from "react";
22

33
import cn from "classnames";
44

5-
export interface ButtonProps {
5+
export interface ButtonProps extends React.ButtonHTMLAttributes<any> {
66
/**
77
* Child elements within
88
*/
@@ -60,6 +60,7 @@ export const Button: React.FC<ButtonProps> = ({
6060
href,
6161
target,
6262
onClick,
63+
...rest
6364
}) => {
6465
const classes = [
6566
"btn",
@@ -99,7 +100,8 @@ export const Button: React.FC<ButtonProps> = ({
99100
<button
100101
className={cn(classes, className)}
101102
aria-label="Button"
102-
onClick={onClick}>
103+
onClick={onClick}
104+
{...rest}>
103105
{children}
104106
</button>
105107
);

‎frontend/src/components/Footer.tsx

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from "react";
22

33
import { useHealthState } from "context";
4-
import { FormattedMessage } from "react-intl";
4+
import { intl } from "locale";
55
import styled from "styled-components";
66

77
const FixedFooterWrapper = styled.div`
@@ -29,10 +29,10 @@ function Footer({ fixed }: Props) {
2929
target="_blank"
3030
rel="noreferrer"
3131
className="link-secondary">
32-
<FormattedMessage
33-
id="footer.userguide"
34-
defaultMessage="User Guide"
35-
/>
32+
{intl.formatMessage({
33+
id: "footer.userguide",
34+
defaultMessage: "User Guide",
35+
})}
3636
</a>
3737
</li>
3838
<li className="list-inline-item">
@@ -41,10 +41,10 @@ function Footer({ fixed }: Props) {
4141
target="_blank"
4242
rel="noreferrer"
4343
className="link-secondary">
44-
<FormattedMessage
45-
id="footer.changelog"
46-
defaultMessage="Change Log"
47-
/>
44+
{intl.formatMessage({
45+
id: "footer.changelog",
46+
defaultMessage: "Change Log",
47+
})}
4848
</a>
4949
</li>
5050
<li className="list-inline-item">
@@ -53,31 +53,33 @@ function Footer({ fixed }: Props) {
5353
target="_blank"
5454
rel="noreferrer"
5555
className="link-secondary">
56-
<FormattedMessage
57-
id="footer.github"
58-
defaultMessage="Github"
59-
/>
56+
{intl.formatMessage({
57+
id: "footer.github",
58+
defaultMessage: "Github",
59+
})}
6060
</a>
6161
</li>
6262
</ul>
6363
</div>
6464
<div className="col-12 col-lg-auto mt-3 mt-lg-0">
6565
<ul className="list-inline list-inline-dots mb-0">
6666
<li className="list-inline-item">
67-
<FormattedMessage
68-
id="footer.copyright"
69-
defaultMessage="Copyright © {year} jc21.com."
70-
values={{ year: new Date().getFullYear() }}
71-
/>{" "}
67+
{intl.formatMessage(
68+
{
69+
id: "footer.copyright",
70+
defaultMessage: "Copyright © {year} jc21.com",
71+
},
72+
{ year: new Date().getFullYear() },
73+
)}{" "}
7274
<a
7375
className="link-secondary"
7476
href="https://preview.tabler.io/"
7577
target="_blank"
7678
rel="noreferrer">
77-
<FormattedMessage
78-
id="footer.theme"
79-
defaultMessage="Theme by Tabler"
80-
/>
79+
{intl.formatMessage({
80+
id: "footer.theme",
81+
defaultMessage: "Theme by Tabler",
82+
})}
8183
</a>
8284
</li>
8385
<li className="list-inline-item">

‎frontend/src/components/LocalePicker.tsx

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React, { useState } from "react";
1+
import React, { useEffect, useRef, useState } from "react";
22

33
import { Button, Dropdown, Flag } from "components";
44
import { useLocaleState } from "context";
5-
import { changeLocale, getFlagCodeForLocale, getLocale, intl } from "locale";
5+
import { changeLocale, getFlagCodeForLocale, intl } from "locale";
66

77
export interface LocalPickerProps {
88
/**
@@ -15,27 +15,42 @@ export const LocalePicker: React.FC<LocalPickerProps> = ({
1515
onChange,
1616
...rest
1717
}) => {
18+
const dropRef = useRef(null);
1819
const { locale, setLocale } = useLocaleState();
19-
20-
// const [locale, setLocale] = useState(getLocale());
2120
const [localeShown, setLocaleShown] = useState(false);
2221

22+
const options = [
23+
["us", "en-US"],
24+
["de", "de-DE"],
25+
["ir", "fa-IR"],
26+
];
27+
2328
const handleOnChange = (e: any) => {
2429
changeLocale(e.currentTarget.rel);
2530
setLocale(e.currentTarget.rel);
2631
setLocaleShown(false);
2732
onChange && onChange(locale);
2833
};
2934

30-
const options = [
31-
["us", "en-US"],
32-
["de", "de-DE"],
33-
["ir", "fa-IR"],
34-
];
35+
const handleClickOutside = (event: any) => {
36+
if (
37+
dropRef.current &&
38+
// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
39+
!dropRef.current.contains(event.target)
40+
) {
41+
setLocaleShown(false);
42+
}
43+
};
44+
45+
useEffect(() => {
46+
document.addEventListener("mousedown", handleClickOutside);
47+
return () => document.removeEventListener("mousedown", handleClickOutside);
48+
}, []);
3549

3650
return (
37-
<div className="dropdown" {...rest}>
51+
<div className="dropdown" {...rest} ref={dropRef}>
3852
<Button
53+
type="button"
3954
shape="ghost"
4055
onClick={(e: any) => {
4156
setLocaleShown(!localeShown);

‎frontend/src/components/Router.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import React, { lazy, Suspense } from "react";
22

33
import { SiteWrapper, SuspenseLoader } from "components";
4-
import { useAuthState, useHealthState, UserProvider } from "context";
4+
import {
5+
useAuthState,
6+
useLocaleState,
7+
useHealthState,
8+
UserProvider,
9+
} from "context";
510
import { BrowserRouter, Switch, Route } from "react-router-dom";
611

712
const AccessLists = lazy(() => import("pages/AccessLists"));
@@ -17,6 +22,7 @@ const Users = lazy(() => import("pages/Users"));
1722
function Router() {
1823
const { health } = useHealthState();
1924
const { authenticated } = useAuthState();
25+
const { locale } = useLocaleState();
2026
const Spinner = <SuspenseLoader />;
2127

2228
if (health.loading) {
@@ -42,7 +48,7 @@ function Router() {
4248
return (
4349
<UserProvider>
4450
<BrowserRouter>
45-
<SiteWrapper>
51+
<SiteWrapper key={`locale-${locale}`}>
4652
<Suspense fallback={Spinner}>
4753
<Switch>
4854
<Route path="/hosts">

‎frontend/src/locale/IntlProvider.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,17 @@ import { createIntl, createIntlCache } from "react-intl";
33
import langDe from "./lang/de.json";
44
import langEn from "./lang/en.json";
55
import langFa from "./lang/fa.json";
6+
import langList from "./lang/lang-list.json";
67

78
const loadMessages = (locale?: string) => {
89
locale = locale || "en";
910
switch (locale.substr(0, 2)) {
1011
case "de":
11-
return Object.assign({}, langEn, langDe);
12+
return Object.assign({}, langList, langEn, langDe);
1213
case "fa":
13-
return Object.assign({}, langEn, langFa);
14+
return Object.assign({}, langList, langEn, langFa);
1415
default:
15-
return langEn;
16+
return Object.assign({}, langList, langEn);
1617
}
1718
};
1819

‎frontend/src/locale/src/de.json

Lines changed: 0 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -11,42 +11,12 @@
1111
"column.description": {
1212
"defaultMessage": "Beschreibung"
1313
},
14-
"column.id": {
15-
"defaultMessage": "ID"
16-
},
17-
"column.name": {
18-
"defaultMessage": "Name"
19-
},
20-
"dashboard.title": {
21-
"defaultMessage": "Dashboard"
22-
},
2314
"footer.changelog": {
2415
"defaultMessage": "Änderungen"
2516
},
26-
"footer.copyright": {
27-
"defaultMessage": "Copyright © {year} jc21.com."
28-
},
29-
"footer.github": {
30-
"defaultMessage": "Github"
31-
},
32-
"footer.theme": {
33-
"defaultMessage": "Theme by Tabler"
34-
},
3517
"footer.userguide": {
3618
"defaultMessage": "Handbuch"
3719
},
38-
"hosts.title": {
39-
"defaultMessage": "Hosts"
40-
},
41-
"locale-de-DE": {
42-
"defaultMessage": "Deutsch"
43-
},
44-
"locale-en-US": {
45-
"defaultMessage": "Englisch"
46-
},
47-
"locale-fa-IR": {
48-
"defaultMessage": "Persisch"
49-
},
5020
"login.login": {
5121
"defaultMessage": "Einloggen"
5222
},
@@ -68,18 +38,12 @@
6838
"user.email": {
6939
"defaultMessage": "E-Mail"
7040
},
71-
"user.name": {
72-
"defaultMessage": "Name"
73-
},
7441
"user.nickname": {
7542
"defaultMessage": "Benutzername"
7643
},
7744
"user.password": {
7845
"defaultMessage": "Passwort"
7946
},
80-
"users.admin": {
81-
"defaultMessage": "Administrator"
82-
},
8347
"users.standard": {
8448
"defaultMessage": "Normaler Benutzer"
8549
},

‎frontend/src/locale/src/en.json

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,6 @@
3838
"hosts.title": {
3939
"defaultMessage": "Hosts"
4040
},
41-
"locale-de-DE": {
42-
"defaultMessage": "Deutsche"
43-
},
44-
"locale-en-US": {
45-
"defaultMessage": "English"
46-
},
47-
"locale-fa-IR": {
48-
"defaultMessage": "Persian"
49-
},
5041
"login.login": {
5142
"defaultMessage": "Sign in"
5243
},

‎frontend/src/locale/src/lang-list.json

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"locale-de-DE": {
3+
"defaultMessage": "Deutsch"
4+
},
5+
"locale-en-US": {
6+
"defaultMessage": "English"
7+
},
8+
"locale-fa-IR": {
9+
"defaultMessage": "فارسی"
10+
}
11+
}

‎frontend/src/pages/AccessLists/index.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22

3-
import { FormattedMessage } from "react-intl";
3+
import { intl } from "locale";
44
import styled from "styled-components";
55

66
const Root = styled.div`
@@ -15,10 +15,10 @@ function AccessLists() {
1515
<div className="card-status-top bg-cyan" />
1616
<div className="card-header">
1717
<h3 className="card-title">
18-
<FormattedMessage
19-
id="accesslists.title"
20-
defaultMessage="Access Lists"
21-
/>
18+
{intl.formatMessage({
19+
id: "accesslists.title",
20+
defaultMessage: "Access Lists",
21+
})}
2222
</h3>
2323
</div>
2424
</div>

‎frontend/src/pages/AuditLog/index.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22

3-
import { FormattedMessage } from "react-intl";
3+
import { intl } from "locale";
44
import styled from "styled-components";
55

66
const Root = styled.div`
@@ -15,7 +15,10 @@ function AuditLog() {
1515
<div className="card-status-top bg-cyan" />
1616
<div className="card-header">
1717
<h3 className="card-title">
18-
<FormattedMessage id="auditlog.title" defaultMessage="Audit Log" />
18+
{intl.formatMessage({
19+
id: "auditlog.title",
20+
defaultMessage: "Audit Log",
21+
})}
1922
</h3>
2023
</div>
2124
</div>

0 commit comments

Comments
 (0)