import React from 'react'; import { FormattedMessage } from 'react-intl'; import { useRouter } from 'next/router'; import WebsiteChart from 'components/metrics/WebsiteChart'; import Page from 'components/layout/Page'; import Button from 'components/common/Button'; import EmptyPlaceholder from 'components/common/EmptyPlaceholder'; import useFetch from 'hooks/useFetch'; import Arrow from 'assets/arrow-right.svg'; import styles from './WebsiteList.module.css'; export default function WebsiteList() { const router = useRouter(); const { data } = useFetch('/api/websites'); if (!data) { return null; } return ( <Page> {data.map(({ website_id, name }) => ( <div key={website_id} className={styles.website}> <WebsiteChart websiteId={website_id} title={name} showLink /> </div> ))} {data.length === 0 && ( <EmptyPlaceholder msg={ <FormattedMessage id="placeholder.message.no-websites-configured" defaultMessage="You don't have any websites configured." /> } > <Button icon={<Arrow />} size="medium" onClick={() => router.push('/settings')}> <div> <FormattedMessage id="placeholder.message.go-to-settings" defaultMessage="Go to settings" /> </div> </Button> </EmptyPlaceholder> )} </Page> ); }