From f02baa95b73103b78d0dcf4ffd56f9282defcc56 Mon Sep 17 00:00:00 2001
From: Ayu <hello@ayuhito.com>
Date: Sun, 3 Mar 2024 22:56:39 +0000
Subject: [PATCH] fix: map dashboard filters to db enums

---
 core/db/filter.go                             | 16 ++++++++++++++
 core/generate.sh                              |  0
 core/model/event.go                           | 15 +++++++++++++
 dashboard/app/components/stats/Filter.tsx     |  7 ++++++-
 dashboard/app/components/stats/StatsTable.tsx | 21 +++++++++++--------
 5 files changed, 49 insertions(+), 10 deletions(-)
 mode change 100644 => 100755 core/generate.sh

diff --git a/core/db/filter.go b/core/db/filter.go
index 237fe2f7..903df041 100644
--- a/core/db/filter.go
+++ b/core/db/filter.go
@@ -1,9 +1,11 @@
 package db
 
 import (
+	"strconv"
 	"strings"
 
 	"github.com/medama-io/medama/api"
+	"github.com/medama-io/medama/model"
 )
 
 // FilterField represents a mapping of the filter field to the database column.
@@ -106,6 +108,20 @@ func NewFilter(field FilterField, param interface{}) *Filter {
 	case api.OptFilterFixed:
 		if v.IsSet() {
 			value, operation = FilterFixedToValues(v.Value)
+
+			// Convert the value to the enum integer for the database
+			//nolint:exhaustive // No other fields use uint8 enums
+			switch field {
+			case FilterBrowser:
+				value = strconv.Itoa(int(model.NewBrowserName(value)))
+			case FilterOS:
+				value = strconv.Itoa(int(model.NewOSName(value)))
+			case FilterDevice:
+				value = strconv.Itoa(int(model.NewDeviceTypeString(value)))
+			default:
+				// Do nothing
+			}
+
 		} else {
 			return nil
 		}
diff --git a/core/generate.sh b/core/generate.sh
old mode 100644
new mode 100755
diff --git a/core/model/event.go b/core/model/event.go
index 6fdaa236..ae04c880 100644
--- a/core/model/event.go
+++ b/core/model/event.go
@@ -160,6 +160,21 @@ func NewDeviceType(desktop bool, mobile bool, tablet bool, tv bool) DeviceType {
 	}
 }
 
+func NewDeviceTypeString(name string) DeviceType {
+	switch name {
+	case "Desktop":
+		return DesktopDevice
+	case "Mobile":
+		return MobileDevice
+	case "Tablet":
+		return TabletDevice
+	case "TV":
+		return TVDevice
+	default:
+		return UnknownDevice
+	}
+}
+
 func (d DeviceType) String() string {
 	switch d {
 	case DesktopDevice:
diff --git a/dashboard/app/components/stats/Filter.tsx b/dashboard/app/components/stats/Filter.tsx
index cb1e2e5f..48b8ec36 100644
--- a/dashboard/app/components/stats/Filter.tsx
+++ b/dashboard/app/components/stats/Filter.tsx
@@ -97,6 +97,7 @@ const filterOptions: FilterOptions = {
 			Firefox: { label: 'Firefox', value: 'Firefox' },
 			Opera: { label: 'Opera', value: 'Opera' },
 			Safari: { label: 'Safari', value: 'Safari' },
+			Unknown: { label: 'Unknown', value: 'Unknown' },
 		},
 	},
 	os: {
@@ -104,10 +105,12 @@ const filterOptions: FilterOptions = {
 		type: 'fixed',
 		choices: {
 			Windows: { label: 'Windows', value: 'Windows' },
-			'Mac OS': { label: 'Mac OS', value: 'MacOS' },
+			MacOS: { label: 'MacOS', value: 'MacOS' },
 			Linux: { label: 'Linux', value: 'Linux' },
 			iOS: { label: 'iOS', value: 'iOS' },
 			Android: { label: 'Android', value: 'Android' },
+			ChromeOS: { label: 'ChromeOS', value: 'ChromeOS' },
+			Unknown: { label: 'Unknown', value: 'Unknown' },
 		},
 	},
 	device: {
@@ -117,6 +120,8 @@ const filterOptions: FilterOptions = {
 			Desktop: { label: 'Desktop', value: 'Desktop' },
 			Mobile: { label: 'Mobile', value: 'Mobile' },
 			Tablet: { label: 'Tablet', value: 'Tablet' },
+			TV: { label: 'TV', value: 'TV' },
+			Unknown: { label: 'Unknown', value: 'Unknown' },
 		},
 	},
 	country: {
diff --git a/dashboard/app/components/stats/StatsTable.tsx b/dashboard/app/components/stats/StatsTable.tsx
index 8318969e..27a3aff4 100644
--- a/dashboard/app/components/stats/StatsTable.tsx
+++ b/dashboard/app/components/stats/StatsTable.tsx
@@ -93,7 +93,7 @@ const pageviewsPercentage: DataTableColumn = {
 };
 const bounceRate: DataTableColumn = {
 	accessor: 'bounce_rate',
-	title: 'Bounce Rate %',
+	title: 'Bounce %',
 	render: (record: DataRow) =>
 		formatPercentage((record.bounces ?? 0) / (record.visitors ?? 0)),
 };
@@ -133,12 +133,6 @@ const QueryTable = ({ query, data }: QueryTableProps) => {
 		setPageSize(newSize);
 	};
 
-	useEffect(() => {
-		const from = (page - 1) * pageSize;
-		const to = from + pageSize;
-		setRecords(data.slice(from, to));
-	}, [data, page, pageSize]);
-
 	// Sorting
 	const [sortStatus, setSortStatus] = useState<DataTableSortStatus<DataRow>>({
 		columnAccessor: 'visitors',
@@ -146,9 +140,18 @@ const QueryTable = ({ query, data }: QueryTableProps) => {
 	});
 
 	useEffect(() => {
+		// Calculate the range of records to display
+		const from = (page - 1) * pageSize;
+		const to = from + pageSize;
+
+		// Sort and slice the data to page size
 		const temp = [...data].sort(sortBy(sortStatus.columnAccessor));
-		setRecords(sortStatus.direction === 'desc' ? temp.reverse() : temp);
-	}, [sortStatus, data]);
+		setRecords(
+			sortStatus.direction === 'desc'
+				? temp.reverse().slice(from, to)
+				: temp.slice(from, to)
+		);
+	}, [sortStatus, data, page, pageSize]);
 
 	// Define columns based on query
 	const columns: DataTableColumn[] = [];