Move date range selection into redux.

This commit is contained in:
Mike Cao 2020-08-31 14:11:30 -07:00
parent d06c077019
commit c5cb19a3bf
21 changed files with 141 additions and 138 deletions

View file

@ -5,12 +5,22 @@ import Loading from 'components/common/Loading';
import useFetch from 'hooks/useFetch';
import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
import styles from './MetricsBar.module.css';
import { useSelector } from 'react-redux';
import { getDateRange } from '../../lib/date';
export default function MetricsBar({ websiteId, startDate, endDate, className }) {
const { data } = useFetch(`/api/website/${websiteId}/metrics`, {
start_at: +startDate,
end_at: +endDate,
});
export default function MetricsBar({ websiteId, className, defaultDateRange = '7day' }) {
const dateRange = useSelector(state => state.websites[websiteId]?.dateRange);
const { startDate, endDate, modified } = dateRange || getDateRange(defaultDateRange);
const { data } = useFetch(
`/api/website/${websiteId}/metrics`,
{
start_at: +startDate,
end_at: +endDate,
},
{
update: [modified],
},
);
const [format, setFormat] = useState(true);
const formatFunc = format ? formatLongNumber : formatNumber;