Initial commit

Created from https://vercel.com/new

components/pages/WebsiteList.js

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { FormattedMessage } 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 Button from 'components/common/Button';
+import useFetch from 'hooks/useFetch';
+import Arrow from 'assets/arrow-right.svg';
+import Chart from 'assets/chart-bar.svg';
+import styles from './WebsiteList.module.css';
+
+export default function WebsiteList({ userId }) {
+  const { data } = useFetch('/api/websites', { params: { user_id: userId } });
+  const [hideCharts, setHideCharts] = useState(false);
+
+  if (!data) {
+    return null;
+  }
+
+  if (data.length === 0) {
+    return (
+      <Page>
+        <EmptyPlaceholder
+          msg={
+            <FormattedMessage
+              id="message.no-websites-configured"
+              defaultMessage="You don't have any websites configured."
+            />
+          }
+        >
+          <Link href="/settings" icon={<Arrow />} iconRight>
+            <FormattedMessage id="message.go-to-settings" defaultMessage="Go to settings" />
+          </Link>
+        </EmptyPlaceholder>
+      </Page>
+    );
+  }
+
+  return (
+    <Page>
+      <div className={styles.menubar}>
+        <Button
+          tooltip={<FormattedMessage id="message.toggle-charts" defaultMessage="Toggle charts" />}
+          icon={<Chart />}
+          onClick={() => setHideCharts(!hideCharts)}
+        />
+      </div>
+      {data.map(({ website_id, name, domain }) => (
+        <div key={website_id} className={styles.website}>
+          <WebsiteChart
+            websiteId={website_id}
+            title={name}
+            domain={domain}
+            hideChart={hideCharts}
+            showLink
+          />
+        </div>
+      ))}
+    </Page>
+  );
+}