Merge pull request #129 from mikecao/dev

Added useLocale hook.
This commit is contained in:
Mike Cao 2020-09-09 12:10:43 -07:00 committed by GitHub
commit 4ae8dc7474
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 24 additions and 14 deletions

View File

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

View File

@ -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);

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",
"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",

View File

@ -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 }) => <span className={locale}>{children}</span>;
useEffect(() => {
const saved = localStorage.getItem('locale');
if (saved) {
dispatch(updateApp({ locale: saved }));
setLocale(saved);
}
});