import { defineMessages, useIntl } from 'react-intl'; import Link from 'components/common/Link'; import WebsiteChart from 'components/metrics/WebsiteChart'; import Page from 'components/layout/Page'; import EmptyPlaceholder from 'components/common/EmptyPlaceholder'; import Arrow from 'assets/arrow-right.svg'; import styles from './WebsiteList.module.css'; import useDashboard from 'store/dashboard'; import { useMemo } from 'react'; import { firstBy } from 'thenby'; const messages = defineMessages({ noWebsites: { id: 'message.no-websites-configured', defaultMessage: "You don't have any websites configured.", }, goToSettngs: { id: 'message.go-to-settings', defaultMessage: 'Go to settings', }, }); export default function WebsiteList({ websites, showCharts, limit }) { const { websiteOrder } = useDashboard(); const { formatMessage } = useIntl(); const ordered = useMemo( () => websites .map(website => ({ ...website, order: websiteOrder.indexOf(website.id) || 0 })) .sort(firstBy('order')), [websites, websiteOrder], ); if (websites.length === 0) { return ( } iconRight> {formatMessage(messages.goToSettngs)} ); } return (
{ordered.map(({ id, name, domain }, index) => index < limit ? (
) : null, )}
); }