Updated method for getting event types.

components/metrics/EventsTable.js

@@ -4,11 +4,6 @@ import MetricsTable from './MetricsTable';
 import Tag from 'components/common/Tag';
 import DropDown from 'components/common/DropDown';
 import { eventTypeFilter } from 'lib/filters';
-import useDateRange from 'hooks/useDateRange';
-import useFetch from 'hooks/useFetch';
-import usePageQuery from 'hooks/usePageQuery';
-import useShareToken from 'hooks/useShareToken';
-import { TOKEN_HEADER } from 'lib/constants';
 import styles from './EventsTable.module.css';
 
 const EVENT_FILTER_DEFAULT = {
@@ -18,34 +13,18 @@ const EVENT_FILTER_DEFAULT = {
 
 export default function EventsTable({ websiteId, ...props }) {
   const [eventType, setEventType] = useState(EVENT_FILTER_DEFAULT.value);
+  const [eventTypes, setEventTypes] = useState([]);
 
-  const {
-    query: { url },
-  } = usePageQuery();
-
-  const shareToken = useShareToken();
-  const [dateRange] = useDateRange(websiteId);
-
-  const { startDate, endDate, modified } = dateRange;
-  const { data, loading, error } = useFetch(
-    `/api/website/${websiteId}/event-types`,
-    {
-      params: {
-        start_at: +startDate,
-        end_at: +endDate,
-        url,
-      },
-      headers: { [TOKEN_HEADER]: shareToken?.token },
-    },
-    [modified],
-  );
-
-  const eventTypes = data ? [...new Set(data.map(({ x }) => x))] : [];
   const dropDownOptions = [EVENT_FILTER_DEFAULT, ...eventTypes.map(t => ({ value: t, label: t }))];
 
+  function handleDataLoad(data) {
+    setEventTypes([...new Set(data.map(({ x }) => x.split('\t')[0]))]);
+    props.onDataLoad(data);
+  }
+
   return (
     <>
-      {!loading && !error && eventTypes.length > 1 && (
+      {eventTypes?.length > 1 && (
         <div className={styles.filter}>
           <DropDown value={eventType} options={dropDownOptions} onChange={setEventType} />
         </div>
@@ -59,6 +38,7 @@ export default function EventsTable({ websiteId, ...props }) {
         dataFilter={eventTypeFilter}
         filterOptions={eventType === EVENT_FILTER_DEFAULT.value ? [] : [eventType]}
         renderLabel={({ x }) => <Label value={x} />}
+        onDataLoad={handleDataLoad}
       />
     </>
   );

lib/queries.js

@@ -501,41 +501,6 @@ export function getEventMetrics(
   );
 }
 
-export function getEventTypes(
-  website_id,
-  start_at,
-  end_at,
-  timezone = 'utc',
-  unit = 'day',
-  filters = {},
-) {
-  const params = [website_id, start_at, end_at];
-  const { url } = filters;
-
-  let urlFilter = '';
-
-  if (url) {
-    urlFilter = `and url=$${params.length + 1}`;
-    params.push(decodeURIComponent(url));
-  }
-
-  return rawQuery(
-    `
-    select
-      event_type x,
-      ${getDateQuery('created_at', unit, timezone)} t,
-      count(*) y
-    from event
-    where website_id=$1
-    and created_at between $2 and $3
-    ${urlFilter}
-    group by 1, 2
-    order by 2
-    `,
-    params,
-  );
-}
-
 export async function getRealtimeData(websites, time) {
   const [pageviews, sessions, events] = await Promise.all([
     getPageviews(websites, time),

pages/api/website/[id]/event-types.js

@@ -1,25 +0,0 @@
-import { getEventTypes } from 'lib/queries';
-import { ok, methodNotAllowed, unauthorized } from 'lib/response';
-import { allowQuery } from 'lib/auth';
-
-export default async (req, res) => {
-  if (req.method === 'GET') {
-    if (!(await allowQuery(req))) {
-      return unauthorized(res);
-    }
-
-    const { id, start_at, end_at, url } = req.query;
-
-    const websiteId = +id;
-    const startDate = new Date(+start_at);
-    const endDate = new Date(+end_at);
-
-    const eventTypes = await getEventTypes(websiteId, startDate, endDate, undefined, undefined, {
-      url,
-    });
-
-    return ok(res, eventTypes);
-  }
-
-  return methodNotAllowed(res);
-};