New Dashboard component.

components/pages/Dashboard.js

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useRouter } from 'next/router';
+import Page from 'components/layout/Page';
+import PageHeader from 'components/layout/PageHeader';
+import WebsiteList from 'components/pages/WebsiteList';
+import Button from 'components/common/Button';
+import DashboardSettingsButton from 'components/settings/DashboardSettingsButton';
+import useFetch from 'hooks/useFetch';
+import useStore from 'store/app';
+import styles from './WebsiteList.module.css';
+
+const selector = state => state.dashboard;
+
+export default function Dashboard() {
+  const router = useRouter();
+  const { id } = router.query;
+  const userId = id?.[0];
+  const store = useStore(selector);
+  const { showCharts, limit } = store;
+  const [max, setMax] = useState(limit);
+  const { data } = useFetch('/websites', { params: { user_id: userId } });
+
+  function handleMore() {
+    setMax(max + limit);
+  }
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <Page>
+      <PageHeader>
+        <div>Dashboard</div>
+        <DashboardSettingsButton />
+      </PageHeader>
+      <WebsiteList websites={data} showCharts={showCharts} limit={max} />
+      {max < data.length && (
+        <Button className={styles.button} onClick={handleMore}>
+          <FormattedMessage id="label.more" defaultMessage="More" />
+        </Button>
+      )}
+    </Page>
+  );
+}