Added useLocale hook.

This commit is contained in:
Mike Cao 2020-09-08 20:46:31 -07:00
parent 7e26c9571e
commit 52acb691ad
5 changed files with 24 additions and 14 deletions

View File

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

View File

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

13
hooks/useLocale.js Normal file
View File

@ -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];
}

View File

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

View File

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