umami/components/pages/Dashboard.js

47 lines
1.4 KiB
JavaScript
Raw Normal View History

2022-03-04 04:45:49 +01:00
import { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { useRouter } from 'next/router';
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
import WebsiteList from 'components/pages/WebsiteList';
import Button from 'components/common/Button';
import DashboardSettingsButton from 'components/settings/DashboardSettingsButton';
import useFetch from 'hooks/useFetch';
import useStore from 'store/app';
import styles from './WebsiteList.module.css';
const selector = state => state.dashboard;
export default function Dashboard() {
const router = useRouter();
const { id } = router.query;
const userId = id?.[0];
const store = useStore(selector);
const { showCharts, limit } = store;
const [max, setMax] = useState(limit);
const { data } = useFetch('/websites', { params: { user_id: userId } });
function handleMore() {
setMax(max + limit);
}
if (!data) {
return null;
}
return (
<Page>
<PageHeader>
<div>Dashboard</div>
<DashboardSettingsButton />
</PageHeader>
<WebsiteList websites={data} showCharts={showCharts} limit={max} />
{max < data.length && (
<Button className={styles.button} onClick={handleMore}>
<FormattedMessage id="label.more" defaultMessage="More" />
</Button>
)}
</Page>
);
}