Fixes to lang selection now apply immediately

Moved lang list to separate file
Cleaned up some lang workarounds

frontend/src/components/Button/Button.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from "react";
 
 import cn from "classnames";
 
-export interface ButtonProps {
+export interface ButtonProps extends React.ButtonHTMLAttributes<any> {
 	/**
 	 * Child elements within
 	 */
@@ -60,6 +60,7 @@ export const Button: React.FC<ButtonProps> = ({
 	href,
 	target,
 	onClick,
+	...rest
 }) => {
 	const classes = [
 		"btn",
@@ -99,7 +100,8 @@ export const Button: React.FC<ButtonProps> = ({
 		<button
 			className={cn(classes, className)}
 			aria-label="Button"
-			onClick={onClick}>
+			onClick={onClick}
+			{...rest}>
 			{children}
 		</button>
 	);

frontend/src/components/Footer.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { useHealthState } from "context";
-import { FormattedMessage } from "react-intl";
+import { intl } from "locale";
 import styled from "styled-components";
 
 const FixedFooterWrapper = styled.div`
@@ -29,10 +29,10 @@ function Footer({ fixed }: Props) {
 										target="_blank"
 										rel="noreferrer"
 										className="link-secondary">
-										<FormattedMessage
-											id="footer.userguide"
-											defaultMessage="User Guide"
-										/>
+										{intl.formatMessage({
+											id: "footer.userguide",
+											defaultMessage: "User Guide",
+										})}
 									</a>
 								</li>
 								<li className="list-inline-item">
@@ -41,10 +41,10 @@ function Footer({ fixed }: Props) {
 										target="_blank"
 										rel="noreferrer"
 										className="link-secondary">
-										<FormattedMessage
-											id="footer.changelog"
-											defaultMessage="Change Log"
-										/>
+										{intl.formatMessage({
+											id: "footer.changelog",
+											defaultMessage: "Change Log",
+										})}
 									</a>
 								</li>
 								<li className="list-inline-item">
@@ -53,10 +53,10 @@ function Footer({ fixed }: Props) {
 										target="_blank"
 										rel="noreferrer"
 										className="link-secondary">
-										<FormattedMessage
-											id="footer.github"
-											defaultMessage="Github"
-										/>
+										{intl.formatMessage({
+											id: "footer.github",
+											defaultMessage: "Github",
+										})}
 									</a>
 								</li>
 							</ul>
@@ -64,20 +64,22 @@ function Footer({ fixed }: Props) {
 						<div className="col-12 col-lg-auto mt-3 mt-lg-0">
 							<ul className="list-inline list-inline-dots mb-0">
 								<li className="list-inline-item">
-									<FormattedMessage
-										id="footer.copyright"
-										defaultMessage="Copyright © {year} jc21.com."
-										values={{ year: new Date().getFullYear() }}
-									/>{" "}
+									{intl.formatMessage(
+										{
+											id: "footer.copyright",
+											defaultMessage: "Copyright © {year} jc21.com",
+										},
+										{ year: new Date().getFullYear() },
+									)}{" "}
 									<a
 										className="link-secondary"
 										href="https://preview.tabler.io/"
 										target="_blank"
 										rel="noreferrer">
-										<FormattedMessage
-											id="footer.theme"
-											defaultMessage="Theme by Tabler"
-										/>
+										{intl.formatMessage({
+											id: "footer.theme",
+											defaultMessage: "Theme by Tabler",
+										})}
 									</a>
 								</li>
 								<li className="list-inline-item">

frontend/src/components/LocalePicker.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import { Button, Dropdown, Flag } from "components";
 import { useLocaleState } from "context";
-import { changeLocale, getFlagCodeForLocale, getLocale, intl } from "locale";
+import { changeLocale, getFlagCodeForLocale, intl } from "locale";
 
 export interface LocalPickerProps {
 	/**
@@ -15,11 +15,16 @@ export const LocalePicker: React.FC<LocalPickerProps> = ({
 	onChange,
 	...rest
 }) => {
+	const dropRef = useRef(null);
 	const { locale, setLocale } = useLocaleState();
-
-	// const [locale, setLocale] = useState(getLocale());
 	const [localeShown, setLocaleShown] = useState(false);
 
+	const options = [
+		["us", "en-US"],
+		["de", "de-DE"],
+		["ir", "fa-IR"],
+	];
+
 	const handleOnChange = (e: any) => {
 		changeLocale(e.currentTarget.rel);
 		setLocale(e.currentTarget.rel);
@@ -27,15 +32,25 @@ export const LocalePicker: React.FC<LocalPickerProps> = ({
 		onChange && onChange(locale);
 	};
 
-	const options = [
-		["us", "en-US"],
-		["de", "de-DE"],
-		["ir", "fa-IR"],
-	];
+	const handleClickOutside = (event: any) => {
+		if (
+			dropRef.current &&
+			// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
+			!dropRef.current.contains(event.target)
+		) {
+			setLocaleShown(false);
+		}
+	};
+
+	useEffect(() => {
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, []);
 
 	return (
-		<div className="dropdown" {...rest}>
+		<div className="dropdown" {...rest} ref={dropRef}>
 			<Button
+				type="button"
 				shape="ghost"
 				onClick={(e: any) => {
 					setLocaleShown(!localeShown);

frontend/src/components/Router.tsx

@@ -1,7 +1,12 @@
 import React, { lazy, Suspense } from "react";
 
 import { SiteWrapper, SuspenseLoader } from "components";
-import { useAuthState, useHealthState, UserProvider } from "context";
+import {
+	useAuthState,
+	useLocaleState,
+	useHealthState,
+	UserProvider,
+} from "context";
 import { BrowserRouter, Switch, Route } from "react-router-dom";
 
 const AccessLists = lazy(() => import("pages/AccessLists"));
@@ -17,6 +22,7 @@ const Users = lazy(() => import("pages/Users"));
 function Router() {
 	const { health } = useHealthState();
 	const { authenticated } = useAuthState();
+	const { locale } = useLocaleState();
 	const Spinner = <SuspenseLoader />;
 
 	if (health.loading) {
@@ -42,7 +48,7 @@ function Router() {
 	return (
 		<UserProvider>
 			<BrowserRouter>
-				<SiteWrapper>
+				<SiteWrapper key={`locale-${locale}`}>
 					<Suspense fallback={Spinner}>
 						<Switch>
 							<Route path="/hosts">