Event data report UI.

hooks/index.js

@@ -4,6 +4,7 @@ export * from './useCountryNames';
 export * from './useDateRange';
 export * from './useDocumentClick';
 export * from './useEscapeKey';
+export * from './useFilters';
 export * from './useForceUpdate';
 export * from './useLanguageNames';
 export * from './useLocale';

hooks/useFilters.js

@@ -0,0 +1,32 @@
+import { useMessages } from 'hooks';
+
+export function useFilters() {
+  const { formatMessage, labels } = useMessages();
+
+  const filters = {
+    eq: formatMessage(labels.equals),
+    neq: formatMessage(labels.doesNotEqual),
+    c: formatMessage(labels.contains),
+    dnc: formatMessage(labels.doesNotContain),
+    t: formatMessage(labels.true),
+    f: formatMessage(labels.false),
+    gt: formatMessage(labels.greaterThan),
+    lt: formatMessage(labels.lessThan),
+    gte: formatMessage(labels.greaterThanEquals),
+    lte: formatMessage(labels.lessThanEquals),
+    be: formatMessage(labels.before),
+    af: formatMessage(labels.after),
+  };
+
+  const types = {
+    string: ['eq', 'neq'],
+    array: ['c', 'dnc'],
+    boolean: ['t', 'f'],
+    number: ['eq', 'neq', 'gt', 'lt', 'gte', 'lte'],
+    date: ['be', 'af'],
+  };
+
+  return { filters, types };
+}
+
+export default useFilters;

hooks/useReport.js

@@ -16,6 +16,14 @@ export function useReport(reportId, defaultParameters) {
   const loadReport = async id => {
     const data = await get(`/reports/${id}`);
 
+    const { dateRange } = data?.parameters || {};
+    const { startDate, endDate } = dateRange || {};
+
+    if (startDate && endDate) {
+      dateRange.startDate = new Date(startDate);
+      dateRange.endDate = new Date(endDate);
+    }
+
     setReport(data);
   };