71 lines
2.4 KiB
JavaScript
71 lines
2.4 KiB
JavaScript
import { Button, Icon, Icons, Text } from 'react-basics';
|
|
import Link from 'next/link';
|
|
import Page from 'components/layout/Page';
|
|
import PageHeader from 'components/layout/PageHeader';
|
|
import Pager from 'components/common/Pager';
|
|
import WebsiteChartList from 'components/pages/websites/WebsiteChartList';
|
|
import DashboardSettingsButton from 'components/pages/dashboard/DashboardSettingsButton';
|
|
import DashboardEdit from 'components/pages/dashboard/DashboardEdit';
|
|
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
|
|
import useApi from 'components/hooks/useApi';
|
|
import useDashboard from 'store/dashboard';
|
|
import useMessages from 'components/hooks/useMessages';
|
|
import useLocale from 'components/hooks/useLocale';
|
|
import useApiFilter from 'components/hooks/useApiFilter';
|
|
|
|
export function Dashboard() {
|
|
const { formatMessage, labels, messages } = useMessages();
|
|
const { showCharts, editing } = useDashboard();
|
|
const { dir } = useLocale();
|
|
const { get, useQuery } = useApi();
|
|
const { page, handlePageChange } = useApiFilter();
|
|
const pageSize = 10;
|
|
const {
|
|
data: result,
|
|
isLoading,
|
|
error,
|
|
} = useQuery(['websites', page, pageSize], () =>
|
|
get('/websites', { includeTeams: 1, page, pageSize }),
|
|
);
|
|
const { data, count } = result || {};
|
|
const hasData = data && data?.length !== 0;
|
|
|
|
return (
|
|
<Page loading={isLoading} error={error}>
|
|
<PageHeader title={formatMessage(labels.dashboard)}>
|
|
{!editing && hasData && <DashboardSettingsButton />}
|
|
</PageHeader>
|
|
{!hasData && (
|
|
<EmptyPlaceholder message={formatMessage(messages.noWebsitesConfigured)}>
|
|
<Link href="/settings/websites">
|
|
<Button>
|
|
<Icon rotate={dir === 'rtl' ? 180 : 0}>
|
|
<Icons.ArrowRight />
|
|
</Icon>
|
|
<Text>{formatMessage(messages.goToSettings)}</Text>
|
|
</Button>
|
|
</Link>
|
|
</EmptyPlaceholder>
|
|
)}
|
|
{hasData && (
|
|
<>
|
|
{editing && <DashboardEdit />}
|
|
{!editing && (
|
|
<>
|
|
<WebsiteChartList websites={data} showCharts={showCharts} limit={pageSize} />
|
|
<Pager
|
|
page={page}
|
|
pageSize={pageSize}
|
|
count={count}
|
|
onPageChange={handlePageChange}
|
|
/>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</Page>
|
|
);
|
|
}
|
|
|
|
export default Dashboard;
|