New Dashboard component.

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