Added useLocale hook.

components/common/LanguageButton.js

@@ -1,22 +1,20 @@
 import React, { useState, useRef } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
 import Globe from 'assets/globe.svg';
 import useDocumentClick from 'hooks/useDocumentClick';
-import { updateApp } from 'redux/actions/app';
 import Menu from './Menu';
 import Button from './Button';
 import { menuOptions } from 'lib/lang';
 import styles from './LanguageButton.module.css';
+import useLocale from '../../hooks/useLocale';
 
 export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'left' }) {
-  const dispatch = useDispatch();
   const [showMenu, setShowMenu] = useState(false);
-  const locale = useSelector(state => state.app.locale);
+  const [locale, setLocale] = useLocale();
   const ref = useRef();
   const selectedLocale = menuOptions.find(e => e.value === locale)?.display;
 
   function handleSelect(value) {
-    dispatch(updateApp({ locale: value }));
+    setLocale(value);
     window.localStorage.setItem('locale', value);
     setShowMenu(false);
   }

components/metrics/BarChart.js

@@ -2,10 +2,10 @@ import React, { useState, useRef, useEffect } from 'react';
 import ReactTooltip from 'react-tooltip';
 import classNames from 'classnames';
 import ChartJS from 'chart.js';
-import styles from './BarChart.module.css';
 import { formatLongNumber } from 'lib/format';
 import { dateFormat } from 'lib/lang';
-import { useSelector } from 'react-redux';
+import useLocale from 'hooks/useLocale';
+import styles from './BarChart.module.css';
 
 export default function BarChart({
   chartId,
@@ -22,7 +22,7 @@ export default function BarChart({
   const canvas = useRef();
   const chart = useRef();
   const [tooltip, setTooltip] = useState({});
-  const locale = useSelector(state => state.app.locale);
+  const [locale] = useLocale();
 
   function renderXLabel(label, index, values) {
     const d = new Date(values[index].value);

hooks/useLocale.js

@@ -0,0 +1,13 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { updateApp } from 'redux/actions/app';
+
+export default function useLocale() {
+  const locale = useSelector(state => state.app.locale);
+  const dispatch = useDispatch();
+
+  function setLocale(value) {
+    dispatch(updateApp({ locale: value }));
+  }
+
+  return [locale, setLocale];
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "description": "A simple, fast, website analytics alternative to Google Analytics. ",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",

pages/_app.js

@@ -1,23 +1,22 @@
 import React, { useEffect } from 'react';
 import { IntlProvider } from 'react-intl';
-import { Provider, useDispatch, useSelector } from 'react-redux';
+import { Provider } from 'react-redux';
 import { useStore } from 'redux/store';
-import { updateApp } from 'redux/actions/app';
+import useLocale from 'hooks/useLocale';
 import { messages } from 'lib/lang';
 import 'styles/variables.css';
 import 'styles/bootstrap-grid.css';
 import 'styles/index.css';
 
 const Intl = ({ children }) => {
-  const dispatch = useDispatch();
+  const [locale, setLocale] = useLocale();
-  const locale = useSelector(state => state.app.locale);
 
   const Wrapper = ({ children }) => <span className={locale}>{children}</span>;
 
   useEffect(() => {
     const saved = localStorage.getItem('locale');
     if (saved) {
-      dispatch(updateApp({ locale: saved }));
+      setLocale(saved);
     }
   });