Add website/reports to top nav.

components/pages/websites/WebsiteReportsPage.js

@@ -1,7 +1,7 @@
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import Page from 'components/layout/Page';
 import ReportsTable from 'components/pages/reports/ReportsTable';
-import { useMessages, useReports } from 'hooks';
+import { useMessages, useWebsiteReports } from 'hooks';
 import Link from 'next/link';
 import { Button, Flexbox, Icon, Icons, Text } from 'react-basics';
 import WebsiteHeader from './WebsiteHeader';
@@ -17,9 +17,9 @@ export function WebsiteReportsPage({ websiteId }) {
     handleFilterChange,
     handlePageChange,
     handlePageSizeChange,
-  } = useReports(websiteId);
+  } = useWebsiteReports(websiteId);
 
-  const hasData = reports && reports.data.length !== 0;
+  const hasData = (reports && reports.data.length !== 0) || filter;
 
   const handleDelete = async id => {
     await deleteReport(id);
@@ -48,11 +48,7 @@ export function WebsiteReportsPage({ websiteId }) {
           filterValue={filter}
         />
       )}
-      {!hasData && (
-        <EmptyPlaceholder message={formatMessage(messages.noReportsConfigured)}>
-          {/* {addButton} */}
-        </EmptyPlaceholder>
-      )}
+      {!hasData && <EmptyPlaceholder message={formatMessage(messages.noReportsConfigured)} />}
     </Page>
   );
 }

components/pages/websites/WebsitesPage.js

@@ -0,0 +1,67 @@
+import Page from 'components/layout/Page';
+import PageHeader from 'components/layout/PageHeader';
+import WebsiteAddForm from 'components/pages/settings/websites/WebsiteAddForm';
+import WebsiteList from 'components/pages/settings/websites/WebsitesList';
+import { useMessages } from 'hooks';
+import useUser from 'hooks/useUser';
+import { ROLES } from 'lib/constants';
+import { useState } from 'react';
+import {
+  Button,
+  Icon,
+  Icons,
+  Item,
+  Modal,
+  ModalTrigger,
+  Tabs,
+  Text,
+  useToasts,
+} from 'react-basics';
+
+export function WebsitesPage() {
+  const { formatMessage, labels, messages } = useMessages();
+  const [tab, setTab] = useState('my-websites');
+  const [fetch, setFetch] = useState(1);
+  const { user } = useUser();
+  const { showToast } = useToasts();
+
+  const handleSave = async () => {
+    setFetch(fetch + 1);
+    showToast({ message: formatMessage(messages.saved), variant: 'success' });
+  };
+
+  const addButton = (
+    <>
+      {user.role !== ROLES.viewOnly && (
+        <ModalTrigger>
+          <Button variant="primary">
+            <Icon>
+              <Icons.Plus />
+            </Icon>
+            <Text>{formatMessage(labels.addWebsite)}</Text>
+          </Button>
+          <Modal title={formatMessage(labels.addWebsite)}>
+            {close => <WebsiteAddForm onSave={handleSave} onClose={close} />}
+          </Modal>
+        </ModalTrigger>
+      )}
+    </>
+  );
+
+  return (
+    <Page>
+      <PageHeader title={formatMessage(labels.websites)}>{addButton}</PageHeader>
+      <Tabs selectedKey={tab} onSelect={setTab} style={{ marginBottom: 30 }}>
+        <Item key="my-websites">{formatMessage(labels.myWebsites)}</Item>
+        <Item key="team-webaites">{formatMessage(labels.teamWebsites)}</Item>
+      </Tabs>
+
+      {tab === 'my-websites' && <WebsiteList showHeader={false} fetch={fetch} />}
+      {tab === 'team-webaites' && (
+        <WebsiteList showHeader={false} fetch={fetch} showTeam={true} onlyTeams={true} />
+      )}
+    </Page>
+  );
+}
+
+export default WebsitesPage;