Dynamically fetch language bundles at runtime.

components/common/Calendar.js

@@ -27,7 +27,7 @@ import styles from './Calendar.module.css';
 import Icon from './Icon';
 
 export default function Calendar({ date, minDate, maxDate, onChange }) {
-  const [locale] = useLocale();
+  const { locale } = useLocale();
   const [selectMonth, setSelectMonth] = useState(false);
   const [selectYear, setSelectYear] = useState(false);
 

components/common/DateFilter.js

@@ -55,7 +55,7 @@ const filterOptions = [
 ];
 
 function DateFilter({ value, startDate, endDate, onChange, className }) {
-  const [locale] = useLocale();
+  const { locale } = useLocale();
   const [showPicker, setShowPicker] = useState(false);
   const displayValue =
     value === 'custom' ? (
@@ -102,7 +102,7 @@ function DateFilter({ value, startDate, endDate, onChange, className }) {
 }
 
 const CustomRange = ({ startDate, endDate, onClick }) => {
-  const [locale] = useLocale();
+  const { locale } = useLocale();
 
   function handleClick(e) {
     e.stopPropagation();

components/common/RefreshButton.js

@@ -12,7 +12,7 @@ import useLocale from 'hooks/useLocale';
 
 function RefreshButton({ websiteId }) {
   const dispatch = useDispatch();
-  const [locale] = useLocale();
+  const { locale } = useLocale();
   const [dateRange] = useDateRange(websiteId);
   const [loading, setLoading] = useState(false);
   const completed = useSelector(state => state.queries[`/api/website/${websiteId}/stats`]);

components/common/WorldMap.js

@@ -24,7 +24,7 @@ function WorldMap({ data, className }) {
     }),
     [theme],
   );
-  const [locale] = useLocale();
+  const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
 
   function getFillColor(code) {

components/layout/Footer.js

@@ -9,7 +9,7 @@ import { rtlLocales } from 'lib/lang';
 
 export default function Footer() {
   const { current } = useVersion();
-  const [locale] = useLocale();
+  const { locale } = useLocale();
 
   return (
     <footer className="container" dir={rtlLocales.includes(locale) ? 'rtl' : 'ltr'}>

components/layout/Header.js

@@ -19,7 +19,7 @@ import Bars from 'assets/bars.svg';
 export default function Header() {
   const user = useSelector(state => state.user);
   const [active, setActive] = useState(false);
-  const [locale] = useLocale();
+  const { locale } = useLocale();
 
   function handleClick() {
     setActive(state => !state);

components/layout/Layout.js

@@ -6,7 +6,7 @@ import useLocale from 'hooks/useLocale';
 import { rtlLocales } from 'lib/lang';
 
 export default function Layout({ title, children, header = true, footer = true }) {
-  const [locale] = useLocale();
+  const { locale } = useLocale();
   const dir = rtlLocales.includes(locale) ? 'rtl' : 'ltr';
 
   return (

components/metrics/BarChart.js

@@ -27,7 +27,7 @@ export default function BarChart({
   const canvas = useRef();
   const chart = useRef();
   const [tooltip, setTooltip] = useState(null);
-  const [locale] = useLocale();
+  const { locale } = useLocale();
   const [theme] = useTheme();
   const forceUpdate = useForceUpdate();
 

components/metrics/CountriesTable.js

@@ -6,7 +6,7 @@ import useCountryNames from 'hooks/useCountryNames';
 import useLocale from 'hooks/useLocale';
 
 export default function CountriesTable({ websiteId, onDataLoad, ...props }) {
-  const [locale] = useLocale();
+  const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
 
   function renderLabel({ x }) {

components/metrics/Legend.js

@@ -6,7 +6,7 @@ import styles from './Legend.module.css';
 import useForceUpdate from '../../hooks/useForceUpdate';
 
 export default function Legend({ chart }) {
-  const [locale] = useLocale();
+  const { locale } = useLocale();
   const forceUpdate = useForceUpdate();
 
   function handleClick(index) {

components/metrics/RealtimeLog.js

@@ -31,7 +31,7 @@ const TYPE_ICONS = {
 
 export default function RealtimeLog({ data, websites, websiteId }) {
   const intl = useIntl();
-  const [locale] = useLocale();
+  const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
   const [filter, setFilter] = useState(TYPE_ALL);
 

components/pages/RealtimeDashboard.js

@@ -29,7 +29,7 @@ function filterWebsite(data, id) {
 }
 
 export default function RealtimeDashboard() {
-  const [locale] = useLocale();
+  const { locale } = useLocale();
   const countryNames = useCountryNames(locale);
   const [data, setData] = useState();
   const [websiteId, setWebsiteId] = useState(0);

components/settings/DateRangeSetting.js

@@ -9,7 +9,7 @@ import styles from './DateRangeSetting.module.css';
 import useLocale from 'hooks/useLocale';
 
 export default function DateRangeSetting() {
-  const [locale] = useLocale();
+  const { locale } = useLocale();
   const [dateRange, setDateRange] = useDateRange();
   const { startDate, endDate, value } = dateRange;
 

components/settings/LanguageButton.js

@@ -1,15 +1,16 @@
 import React from 'react';
-import { menuOptions } from 'lib/lang';
+import { languages } from 'lib/lang';
 import useLocale from 'hooks/useLocale';
 import MenuButton from 'components/common/MenuButton';
 import Globe from 'assets/globe.svg';
 import styles from './LanguageButton.module.css';
 
 export default function LanguageButton() {
-  const [locale, setLocale] = useLocale();
+  const { locale, saveLocale } = useLocale();
+  const menuOptions = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
 
   function handleSelect(value) {
-    setLocale(value);
+    saveLocale(value);
   }
 
   switch (locale) {