New Dashboard component.

components/common/MenuButton.js

@@ -11,6 +11,7 @@ function MenuButton({
   value,
   options,
   buttonClassName,
+  buttonVariant,
   menuClassName,
   menuPosition = 'bottom',
   menuAlign = 'right',
@@ -43,7 +44,7 @@ function MenuButton({
         icon={icon}
         className={classNames(styles.button, buttonClassName, { [styles.open]: showMenu })}
         onClick={toggleMenu}
-        variant="light"
+        variant={buttonVariant}
       >
         {!hideLabel && (
           <div className={styles.text}>{renderValue ? renderValue(selectedOption) : value}</div>

components/metrics/ActiveUsers.js

@@ -9,7 +9,8 @@ import styles from './ActiveUsers.module.css';
 
 export default function ActiveUsers({ websiteId, className, value, interval = 60000 }) {
   const shareToken = useShareToken();
-  const { data } = useFetch(!value && `/website/${websiteId}/active`, {
+  const url = value !== undefined && websiteId ? `/website/${websiteId}/active` : null;
+  const { data } = useFetch(url, {
     interval,
     headers: { [TOKEN_HEADER]: shareToken?.token },
   });

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

components/settings/DashboardSettingsButton.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import MenuButton from 'components/common/MenuButton';
 import Gear from 'assets/gear.svg';
-import useStore, { setDashboard } from 'store/app';
+import useStore, { setDashboard, defaultDashboardConfig } from 'store/app';
 
 const selector = state => state.dashboard;
 
@@ -18,7 +18,7 @@ export default function DashboardSettingsButton() {
 
   function handleSelect(value) {
     if (value === 'charts') {
-      setDashboard({ showCharts: !settings.showCharts });
+      setDashboard({ ...defaultDashboardConfig, showCharts: !settings.showCharts });
     }
     //setDashboard(value);
   }

components/settings/LanguageButton.js

@@ -19,6 +19,7 @@ export default function LanguageButton() {
       options={menuOptions}
       value={locale}
       menuClassName={styles.menu}
+      buttonVariant="light"
       onSelect={handleSelect}
       hideLabel
     />

components/settings/UserButton.js

@@ -43,6 +43,7 @@ export default function UserButton() {
     <MenuButton
       icon={<Icon icon={<User />} size="large" />}
       value={<Icon icon={<Chevron />} size="small" />}
+      buttonVariant="light"
       options={menuOptions}
       onSelect={handleSelect}
     />

pages/dashboard/[[...id]].js

@@ -1,14 +1,10 @@
 import React from 'react';
-import { useRouter } from 'next/router';
 import Layout from 'components/layout/Layout';
-import WebsiteList from 'components/pages/WebsiteList';
+import Dashboard from 'components/pages/Dashboard';
 import useRequireLogin from 'hooks/useRequireLogin';
 
 export default function DashboardPage() {
   const { loading } = useRequireLogin();
-  const router = useRouter();
-  const { id } = router.query;
-  const userId = id?.[0];
 
   if (loading) {
     return null;
@@ -16,7 +12,7 @@ export default function DashboardPage() {
 
   return (
     <Layout>
-      <WebsiteList userId={userId} />
+      <Dashboard />
     </Layout>
   );
 }

store/app.js

@@ -9,7 +9,7 @@ import {
 } from 'lib/constants';
 import { getItem } from 'lib/web';
 
-const defaultDashboardConfig = {
+export const defaultDashboardConfig = {
   showCharts: true,
   limit: DEFAULT_WEBSITE_LIMIT,
 };