Added website limit and show more button. Closes #592.

components/helpers/StickyHeader.js

@@ -25,9 +25,8 @@ export default function StickyHeader({
       }
     };
 
-    checkPosition();
-
     if (enabled) {
+      checkPosition();
       window.addEventListener('scroll', checkPosition);
     }
 

components/pages/WebsiteList.js

@@ -4,15 +4,23 @@ 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 DashboardSettingsButton from 'components/settings/DashboardSettingsButton';
+import Button from 'components/common/Button';
+import useStore from 'store/app';
 import Arrow from 'assets/arrow-right.svg';
-import Chart from 'assets/chart-bar.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, setShowCharts] = useState(true);
+  const { showCharts, limit } = useStore(selector);
+  const [max, setMax] = useState(limit);
+
+  function handleMore() {
+    setMax(max + limit);
+  }
 
   if (!data) {
     return null;
@@ -40,23 +48,26 @@ export default function WebsiteList({ userId }) {
   return (
     <Page>
       <div className={styles.menubar}>
-        <Button
-          tooltip={<FormattedMessage id="message.toggle-charts" defaultMessage="Toggle charts" />}
-          icon={<Chart />}
-          onClick={() => setShowCharts(!showCharts)}
-        />
+        <DashboardSettingsButton />
       </div>
-      {data.map(({ website_id, name, domain }) => (
-        <div key={website_id} className={styles.website}>
-          <WebsiteChart
-            websiteId={website_id}
-            title={name}
-            domain={domain}
-            showChart={showCharts}
-            showLink
-          />
-        </div>
-      ))}
+      {data.map(({ website_id, name, domain }, index) =>
+        index < max ? (
+          <div key={website_id} className={styles.website}>
+            <WebsiteChart
+              websiteId={website_id}
+              title={name}
+              domain={domain}
+              showChart={showCharts}
+              showLink
+            />
+          </div>
+        ) : null,
+      )}
+      {max < data.length && (
+        <Button className={styles.button} onClick={handleMore}>
+          <FormattedMessage id="label.more" defaultMessage="More" />
+        </Button>
+      )}
     </Page>
   );
 }

components/pages/WebsiteList.module.css

@@ -16,3 +16,8 @@
   justify-content: flex-end;
   padding-top: 10px;
 }
+
+.button {
+  align-self: center;
+  margin-bottom: 40px;
+}

components/settings/DashboardSettingsButton.js

@@ -0,0 +1,27 @@
+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';
+
+const selector = state => state.dashboard;
+
+export default function DashboardSettingsButton() {
+  const settings = useStore(selector);
+
+  const menuOptions = [
+    {
+      label: <FormattedMessage id="message.toggle-charts" defaultMessage="Toggle charts" />,
+      value: 'charts',
+    },
+  ];
+
+  function handleSelect(value) {
+    if (value === 'charts') {
+      setDashboard({ showCharts: !settings.showCharts });
+    }
+    //setDashboard(value);
+  }
+
+  return <MenuButton icon={<Gear />} options={menuOptions} onSelect={handleSelect} hideLabel />;
+}