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>
+  );
+}

components/pages/WebsiteList.js

@@ -1,32 +1,13 @@
-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 useFetch from 'hooks/useFetch';
-import DashboardSettingsButton from 'components/settings/DashboardSettingsButton';
-import Button from 'components/common/Button';
-import useStore from 'store/app';
 import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteList.module.css';
 
-const selector = state => state.dashboard;
-
-export default function WebsiteList({ userId }) {
-  const { data } = useFetch('/websites', { params: { user_id: userId } });
-  const { showCharts, limit } = useStore(selector);
-  const [max, setMax] = useState(limit);
-
-  function handleMore() {
-    setMax(max + limit);
-  }
-
-  if (!data) {
-    return null;
-  }
-
-  if (data.length === 0) {
+export default function WebsiteList({ websites, showCharts, limit }) {
+  if (websites.length === 0) {
     return (
       <Page>
         <EmptyPlaceholder
@@ -46,12 +27,9 @@ export default function WebsiteList({ userId }) {
   }
 
   return (
-    <Page>
-      <div className={styles.menubar}>
-        <DashboardSettingsButton />
-      </div>
-      {data.map(({ website_id, name, domain }, index) =>
-        index < max ? (
+    <div>
+      {websites.map(({ website_id, name, domain }, index) =>
+        index < limit ? (
           <div key={website_id} className={styles.website}>
             <WebsiteChart
               websiteId={website_id}
@@ -63,11 +41,6 @@ export default function WebsiteList({ userId }) {
           </div>
         ) : null,
       )}
-      {max < data.length && (
-        <Button className={styles.button} onClick={handleMore}>
-          <FormattedMessage id="label.more" defaultMessage="More" />
-        </Button>
-      )}
-    </Page>
+    </div>
   );
 }

components/pages/WebsiteList.module.css

@@ -7,17 +7,5 @@
 
 .website:last-child {
   border-bottom: 0;
-  margin-bottom: 0;
-}
-
-.menubar {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding-top: 10px;
-}
-
-.button {
-  align-self: center;
-  margin-bottom: 40px;
+  margin-bottom: 20px;
 }