diff --git a/components/common/LanguageButton.js b/components/common/LanguageButton.js index 51903afe..291f27d2 100644 --- a/components/common/LanguageButton.js +++ b/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); } diff --git a/components/metrics/BarChart.js b/components/metrics/BarChart.js index a3a3876f..2291d5bb 100644 --- a/components/metrics/BarChart.js +++ b/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); diff --git a/hooks/useLocale.js b/hooks/useLocale.js new file mode 100644 index 00000000..185c1f19 --- /dev/null +++ b/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]; +} diff --git a/package.json b/package.json index 59507fcf..9bcda131 100644 --- a/package.json +++ b/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 ", "license": "MIT", diff --git a/pages/_app.js b/pages/_app.js index a2f23419..694049d4 100644 --- a/pages/_app.js +++ b/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 = useSelector(state => state.app.locale); + const [locale, setLocale] = useLocale(); const Wrapper = ({ children }) => {children}; useEffect(() => { const saved = localStorage.getItem('locale'); if (saved) { - dispatch(updateApp({ locale: saved })); + setLocale(saved); } });