From 7ae457669beb9847fb2b37cacc530f8bcb3a0e72 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Fri, 5 Aug 2022 13:07:20 -0700
Subject: [PATCH] Fix event table.

---
 components/metrics/EventsTable.js         | 64 ++++++-----------------
 components/metrics/EventsTable.module.css |  6 ---
 components/pages/WebsiteDetails.js        | 40 +++++++++-----
 scripts/check-db.js                       |  5 ++
 4 files changed, 47 insertions(+), 68 deletions(-)
 delete mode 100644 components/metrics/EventsTable.module.css

diff --git a/components/metrics/EventsTable.js b/components/metrics/EventsTable.js
index b3427775..ace39010 100644
--- a/components/metrics/EventsTable.js
+++ b/components/metrics/EventsTable.js
@@ -1,62 +1,28 @@
-import React, { useState } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import MetricsTable from './MetricsTable';
-import Tag from 'components/common/Tag';
-import DropDown from 'components/common/DropDown';
 import { eventTypeFilter } from 'lib/filters';
-import usePageQuery from 'hooks/usePageQuery';
-import styles from './EventsTable.module.css';
 
-const EVENT_FILTER_DEFAULT = {
-  value: 'all',
-  label: <FormattedMessage id="label.all-events" defaultMessage="All events" />,
-};
+const messages = defineMessages({
+  events: { id: 'metrics.events', defaultMessage: 'Events' },
+  actions: { id: 'metrics.actions', defaultMessage: 'Actions' },
+});
 
 export default function EventsTable({ websiteId, ...props }) {
-  const [eventType, setEventType] = useState(EVENT_FILTER_DEFAULT.value);
-  const [eventTypes, setEventTypes] = useState([]);
-  const { resolve, router } = usePageQuery();
-
-  const dropDownOptions = [EVENT_FILTER_DEFAULT, ...eventTypes.map(t => ({ value: t, label: t }))];
+  const { formatMessage } = useIntl();
 
   function handleDataLoad(data) {
-    setEventTypes([...new Set(data.map(({ x }) => x.split('\t')[0]))]);
     props.onDataLoad?.(data);
   }
 
-  function handleChange(value) {
-    router.replace(resolve({ eventType: value === 'all' ? undefined : value }));
-    setEventType(value);
-  }
-
   return (
-    <>
-      {eventTypes?.length > 1 && (
-        <div className={styles.filter}>
-          <DropDown value={eventType} options={dropDownOptions} onChange={handleChange} />
-        </div>
-      )}
-      <MetricsTable
-        {...props}
-        title={<FormattedMessage id="metrics.events" defaultMessage="Events" />}
-        type="event"
-        metric={<FormattedMessage id="metrics.actions" defaultMessage="Actions" />}
-        websiteId={websiteId}
-        dataFilter={eventTypeFilter}
-        filterOptions={eventType === EVENT_FILTER_DEFAULT.value ? [] : [eventType]}
-        renderLabel={({ x }) => <Label value={x} />}
-        onDataLoad={handleDataLoad}
-      />
-    </>
+    <MetricsTable
+      {...props}
+      title={formatMessage(messages.events)}
+      type="event"
+      metric={formatMessage(messages.actions)}
+      websiteId={websiteId}
+      dataFilter={eventTypeFilter}
+      onDataLoad={handleDataLoad}
+    />
   );
 }
-
-const Label = ({ value }) => {
-  const [event, label] = value.split('\t');
-  return (
-    <>
-      <Tag>{event}</Tag>
-      {label}
-    </>
-  );
-};
diff --git a/components/metrics/EventsTable.module.css b/components/metrics/EventsTable.module.css
deleted file mode 100644
index 259a4bbb..00000000
--- a/components/metrics/EventsTable.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.filter {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  margin-bottom: 15px;
-}
diff --git a/components/pages/WebsiteDetails.js b/components/pages/WebsiteDetails.js
index 869b7a85..d8720dc1 100644
--- a/components/pages/WebsiteDetails.js
+++ b/components/pages/WebsiteDetails.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import classNames from 'classnames';
 import WebsiteChart from 'components/metrics/WebsiteChart';
 import WorldMap from 'components/common/WorldMap';
@@ -18,12 +18,25 @@ import CountriesTable from 'components/metrics/CountriesTable';
 import LanguagesTable from 'components/metrics/LanguagesTable';
 import EventsTable from 'components/metrics/EventsTable';
 import EventsChart from 'components/metrics/EventsChart';
+import ScreenTable from 'components/metrics/ScreenTable';
+import UTMTable from 'components/metrics/UTMTable';
 import useFetch from 'hooks/useFetch';
 import usePageQuery from 'hooks/usePageQuery';
 import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
 import styles from './WebsiteDetails.module.css';
-import ScreenTable from 'components/metrics/ScreenTable';
-import UTMTable from 'components/metrics/UTMTable';
+
+const messages = defineMessages({
+  pages: { id: 'pages', defaultMessage: 'Pages' },
+  referrers: { id: 'metrics.referrers', defaultMessage: 'Referrers' },
+  screens: { id: 'metrics.screens', defaultMessage: 'Screens' },
+  browsers: { id: 'metrics.browsers', defaultMessage: 'Browsers' },
+  os: { id: 'metrics.os', defaultMessage: 'Operating system' },
+  devices: { id: 'metrics.device', defaultMessage: 'Devices' },
+  countries: { id: 'metrics.screens', defaultMessage: 'Screens' },
+  languages: { id: 'metrics.languages', defaultMessage: 'Languages' },
+  events: { id: 'metrics.screens', defaultMessage: 'Screens' },
+  utm: { id: 'metrics.utm', defaultMessage: 'UTM' },
+});
 
 const views = {
   url: PagesTable,
@@ -47,6 +60,7 @@ export default function WebsiteDetails({ websiteId }) {
     resolve,
     query: { view },
   } = usePageQuery();
+  const { formatMessage } = useIntl();
 
   const BackButton = () => (
     <div key="back-button" className={classNames(styles.backButton, 'col-12')}>
@@ -61,43 +75,43 @@ export default function WebsiteDetails({ websiteId }) {
       render: BackButton,
     },
     {
-      label: <FormattedMessage id="metrics.pages" defaultMessage="Pages" />,
+      label: formatMessage(messages.pages),
       value: resolve({ view: 'url' }),
     },
     {
-      label: <FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />,
+      label: formatMessage(messages.referrers),
       value: resolve({ view: 'referrer' }),
     },
     {
-      label: <FormattedMessage id="metrics.screens" defaultMessage="Screens" />,
+      label: formatMessage(messages.screens),
       value: resolve({ view: 'screen' }),
     },
     {
-      label: <FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />,
+      label: formatMessage(messages.browsers),
       value: resolve({ view: 'browser' }),
     },
     {
-      label: <FormattedMessage id="metrics.operating-systems" defaultMessage="Operating system" />,
+      label: formatMessage(messages.os),
       value: resolve({ view: 'os' }),
     },
     {
-      label: <FormattedMessage id="metrics.devices" defaultMessage="Devices" />,
+      label: formatMessage(messages.devices),
       value: resolve({ view: 'device' }),
     },
     {
-      label: <FormattedMessage id="metrics.countries" defaultMessage="Countries" />,
+      label: formatMessage(messages.countries),
       value: resolve({ view: 'country' }),
     },
     {
-      label: <FormattedMessage id="metrics.languages" defaultMessage="Languages" />,
+      label: formatMessage(messages.languages),
       value: resolve({ view: 'language' }),
     },
     {
-      label: <FormattedMessage id="metrics.events" defaultMessage="Events" />,
+      label: formatMessage(messages.events),
       value: resolve({ view: 'event' }),
     },
     {
-      label: <FormattedMessage id="metrics.utm" defaultMessage="UTM" />,
+      label: formatMessage(messages.utm),
       value: resolve({ view: 'utm' }),
     },
   ];
diff --git a/scripts/check-db.js b/scripts/check-db.js
index 190aeef6..df1c50ab 100644
--- a/scripts/check-db.js
+++ b/scripts/check-db.js
@@ -10,6 +10,10 @@ function success(msg) {
   console.log(chalk.greenBright(`✓ ${msg}`));
 }
 
+function error(msg) {
+  console.log(chalk.redBright(`✗ ${msg}`));
+}
+
 async function checkEnv() {
   if (!process.env.DATABASE_URL) {
     throw new Error('DATABASE_URL is not defined.');
@@ -34,6 +38,7 @@ async function checkTables() {
 
     success('Database tables found.');
   } catch (e) {
+    error('Database tables not found.');
     console.log('Adding tables...');
 
     console.log(execSync('prisma migrate deploy').toString());