feat: language picker
This commit is contained in:
parent
623d9735e5
commit
62cd8b57d1
@ -1,5 +1,9 @@
|
|||||||
import { type ReactNode } from "react";
|
import { type ReactNode } from "react";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
import { IntlProvider as ReactIntlProvider } from "react-intl";
|
import { IntlProvider as ReactIntlProvider } from "react-intl";
|
||||||
|
|
||||||
|
import { RootState } from "State/Store";
|
||||||
|
|
||||||
import enMessages from "translations/en.json";
|
import enMessages from "translations/en.json";
|
||||||
import esMessages from "translations/es.json";
|
import esMessages from "translations/es.json";
|
||||||
import zhMessages from "translations/zh.json";
|
import zhMessages from "translations/zh.json";
|
||||||
@ -37,10 +41,8 @@ const getMessages = (locale: string) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const IntlProvider = ({ children }: { children: ReactNode }) => {
|
export const IntlProvider = ({ children }: { children: ReactNode }) => {
|
||||||
const getLocale = () => {
|
const lang = useSelector((s: RootState) => s.login.preferences.language);
|
||||||
return (navigator.languages && navigator.languages[0]) || navigator.language || DEFAULT_LOCALE;
|
const locale = lang ?? getLocale();
|
||||||
};
|
|
||||||
const locale = getLocale();
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ReactIntlProvider locale={locale} messages={getMessages(locale)}>
|
<ReactIntlProvider locale={locale} messages={getMessages(locale)}>
|
||||||
@ -48,3 +50,7 @@ export const IntlProvider = ({ children }: { children: ReactNode }) => {
|
|||||||
</ReactIntlProvider>
|
</ReactIntlProvider>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const getLocale = () => {
|
||||||
|
return (navigator.languages && navigator.languages[0]) || navigator.language || DEFAULT_LOCALE;
|
||||||
|
};
|
||||||
|
@ -21,6 +21,34 @@ const PreferencesPage = () => {
|
|||||||
<FormattedMessage {...messages.Preferences} />
|
<FormattedMessage {...messages.Preferences} />
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
|
<div className="card flex">
|
||||||
|
<div className="flex f-col f-grow">
|
||||||
|
<div>
|
||||||
|
<FormattedMessage defaultMessage="Language" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<select
|
||||||
|
value={perf.language}
|
||||||
|
onChange={e =>
|
||||||
|
dispatch(
|
||||||
|
setPreferences({
|
||||||
|
...perf,
|
||||||
|
language: e.target.value,
|
||||||
|
} as UserPreferences)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
style={{ textTransform: "capitalize" }}>
|
||||||
|
{["en", "ja", "es", "hu", "zh", "fr", "ar"].sort().map(a => (
|
||||||
|
<option value={a}>
|
||||||
|
{new Intl.DisplayNames([a], {
|
||||||
|
type: "language",
|
||||||
|
}).of(a)}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div className="card flex">
|
<div className="card flex">
|
||||||
<div className="flex f-col f-grow">
|
<div className="flex f-col f-grow">
|
||||||
<div>
|
<div>
|
||||||
|
@ -21,6 +21,11 @@ export interface NotificationRequest {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export interface UserPreferences {
|
export interface UserPreferences {
|
||||||
|
/**
|
||||||
|
* User selected language
|
||||||
|
*/
|
||||||
|
language?: "en" | "ja" | "es" | "hu" | "zh" | "fr" | "ar";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Enable reactions / reposts / zaps
|
* Enable reactions / reposts / zaps
|
||||||
*/
|
*/
|
||||||
|
@ -786,6 +786,9 @@
|
|||||||
"xmcVZ0": {
|
"xmcVZ0": {
|
||||||
"defaultMessage": "Search"
|
"defaultMessage": "Search"
|
||||||
},
|
},
|
||||||
|
"y1Z3or": {
|
||||||
|
"defaultMessage": "Language"
|
||||||
|
},
|
||||||
"yCmnnm": {
|
"yCmnnm": {
|
||||||
"defaultMessage": "Read global from",
|
"defaultMessage": "Read global from",
|
||||||
"description": "Label for reading global feed from specific relays"
|
"description": "Label for reading global feed from specific relays"
|
||||||
|
@ -256,6 +256,7 @@
|
|||||||
"xKflGN": "{username}''s Follows on Nostr",
|
"xKflGN": "{username}''s Follows on Nostr",
|
||||||
"xbVgIm": "Automatically load media",
|
"xbVgIm": "Automatically load media",
|
||||||
"xmcVZ0": "Search",
|
"xmcVZ0": "Search",
|
||||||
|
"y1Z3or": "Language",
|
||||||
"yCmnnm": "Read global from",
|
"yCmnnm": "Read global from",
|
||||||
"zFegDD": "Contact",
|
"zFegDD": "Contact",
|
||||||
"zINlao": "Owner",
|
"zINlao": "Owner",
|
||||||
|
Loading…
Reference in New Issue
Block a user