Refactored settings components.

components/pages/websites/WebsiteChartList.js

@@ -0,0 +1,64 @@
+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 (
+      <Page>
+        <EmptyPlaceholder msg={formatMessage(messages.noWebsites)}>
+          <Link href="/websites" icon={<Arrow />} iconRight>
+            {formatMessage(messages.goToSettngs)}
+          </Link>
+        </EmptyPlaceholder>
+      </Page>
+    );
+  }
+
+  return (
+    <div>
+      {ordered.map(({ id, name, domain }, index) =>
+        index < limit ? (
+          <div key={id} className={styles.website}>
+            <WebsiteChart
+              websiteId={id}
+              title={name}
+              domain={domain}
+              showChart={showCharts}
+              showLink
+            />
+          </div>
+        ) : null,
+      )}
+    </div>
+  );
+}