umami/components/pages/Dashboard.js

56 lines
1.8 KiB
JavaScript
Raw Normal View History

2022-03-04 04:45:49 +01:00
import { useState } from 'react';
import { Button, Loading } from 'react-basics';
2022-08-04 12:56:30 +02:00
import { defineMessages, useIntl } from 'react-intl';
2022-03-04 04:45:49 +01:00
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
import WebsiteChartList from 'components/pages/WebsiteChartList';
2022-03-04 04:45:49 +01:00
import DashboardSettingsButton from 'components/settings/DashboardSettingsButton';
import useApi from 'hooks/useApi';
2023-01-05 06:20:24 +01:00
import useRequireLogin from 'hooks/useRequireLogin';
2022-08-04 12:56:30 +02:00
import useDashboard from 'store/dashboard';
import DashboardEdit from './DashboardEdit';
2022-03-04 04:45:49 +01:00
import styles from './WebsiteList.module.css';
2022-08-04 12:56:30 +02:00
const messages = defineMessages({
dashboard: { id: 'label.dashboard', defaultMessage: 'Dashboard' },
more: { id: 'label.more', defaultMessage: 'More' },
});
2022-03-04 04:45:49 +01:00
export default function Dashboard({ userId }) {
2023-01-05 06:20:24 +01:00
const { user } = useRequireLogin();
2022-08-04 12:56:30 +02:00
const dashboard = useDashboard();
const { showCharts, limit, editing } = dashboard;
2022-03-04 04:45:49 +01:00
const [max, setMax] = useState(limit);
const { get, useQuery } = useApi();
const { data, isLoading } = useQuery(['websites'], () => get('/websites', { userId }));
2022-08-04 12:56:30 +02:00
const { formatMessage } = useIntl();
2022-03-04 04:45:49 +01:00
function handleMore() {
setMax(max + limit);
}
2023-01-05 06:20:24 +01:00
if (!user || isLoading) {
return <Loading />;
}
2022-03-04 04:45:49 +01:00
if (!data) {
return null;
}
return (
<Page>
<PageHeader>
2022-08-04 12:56:30 +02:00
<div>{formatMessage(messages.dashboard)}</div>
{!editing && <DashboardSettingsButton />}
2022-03-04 04:45:49 +01:00
</PageHeader>
2022-08-05 06:37:18 +02:00
{editing && <DashboardEdit websites={data} />}
{!editing && <WebsiteChartList websites={data} showCharts={showCharts} limit={max} />}
2022-03-04 04:45:49 +01:00
{max < data.length && (
<Button className={styles.button} onClick={handleMore}>
2022-08-04 12:56:30 +02:00
{formatMessage(messages.more)}
2022-03-04 04:45:49 +01:00
</Button>
)}
</Page>
);
}