From ccafb03c47e1f4af0a68e3fdfe0d537b34b1dfaa Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Mon, 17 Jul 2023 00:27:42 -0700
Subject: [PATCH] Check Cloudflare headers for country info. Closes #2129

---
 .../reports/{event-data => }/FieldAddForm.js  |  8 ++--
 .../{event-data => }/FieldAddForm.module.css  |  0
 .../pages/reports/insights/FieldAddForm.js    | 44 -------------------
 .../reports/insights/FieldAddForm.module.css  | 38 ----------------
 lib/detect.ts                                 |  8 ++++
 pages/reports/{event-data.js => insights.js}  |  6 +--
 6 files changed, 15 insertions(+), 89 deletions(-)
 rename components/pages/reports/{event-data => }/FieldAddForm.js (86%)
 rename components/pages/reports/{event-data => }/FieldAddForm.module.css (100%)
 delete mode 100644 components/pages/reports/insights/FieldAddForm.js
 delete mode 100644 components/pages/reports/insights/FieldAddForm.module.css
 rename pages/reports/{event-data.js => insights.js} (50%)

diff --git a/components/pages/reports/event-data/FieldAddForm.js b/components/pages/reports/FieldAddForm.js
similarity index 86%
rename from components/pages/reports/event-data/FieldAddForm.js
rename to components/pages/reports/FieldAddForm.js
index c95fcac3..e8831247 100644
--- a/components/pages/reports/event-data/FieldAddForm.js
+++ b/components/pages/reports/FieldAddForm.js
@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { createPortal } from 'react-dom';
 import { REPORT_PARAMETERS } from 'lib/constants';
-import PopupForm from '../PopupForm';
-import FieldSelectForm from '../FieldSelectForm';
-import FieldAggregateForm from '../FieldAggregateForm';
-import FieldFilterForm from '../FieldFilterForm';
+import PopupForm from './PopupForm';
+import FieldSelectForm from './FieldSelectForm';
+import FieldAggregateForm from './FieldAggregateForm';
+import FieldFilterForm from './FieldFilterForm';
 import styles from './FieldAddForm.module.css';
 
 export function FieldAddForm({ fields = [], group, element, onAdd, onClose }) {
diff --git a/components/pages/reports/event-data/FieldAddForm.module.css b/components/pages/reports/FieldAddForm.module.css
similarity index 100%
rename from components/pages/reports/event-data/FieldAddForm.module.css
rename to components/pages/reports/FieldAddForm.module.css
diff --git a/components/pages/reports/insights/FieldAddForm.js b/components/pages/reports/insights/FieldAddForm.js
deleted file mode 100644
index c95fcac3..00000000
--- a/components/pages/reports/insights/FieldAddForm.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useState } from 'react';
-import { createPortal } from 'react-dom';
-import { REPORT_PARAMETERS } from 'lib/constants';
-import PopupForm from '../PopupForm';
-import FieldSelectForm from '../FieldSelectForm';
-import FieldAggregateForm from '../FieldAggregateForm';
-import FieldFilterForm from '../FieldFilterForm';
-import styles from './FieldAddForm.module.css';
-
-export function FieldAddForm({ fields = [], group, element, onAdd, onClose }) {
-  const [selected, setSelected] = useState();
-
-  const handleSelect = value => {
-    const { type } = value;
-
-    if (group === REPORT_PARAMETERS.groups || type === 'array' || type === 'boolean') {
-      value.value = group === REPORT_PARAMETERS.groups ? '' : 'total';
-      handleSave(value);
-      return;
-    }
-
-    setSelected(value);
-  };
-
-  const handleSave = value => {
-    onAdd(group, value);
-    onClose();
-  };
-
-  return createPortal(
-    <PopupForm className={styles.popup} element={element} onClose={onClose}>
-      {!selected && <FieldSelectForm fields={fields} onSelect={handleSelect} />}
-      {selected && group === REPORT_PARAMETERS.fields && (
-        <FieldAggregateForm {...selected} onSelect={handleSave} />
-      )}
-      {selected && group === REPORT_PARAMETERS.filters && (
-        <FieldFilterForm {...selected} onSelect={handleSave} />
-      )}
-    </PopupForm>,
-    document.body,
-  );
-}
-
-export default FieldAddForm;
diff --git a/components/pages/reports/insights/FieldAddForm.module.css b/components/pages/reports/insights/FieldAddForm.module.css
deleted file mode 100644
index 5c5aaa4f..00000000
--- a/components/pages/reports/insights/FieldAddForm.module.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.menu {
-  width: 360px;
-  max-height: 300px;
-  overflow: auto;
-}
-
-.item {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  border-radius: var(--border-radius);
-}
-
-.item:hover {
-  background: var(--base75);
-}
-
-.type {
-  color: var(--font-color300);
-}
-
-.selected {
-  font-weight: bold;
-}
-
-.popup {
-  display: flex;
-}
-
-.filter {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.dropdown {
-  min-width: 60px;
-}
diff --git a/lib/detect.ts b/lib/detect.ts
index 2597739b..3278ddc9 100644
--- a/lib/detect.ts
+++ b/lib/detect.ts
@@ -62,6 +62,14 @@ export async function getLocation(ip, req) {
     return;
   }
 
+  // Cloudflare headers
+  if (req.headers['cf-ipcountry']) {
+    return {
+      country: req.headers['cf-ipcountry'],
+    };
+  }
+
+  // Vercel headers
   if (req.headers['x-vercel-ip-country']) {
     const country = req.headers['x-vercel-ip-country'];
     const region = req.headers['x-vercel-ip-country-region'];
diff --git a/pages/reports/event-data.js b/pages/reports/insights.js
similarity index 50%
rename from pages/reports/event-data.js
rename to pages/reports/insights.js
index 4566b320..45236e10 100644
--- a/pages/reports/event-data.js
+++ b/pages/reports/insights.js
@@ -1,13 +1,13 @@
 import AppLayout from 'components/layout/AppLayout';
-import EventDataReport from 'components/pages/reports/event-data/EventDataReport';
+import InsightsReport from 'components/pages/reports/insights/InsightsReport';
 import { useMessages } from 'hooks';
 
 export default function () {
   const { formatMessage, labels } = useMessages();
 
   return (
-    <AppLayout title={`${formatMessage(labels.eventData)} - ${formatMessage(labels.reports)}`}>
-      <EventDataReport />
+    <AppLayout title={`${formatMessage(labels.insights)} - ${formatMessage(labels.reports)}`}>
+      <InsightsReport />
     </AppLayout>
   );
 }