watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-12 08:37:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

More refactoring, cleaned up icons, nav buttons, add messages.

Browse source
This commit is contained in:
Mike Cao 2023-01-27 21:53:13 -08:00
parent 4b1013c8c6
commit 5f15ad0807
68 changed files with 391 additions and 790 deletions
Download patch file Download diff file Expand all files Collapse all files

65
components/pages/dashboard/Dashboard.js
View file

@ -1,53 +1,62 @@
import { useState } from 'react';
import { Button, Loading } from 'react-basics';
import { defineMessages, useIntl } from 'react-intl';
import { Button, Icon, Icons, Text, Flexbox } from 'react-basics';
import { useIntl } from 'react-intl';
import Link from 'next/link';
import Page from 'components/layout/Page';
import PageHeader from 'components/layout/PageHeader';
import WebsiteChartList from 'components/pages/websites/WebsiteChartList';
import DashboardSettingsButton from 'components/pages/dashboard/DashboardSettingsButton';
import DashboardEdit from 'components/pages/dashboard/DashboardEdit';
import styles from 'components/pages/websites/WebsiteList.module.css';
import useUser from 'hooks/useUser';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import useApi from 'hooks/useApi';
import { labels, messages } from 'components/messages';
import useDashboard from 'store/dashboard';
const messages = defineMessages({
dashboard: { id: 'label.dashboard', defaultMessage: 'Dashboard' },
more: { id: 'label.more', defaultMessage: 'More' },
});
export default function Dashboard({ userId }) {
const { user } = useUser();
const dashboard = useDashboard();
const { showCharts, limit, editing } = dashboard;
const [max, setMax] = useState(limit);
const { get, useQuery } = useApi();
const { data, isLoading } = useQuery(['websites'], () => get('/websites', { userId }));
const { data, isLoading, error } = useQuery(['websites'], () => get('/websites', { userId }));
const { formatMessage } = useIntl();
const hasData = data && data.length !== 0;
function handleMore() {
setMax(max + limit);
}
if (!user || isLoading) {
return <Loading />;
}
if (!data) {
return null;
}
return (
<Page>
<PageHeader title={formatMessage(messages.dashboard)}>
{!editing && <DashboardSettingsButton />}
<Page loading={isLoading} error={error}>
<PageHeader title={formatMessage(labels.dashboard)}>
{!editing && hasData && <DashboardSettingsButton />}
</PageHeader>
{editing && <DashboardEdit websites={data} />}
{!editing && <WebsiteChartList websites={data} showCharts={showCharts} limit={max} />}
{max < data.length && (
<Button className={styles.button} onClick={handleMore}>
{formatMessage(messages.more)}
</Button>
{!hasData && (
<EmptyPlaceholder message={formatMessage(messages.noWebsites)}>
<Link href="/settings/websites">
<Button>
<Icon>
<Icons.ArrowRight />
</Icon>
<Text>{formatMessage(messages.goToSettings)}</Text>
</Button>
</Link>
</EmptyPlaceholder>
)}
{hasData && (
<>
{editing && <DashboardEdit websites={data} />}
{!editing && <WebsiteChartList websites={data} showCharts={showCharts} limit={max} />}
{max < data.length && (
<Flexbox justifyContent="center">
<Button onClick={handleMore}>
<Icon>
<Icons.More />
</Icon>
<Text>{formatMessage(labels.more)}</Text>
</Button>
</Flexbox>
)}
</>
)}
</Page>
);