umami/components/WebsiteList.js

68 lines
1.9 KiB
JavaScript
Raw Normal View History

import React, { useState, useEffect } from 'react';
2020-08-07 09:24:01 +02:00
import { useRouter } from 'next/router';
2020-08-12 07:24:41 +02:00
import Link from 'components/common/Link';
import WebsiteChart from 'components/charts/WebsiteChart';
import Page from 'components/layout/Page';
import Button from 'components/common/Button';
import PageHeader from 'components/layout/PageHeader';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import Arrow from 'assets/arrow-right.svg';
2020-08-12 07:24:41 +02:00
import { get } from 'lib/web';
2020-07-30 08:25:52 +02:00
import styles from './WebsiteList.module.css';
export default function WebsiteList() {
const [data, setData] = useState();
2020-08-07 09:24:01 +02:00
const router = useRouter();
async function loadData() {
2020-08-12 07:24:41 +02:00
setData(await get(`/api/websites`));
}
useEffect(() => {
loadData();
}, []);
if (!data) {
return null;
}
return (
2020-08-06 04:04:02 +02:00
<Page>
2020-08-07 11:27:12 +02:00
{data?.map(({ website_id, name }) => (
<div key={website_id} className={styles.website}>
<PageHeader>
2020-08-09 12:04:48 +02:00
<div>
<Link
href="/website/[...id]"
as={`/website/${website_id}/${name}`}
className={styles.title}
>
{name}
</Link>
</div>
2020-08-07 11:27:12 +02:00
<Button
icon={<Arrow />}
onClick={() =>
router.push('/website/[...id]', `/website/${website_id}/${name}`, {
shallow: true,
})
}
2020-08-09 08:48:43 +02:00
size="small"
2020-08-07 11:27:12 +02:00
>
<div>View details</div>
</Button>
</PageHeader>
<WebsiteChart key={website_id} title={name} websiteId={website_id} />
</div>
))}
{data.length === 0 && (
<EmptyPlaceholder msg={"You don't have any websites configured."}>
<Button icon={<Arrow />} size="medium" onClick={() => router.push('/settings')}>
<div>Go to settings</div>
</Button>
</EmptyPlaceholder>
)}
2020-08-06 04:04:02 +02:00
</Page>
);
}