Add quick filter buttons.

This commit is contained in:
Mike Cao 2020-07-30 01:08:21 -07:00
parent 9beec1b50e
commit ff4492ffb5
10 changed files with 80 additions and 25 deletions

View file

@ -2,39 +2,24 @@ import React, { useState, useEffect } from 'react';
import { get } from 'lib/web';
import WebsiteStats from './WebsiteStats';
import DateFilter from './DateFilter';
import { getDateRange } from 'lib/date';
import styles from './WebsiteList.module.css';
export default function WebsiteList() {
const [data, setData] = useState();
const [dateRange, setDateRange] = useState(getDateRange('7day'));
const { startDate, endDate, unit } = dateRange;
async function loadData() {
setData(await get(`/api/website`));
}
function handleDateChange(value) {
setDateRange(value);
}
useEffect(() => {
loadData();
}, []);
return (
<div className={styles.container}>
<DateFilter onChange={handleDateChange} />
{data &&
data.websites.map(({ website_id, label }) => (
<WebsiteStats
key={website_id}
title={label}
websiteId={website_id}
startDate={startDate}
endDate={endDate}
unit={unit}
/>
<WebsiteStats key={website_id} title={label} websiteId={website_id} />
))}
</div>
);