Feat/um 145 re add events (#1733)

* Re-add events. Fix event_type queries.

* Re-add eventData

* revert CSS.

components/common/EventDataButton.js

@@ -24,7 +24,7 @@ function EventDataButton({ websiteId }) {
       <Button
         tooltip={<FormattedMessage id="label.event-data" defaultMessage="Event" />}
         tooltipId="button-event"
-        size="small"
+        size="sm"
         onClick={handleClick}
         className={styles.button}
       >
@@ -34,8 +34,11 @@ function EventDataButton({ websiteId }) {
         Event Data
       </Button>
       {showEventData && (
-        <Modal title={<FormattedMessage id="label.event-data" defaultMessage="Query Event Data" />}>
-          <EventDataForm websiteId={websiteId} onClose={handleClose} />
+        <Modal
+          title={<FormattedMessage id="label.event-data" defaultMessage="Query Event Data" />}
+          onClose={handleClose}
+        >
+          {close => <EventDataForm websiteId={websiteId} onClose={close} />}
         </Modal>
       )}
     </>

components/common/EventDataButton.module.css

@@ -1,3 +1,4 @@
 .button {
   width: fit-content;
+  margin-bottom: 15px;
 }

components/forms/EventDataForm.js

@@ -1,22 +1,26 @@
+import { useMutation } from '@tanstack/react-query';
 import classNames from 'classnames';
-import { Button } from 'react-basics';
 import DateFilter from 'components/common/DateFilter';
-import DropDown from 'components/common/DropDown';
-import FormLayout, {
-  FormButtons,
-  FormError,
-  FormMessage,
-  FormRow,
-} from 'components/layout/FormLayout';
 import DataTable from 'components/metrics/DataTable';
 import FilterTags from 'components/metrics/FilterTags';
-import { Field, Form, Formik } from 'formik';
 import useApi from 'hooks/useApi';
 import useDateRange from 'hooks/useDateRange';
-import { useState, useEffect } from 'react';
-import { FormattedMessage } from 'react-intl';
-import styles from './EventDataForm.module.css';
 import useTimezone from 'hooks/useTimezone';
+import { useEffect, useState, useRef } from 'react';
+import {
+  Button,
+  Dropdown,
+  Flexbox,
+  Form,
+  FormButtons,
+  FormInput,
+  FormRow,
+  Item,
+  TextField,
+} from 'react-basics';
+import { FormattedMessage } from 'react-intl';
+import { FormMessage } from './../layout/FormLayout';
+import styles from './EventDataForm.module.css';
 
 export const filterOptions = [
   { label: 'Count', value: 'count' },
@@ -77,13 +81,17 @@ export const dateOptions = [
 export default function EventDataForm({ websiteId, onClose, className }) {
   const { post } = useApi();
   const [message, setMessage] = useState();
+  const { mutate } = useMutation(data => post(`/websites/${websiteId}/eventdata`, data));
   const [columns, setColumns] = useState({});
   const [filters, setFilters] = useState({});
+  const [type, setType] = useState('');
   const [data, setData] = useState([]);
   const [dateRange, setDateRange] = useDateRange('report');
   const { startDate, endDate, value } = dateRange;
   const [timezone] = useTimezone();
   const [isValid, setIsValid] = useState(false);
+  const columnRef = useRef(null);
+  const filterRef = useRef(null);
 
   useEffect(() => {
     if (Object.keys(columns).length > 0) {
@@ -93,9 +101,14 @@ export default function EventDataForm({ websiteId, onClose, className }) {
     }
   }, [columns]);
 
-  const handleAddTag = (value, list, setState, resetForm) => {
+  const handleAddTag = (value, list, setState, ref, clearDropdown) => {
     setState({ ...list, [`${value.field}`]: value.value });
-    resetForm();
+
+    ref.current.reset({ field: '', value: '' });
+
+    if (clearDropdown) {
+      setType('');
+    }
   };
 
   const handleRemoveTag = (value, list, setState) => {
@@ -116,134 +129,102 @@ export default function EventDataForm({ websiteId, onClose, className }) {
       filters,
     };
 
-    const { ok, data } = await post(`/websites/${websiteId}/eventdata`, params);
-
-    if (!ok) {
-      setMessage(<FormattedMessage id="message.failure" defaultMessage="Something went wrong." />);
-      setData([]);
-    } else {
-      setData(data);
-      setMessage(null);
-    }
+    mutate(params, {
+      onSuccess: async data => {
+        setData(data);
+        setMessage(null);
+      },
+      onError: async () => {
+        setMessage(
+          <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />,
+        );
+        setData([]);
+      },
+    });
   };
 
   return (
     <>
-      <FormMessage>{message}</FormMessage>
+      <Flexbox className={styles.message} alignItems="center" direction="column">
+        <FormMessage>{message}</FormMessage>
+      </Flexbox>
       <div className={classNames(styles.container, className)}>
         <div className={styles.form}>
-          <FormLayout>
-            <div className={styles.filters}>
-              <FormRow>
-                <label htmlFor="date-range">
-                  <FormattedMessage id="label.date-range" defaultMessage="Date Range" />
-                </label>
-                <DateFilter
-                  value={value}
-                  startDate={startDate}
-                  endDate={endDate}
-                  onChange={setDateRange}
-                  options={dateOptions}
-                />
+          <div className={styles.filters}>
+            <FormRow label={<FormattedMessage id="label.date-range" defaultMessage="Date Range" />}>
+              <DateFilter
+                value={value}
+                startDate={startDate}
+                endDate={endDate}
+                onChange={setDateRange}
+                options={dateOptions}
+              />
+            </FormRow>
+          </div>
+          <div className={styles.filters}>
+            <Form
+              ref={columnRef}
+              onSubmit={value =>
+                handleAddTag({ ...value, value: type }, columns, setColumns, columnRef, true)
+              }
+            >
+              <FormInput
+                name="field"
+                label={<FormattedMessage id="label.field-name" defaultMessage="Field Name" />}
+                rules={{ required: 'Required' }}
+              >
+                <TextField />
+              </FormInput>
+              <FormRow
+                name="value"
+                label={<FormattedMessage id="label.type" defaultMessage="Type" />}
+              >
+                <Dropdown items={filterOptions} value={type} onChange={setType}>
+                  {({ value, label }) => <Item key={value}>{label}</Item>}
+                </Dropdown>
               </FormRow>
-            </div>
-            <div className={styles.filters}>
-              <Formik
-                initialValues={{ field: '', value: '' }}
-                onSubmit={(value, { resetForm }) =>
-                  handleAddTag(value, columns, setColumns, resetForm)
-                }
+              <FormButtons className={styles.formButtons}>
+                <Button variant="action" type="submit">
+                  <FormattedMessage id="label.add-column" defaultMessage="Add Column" />
+                </Button>
+              </FormButtons>
+            </Form>
+            <FilterTags
+              className={styles.filterTag}
+              params={columns}
+              onClick={value => handleRemoveTag(value, columns, setColumns)}
+            />
+          </div>
+          <div className={styles.filters}>
+            <Form
+              ref={filterRef}
+              onSubmit={value => handleAddTag(value, filters, setFilters, filterRef)}
+            >
+              <FormInput
+                name="field"
+                label={<FormattedMessage id="label.field-name" defaultMessage="Field Name" />}
               >
-                {({ values, setFieldValue }) => (
-                  <Form>
-                    <FormRow>
-                      <label htmlFor="field">
-                        <FormattedMessage id="label.field-name" defaultMessage="Field Name" />
-                      </label>
-                      <div>
-                        <Field name="field" type="text" />
-                        <FormError name="field" />
-                      </div>
-                    </FormRow>
-                    <FormRow>
-                      <label htmlFor="value">
-                        <FormattedMessage id="label.type" defaultMessage="Type" />
-                      </label>
-                      <div>
-                        <DropDown
-                          value={values.value}
-                          onChange={value => setFieldValue('value', value)}
-                          className={styles.dropdown}
-                          name="value"
-                          options={filterOptions}
-                        />
-                        <FormError name="value" />
-                      </div>
-                    </FormRow>
-                    <FormButtons className={styles.formButtons}>
-                      <Button
-                        variant="action"
-                        type="submit"
-                        disabled={!values.field || !values.value}
-                      >
-                        <FormattedMessage id="label.add-column" defaultMessage="Add Column" />
-                      </Button>
-                    </FormButtons>
-                  </Form>
-                )}
-              </Formik>
-              <FilterTags
-                className={styles.filterTag}
-                params={columns}
-                onClick={value => handleRemoveTag(value, columns, setColumns)}
-              />
-            </div>
-            <div className={styles.filters}>
-              <Formik
-                initialValues={{ field: '', value: '' }}
-                onSubmit={(value, { resetForm }) =>
-                  handleAddTag(value, filters, setFilters, resetForm)
-                }
+                <TextField />
+              </FormInput>
+              <FormInput
+                name="value"
+                label={<FormattedMessage id="label.value" defaultMessage="Value" />}
               >
-                {({ values }) => (
-                  <Form>
-                    <FormRow>
-                      <label htmlFor="field">
-                        <FormattedMessage id="label.field-name" defaultMessage="Field Name" />
-                      </label>
-                      <div>
-                        <Field name="field" type="text" />
-                        <FormError name="field" />
-                      </div>
-                    </FormRow>
-                    <FormRow>
-                      <label htmlFor="value">
-                        <FormattedMessage id="label.value" defaultMessage="Value" />
-                      </label>
-                      <div>
-                        <Field name="value" type="text" />
-                        <FormError name="value" />
-                      </div>
-                    </FormRow>
-                    <FormButtons className={styles.formButtons}>
-                      <Button
-                        variant="action"
-                        type="submit"
-                        disabled={!values.field || !values.value}
-                      >
-                        <FormattedMessage id="label.add-filter" defaultMessage="Add Filter" />
-                      </Button>
-                    </FormButtons>
-                  </Form>
-                )}
-              </Formik>
-              <FilterTags
-                className={styles.filterTag}
-                params={filters}
-                onClick={value => handleRemoveTag(value, filters, setFilters)}
-              />
-            </div>
-          </FormLayout>
+                <TextField />
+              </FormInput>
+
+              <FormButtons className={styles.formButtons}>
+                <Button variant="action" type="submit">
+                  <FormattedMessage id="label.add-filter" defaultMessage="Add Filter" />
+                </Button>
+              </FormButtons>
+            </Form>
+            <FilterTags
+              className={styles.filterTag}
+              params={filters}
+              onClick={value => handleRemoveTag(value, filters, setFilters)}
+            />
+          </div>
         </div>
         <div>
           <DataTable className={styles.table} data={data} title="Results" showPercentage={false} />

components/forms/EventDataForm.module.css

@@ -3,8 +3,9 @@
 }
 
 .form {
+  padding: 20px;
   border-right: 1px solid var(--base300);
-  width: 420px;
+  width: 425px;
 }
 
 .filters {
@@ -16,6 +17,10 @@
   min-height: 250px;
 }
 
+.message {
+  width: 100%;
+}
+
 .table {
   padding: 10px;
   min-height: 430px;

components/metrics/FilterTags.js

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { safeDecodeURI } from 'next-basics';
-import { Button } from 'react-basics';
+import { Button, Icon } from 'react-basics';
 import Times from 'assets/times.svg';
 import styles from './FilterTags.module.css';
 
@@ -16,8 +16,11 @@ export default function FilterTags({ className, params, onClick }) {
         }
         return (
           <div key={key} className={styles.tag}>
-            <Button icon={<Times />} onClick={() => onClick(key)} variant="action" iconRight>
+            <Button onClick={() => onClick(key)} variant="action" iconRight>
               {`${key}: ${safeDecodeURI(params[key])}`}
+              <Icon>
+                <Times />
+              </Icon>
             </Button>
           </div>
         );

components/pages/WebsiteDetails.js

@@ -1,26 +1,29 @@
-import { useState } from 'react';
-import { Column, Loading } from 'react-basics';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import Arrow from 'assets/arrow-right.svg';
 import classNames from 'classnames';
-import WebsiteChart from 'components/metrics/WebsiteChart';
+import Link from 'components/common/Link';
 import WorldMap from 'components/common/WorldMap';
-import Page from 'components/layout/Page';
 import GridRow from 'components/layout/GridRow';
 import MenuLayout from 'components/layout/MenuLayout';
-import Link from 'components/common/Link';
-import PagesTable from 'components/metrics/PagesTable';
-import ReferrersTable from 'components/metrics/ReferrersTable';
+import Page from 'components/layout/Page';
 import BrowsersTable from 'components/metrics/BrowsersTable';
-import OSTable from 'components/metrics/OSTable';
-import DevicesTable from 'components/metrics/DevicesTable';
 import CountriesTable from 'components/metrics/CountriesTable';
+import DevicesTable from 'components/metrics/DevicesTable';
 import LanguagesTable from 'components/metrics/LanguagesTable';
-import ScreenTable from 'components/metrics/ScreenTable';
+import OSTable from 'components/metrics/OSTable';
+import PagesTable from 'components/metrics/PagesTable';
 import QueryParametersTable from 'components/metrics/QueryParametersTable';
-import usePageQuery from 'hooks/usePageQuery';
+import ReferrersTable from 'components/metrics/ReferrersTable';
+import ScreenTable from 'components/metrics/ScreenTable';
+import WebsiteChart from 'components/metrics/WebsiteChart';
 import useApi from 'hooks/useApi';
+import usePageQuery from 'hooks/usePageQuery';
 import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
-import Arrow from 'assets/arrow-right.svg';
+import { useState } from 'react';
+import { Column, Loading } from 'react-basics';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import EventDataButton from './../common/EventDataButton';
+import EventsChart from './../metrics/EventsChart';
+import EventsTable from './../metrics/EventsTable';
 import styles from './WebsiteDetails.module.css';
 
 const messages = defineMessages({
@@ -32,6 +35,7 @@ const messages = defineMessages({
   devices: { id: 'metrics.devices', defaultMessage: 'Devices' },
   countries: { id: 'metrics.countries', defaultMessage: 'Countries' },
   languages: { id: 'metrics.languages', defaultMessage: 'Languages' },
+  events: { id: 'metrics.events', defaultMessage: 'Events' },
   query: { id: 'metrics.query-parameters', defaultMessage: 'Query parameters' },
 });
 
@@ -44,6 +48,7 @@ const views = {
   screen: ScreenTable,
   country: CountriesTable,
   language: LanguagesTable,
+  event: EventsTable,
   query: QueryParametersTable,
 };
 
@@ -104,6 +109,10 @@ export default function WebsiteDetails({ websiteId }) {
       label: formatMessage(messages.screens),
       value: resolve({ view: 'screen' }),
     },
+    {
+      label: formatMessage(messages.events),
+      value: resolve({ view: 'event' }),
+    },
     {
       label: formatMessage(messages.query),
       value: resolve({ view: 'query' }),
@@ -172,6 +181,15 @@ export default function WebsiteDetails({ websiteId }) {
               <CountriesTable {...tableProps} onDataLoad={setCountryData} />
             </Column>
           </GridRow>
+          <GridRow>
+            <Column xs={12} md={12} lg={4} defaultSize={4}>
+              <EventsTable {...tableProps} />
+            </Column>
+            <Column xs={12} md={12} lg={8} defaultSize={8}>
+              <EventDataButton websiteId={websiteId} />
+              <EventsChart className={styles.eventschart} websiteId={websiteId} />
+            </Column>
+          </GridRow>
         </>
       )}
       {view && chartLoaded && (