Fix up locales, optimised some functions

frontend/check-locales.cjs

@@ -8,14 +8,16 @@
 
 const allLocales = [
 	["en", "en-US"],
-	["es", "es-ES"],
 	["de", "de-DE"],
+	["es", "es-ES"],
+	["it", "it-IT"],
+	["ja", "ja-JP"],
+	["nl", "nl-NL"],
+	["pl", "pl-PL"],
 	["ru", "ru-RU"],
 	["sk", "sk-SK"],
+	["vi", "vi-VN"],
 	["zh", "zh-CN"],
-	["pl", "pl-PL"],
-	["it", "it-IT"],
-	["nl", "nl-NL"],
 ];
 
 const ignoreUnused = [

frontend/src/components/LocalePicker.tsx

@@ -27,25 +27,24 @@ function LocalePicker({ menuAlign = "start" }: Props) {
 			<button type="button" className={cns} data-bs-toggle="dropdown">
 				<Flag countryCode={getFlagCodeForLocale(locale)} />
 			</button>
-			<div className={cn("dropdown-menu", {
+			<div
-				"dropdown-menu-end": menuAlign === "end",
+				className={cn("dropdown-menu", {
-			})}
+					"dropdown-menu-end": menuAlign === "end",
-			>
-				{localeOptions.map((item) => {
-					return (
-						<a
-							className="dropdown-item"
-							href={`/locale/${item[0]}`}
-							key={`locale-${item[0]}`}
-							onClick={(e) => {
-								e.preventDefault();
-								changeTo(item[0]);
-							}}
-						>
-							<Flag countryCode={getFlagCodeForLocale(item[0])} /> <T id={`locale-${item[1]}`} />
-						</a>
-					);
 				})}
+			>
+				{localeOptions.map((item: any) => (
+					<a
+						className="dropdown-item"
+						href={`/locale/${item[0]}`}
+						key={`locale-${item[0]}`}
+						onClick={(e) => {
+							e.preventDefault();
+							changeTo(item[0]);
+						}}
+					>
+						<Flag countryCode={getFlagCodeForLocale(item[0])} /> <T id={`locale-${item[1]}`} />
+					</a>
+				))}
 			</div>
 		</div>
 	);

frontend/src/locale/IntlProvider.tsx

@@ -16,82 +16,43 @@ import langZh from "./lang/zh.json";
 // not the country code
 // Remember when adding to this list, also update check-locales.js script
 const localeOptions = [
-	["en", "en-US"],
+	["en", "en-US", langEn],
-	["de", "de-DE"],
+	["de", "de-DE", langDe],
-	["es", "es-ES"],
+	["es", "es-ES", langEs],
-	["ja", "ja-JP"],
+	["ja", "ja-JP", langJa],
-	["ru", "ru-RU"],
+	["it", "it-IT", langIt],
-	["sk", "sk-SK"],
+	["nl", "nl-NL", langNl],
-	["zh", "zh-CN"],
+	["pl", "pl-PL", langPl],
-	["pl", "pl-PL"],
+	["ru", "ru-RU", langRu],
-	["it", "it-IT"],
+	["sk", "sk-SK", langSk],
-	["vi", "vi-VN"],
+	["vi", "vi-VN", langVi],
-	["nl", "nl-NL"],
+	["zh", "zh-CN", langZh],
 ];
 
 const loadMessages = (locale?: string): typeof langList & typeof langEn => {
-	const thisLocale = locale || "en";
+	const thisLocale = (locale || "en").slice(0, 2);
-	switch (thisLocale.slice(0, 2)) {
+
-		case "de":
+	// ensure this lang exists in localeOptions above, otherwise fallback to en
-			return Object.assign({}, langList, langEn, langDe);
+	if (thisLocale === "en" || !localeOptions.some(([code]) => code === thisLocale)) {
-		case "es":
+		return Object.assign({}, langList, langEn);
-			return Object.assign({}, langList, langEn, langEs);
-		case "ja":
-			return Object.assign({}, langList, langEn, langJa);
-		case "ru":
-			return Object.assign({}, langList, langEn, langRu);
-		case "sk":
-			return Object.assign({}, langList, langEn, langSk);
-		case "zh":
-			return Object.assign({}, langList, langEn, langZh);
-		case "pl":
-			return Object.assign({}, langList, langEn, langPl);
-		case "it":
-			return Object.assign({}, langList, langEn, langIt);
-		case "vi":
-			return Object.assign({}, langList, langEn, langVi);
-		case "nl":
-			return Object.assign({}, langList, langEn, langNl);
-		default:
-			return Object.assign({}, langList, langEn);
 	}
+
+	return Object.assign({}, langList, langEn, localeOptions.find(([code]) => code === thisLocale)?.[2]);
 };
 
 const getFlagCodeForLocale = (locale?: string) => {
-	switch (locale) {
+	const thisLocale = (locale || "en").slice(0, 2);
-		case "es-ES":
+
-		case "es":
+	// only add to this if your flag is different from the locale code
-			return "ES";
+	const specialCases: Record<string, string> = {
-		case "de-DE":
+		ja: "jp", // Japan
-		case "de":
+		zh: "cn", // China
-			return "DE";
+	};
-		case "ja-JP":
+
-		case "ja":
+	if (specialCases[thisLocale]) {
-			return "JP";
+		return specialCases[thisLocale].toUpperCase();
-		case "ru-RU":
-		case "ru":
-			return "RU";
-		case "sk-SK":
-		case "sk":
-			return "SK";
-		case "zh":
-		case "zh-CN":
-			return "CN";
-		case "pl":
-		case "pl-PL":
-			return "PL";
-		case "it":
-		case "it-IT":
-			return "IT";
-		case "vi":
-		case "vi-VN":
-			return "VN";
-		case "nl":
-		case "nl-NL":
-			return "NL";
-		default:
-			return "EN";
 	}
+	return thisLocale.toUpperCase();
 };
 
 const getLocale = (short = false) => {
@@ -112,10 +73,7 @@ const getLocale = (short = false) => {
 const cache = createIntlCache();
 
 const initialMessages = loadMessages(getLocale());
-let intl = createIntl(
+let intl = createIntl({ locale: getLocale(), messages: initialMessages }, cache);
-	{ locale: getLocale(), messages: initialMessages },
-	cache,
-);
 
 const changeLocale = (locale: string): void => {
 	const messages = loadMessages(locale);
@@ -155,12 +113,6 @@ const T = ({
 	);
 };
 
-export {
+console.log("L:", localeOptions);
-	localeOptions,
+
-	getFlagCodeForLocale,
+export { localeOptions, getFlagCodeForLocale, getLocale, createIntl, changeLocale, intl, T };
-	getLocale,
-	createIntl,
-	changeLocale,
-	intl,
-	T,
-};

frontend/src/locale/src/en.json

@@ -1,7 +1,4 @@
 {
-	"aaccess-list.rule-source.placeholder": {
-		"defaultMessage": "192.168.1.100 or 192.168.1.0/24 or 2001:0db8::/32"
-	},
 	"access-list": {
 		"defaultMessage": "Access List"
 	},
@@ -26,6 +23,9 @@
 	"access-list.public.subtitle": {
 		"defaultMessage": "No basic auth required"
 	},
+	"access-list.rule-source.placeholder": {
+		"defaultMessage": "192.168.1.100 or 192.168.1.0/24 or 2001:0db8::/32"
+	},
 	"access-list.satisfy-any": {
 		"defaultMessage": "Satisfy Any"
 	},