From 3652ecc6514e14eb86f74eb62fbe40fbd491f731 Mon Sep 17 00:00:00 2001
From: Ben Vinegar <2153+benvinegar@users.noreply.github.com>
Date: Mon, 17 Jun 2024 22:44:55 -0400
Subject: [PATCH] Convert everything to PaginatedTableCards

---
 app/analytics/query.ts           | 46 ++++++++++++++++++---
 app/lib/utils.ts                 |  1 -
 app/routes/dashboard.tsx         | 56 ++++++--------------------
 app/routes/resources.browser.tsx | 42 +++++++++++++++++++
 app/routes/resources.country.tsx | 69 ++++++++++++++++++++++++++++++++
 app/routes/resources.device.tsx  | 42 +++++++++++++++++++
 app/routes/resources.paths.tsx   |  2 +-
 7 files changed, 207 insertions(+), 51 deletions(-)
 create mode 100644 app/routes/resources.browser.tsx
 create mode 100644 app/routes/resources.country.tsx
 create mode 100644 app/routes/resources.device.tsx

diff --git a/app/analytics/query.ts b/app/analytics/query.ts
index 1d53ab90..419b5c9c 100644
--- a/app/analytics/query.ts
+++ b/app/analytics/query.ts
@@ -470,12 +470,34 @@ export class AnalyticsEngineAPI {
         });
     }
 
-    async getCountByUserAgent(siteId: string, interval: string, tz?: string) {
-        return this.getVisitorCountByColumn(siteId, "userAgent", interval, tz);
+    async getCountByUserAgent(
+        siteId: string,
+        interval: string,
+        tz?: string,
+        page: number = 1,
+    ) {
+        return this.getVisitorCountByColumn(
+            siteId,
+            "userAgent",
+            interval,
+            tz,
+            page,
+        );
     }
 
-    async getCountByCountry(siteId: string, interval: string, tz?: string) {
-        return this.getVisitorCountByColumn(siteId, "country", interval, tz);
+    async getCountByCountry(
+        siteId: string,
+        interval: string,
+        tz?: string,
+        page: number = 1,
+    ) {
+        return this.getVisitorCountByColumn(
+            siteId,
+            "country",
+            interval,
+            tz,
+            page,
+        );
     }
 
     async getCountByReferrer(
@@ -492,21 +514,33 @@ export class AnalyticsEngineAPI {
             page,
         );
     }
-    async getCountByBrowser(siteId: string, interval: string, tz?: string) {
+    async getCountByBrowser(
+        siteId: string,
+        interval: string,
+        tz?: string,
+        page: number = 1,
+    ) {
         return this.getVisitorCountByColumn(
             siteId,
             "browserName",
             interval,
             tz,
+            page,
         );
     }
 
-    async getCountByDevice(siteId: string, interval: string, tz?: string) {
+    async getCountByDevice(
+        siteId: string,
+        interval: string,
+        tz?: string,
+        page: number = 1,
+    ) {
         return this.getVisitorCountByColumn(
             siteId,
             "deviceModel",
             interval,
             tz,
+            page,
         );
     }
 
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index 8a07e267..6ff529fc 100644
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@@ -12,6 +12,5 @@ export function paramsFromUrl(url: string) {
     searchParams.forEach((value, key) => {
         params[key] = value;
     });
-    console.log(params);
     return params;
 }
diff --git a/app/routes/dashboard.tsx b/app/routes/dashboard.tsx
index 196b5d37..acd2a2fe 100644
--- a/app/routes/dashboard.tsx
+++ b/app/routes/dashboard.tsx
@@ -20,6 +20,9 @@ import { AnalyticsEngineAPI } from "../analytics/query";
 import TableCard from "~/components/TableCard";
 import { ReferrerCard } from "./resources.referrer";
 import { PathsCard } from "./resources.paths";
+import { BrowserCard } from "./resources.browser";
+import { CountryCard } from "./resources.country";
+import { DeviceCard } from "./resources.device";
 
 import TimeSeriesChart from "~/components/TimeSeriesChart";
 import dayjs from "dayjs";
@@ -177,12 +180,6 @@ export const loader = async ({ context, request }: LoaderFunctionArgs) => {
         throw new Error("Failed to fetch data from Analytics Engine");
     }
 
-    // normalize country codes to country names
-    // NOTE: this must be done ONLY on server otherwise hydration mismatches
-    //       can occur because Intl.DisplayNames produces different results
-    //       in different browsers (see )
-    out.countByCountry = convertCountryCodesToNames(out.countByCountry);
-
     out.pagination = {
         referrer: Number(url.searchParams.get("referrer_page") || 1),
     };
@@ -190,25 +187,6 @@ export const loader = async ({ context, request }: LoaderFunctionArgs) => {
     return json(out);
 };
 
-function convertCountryCodesToNames(
-    countByCountry: [string, number][],
-): [string, number][] {
-    const regionNames = new Intl.DisplayNames(["en"], { type: "region" });
-    return countByCountry.map((countByBrowserRow) => {
-        let countryName;
-        try {
-            // throws an exception if country code isn't valid
-            //   use try/catch to be defensive and not explode if an invalid
-            //   country code gets insrted into Analytics Engine
-            countryName = regionNames.of(countByBrowserRow[0])!; // "United States"
-        } catch (err) {
-            countryName = "(unknown)";
-        }
-        const count = countByBrowserRow[1];
-        return [countryName, count];
-    });
-}
-
 export default function Dashboard() {
     const [, setSearchParams] = useSearchParams();
 
@@ -337,25 +315,17 @@ export default function Dashboard() {
                     />
                 </div>
                 <div className="grid md:grid-cols-3 gap-4 mb-4">
-                    <Card>
-                        <TableCard
-                            countByProperty={data.countByBrowser}
-                            columnHeaders={["Browser", "Visitors"]}
-                        />
-                    </Card>
-                    <Card>
-                        <TableCard
-                            countByProperty={data.countByCountry}
-                            columnHeaders={["Country", "Visitors"]}
-                        />
-                    </Card>
+                    <BrowserCard
+                        siteId={data.siteId}
+                        interval={data.interval}
+                    />
 
-                    <Card>
-                        <TableCard
-                            countByProperty={data.countByDevice}
-                            columnHeaders={["Device", "Visitors"]}
-                        ></TableCard>
-                    </Card>
+                    <CountryCard
+                        siteId={data.siteId}
+                        interval={data.interval}
+                    />
+
+                    <DeviceCard siteId={data.siteId} interval={data.interval} />
                 </div>
             </div>
         </div>
diff --git a/app/routes/resources.browser.tsx b/app/routes/resources.browser.tsx
new file mode 100644
index 00000000..de01c35a
--- /dev/null
+++ b/app/routes/resources.browser.tsx
@@ -0,0 +1,42 @@
+import { useFetcher } from "@remix-run/react";
+
+import type { LoaderFunctionArgs } from "@remix-run/cloudflare";
+import { json } from "@remix-run/cloudflare";
+
+import { paramsFromUrl } from "~/lib/utils";
+import PaginatedTableCard from "~/components/PaginatedTableCard";
+
+export async function loader({ context, request }: LoaderFunctionArgs) {
+    const { analyticsEngine } = context;
+
+    const { interval, site, page = 1 } = paramsFromUrl(request.url);
+    const tz = context.requestTimezone as string;
+
+    return json({
+        countsByProperty: await analyticsEngine.getCountByBrowser(
+            site,
+            interval,
+            tz,
+            Number(page),
+        ),
+        page: Number(page),
+    });
+}
+
+export const BrowserCard = ({
+    siteId,
+    interval,
+}: {
+    siteId: string;
+    interval: string;
+}) => {
+    return (
+        <PaginatedTableCard
+            siteId={siteId}
+            interval={interval}
+            columnHeaders={["Browser", "Visitors"]}
+            dataFetcher={useFetcher<typeof loader>()}
+            loaderUrl="/resources/browser"
+        />
+    );
+};
diff --git a/app/routes/resources.country.tsx b/app/routes/resources.country.tsx
new file mode 100644
index 00000000..564c19f5
--- /dev/null
+++ b/app/routes/resources.country.tsx
@@ -0,0 +1,69 @@
+import { useFetcher } from "@remix-run/react";
+
+import type { LoaderFunctionArgs } from "@remix-run/cloudflare";
+import { json } from "@remix-run/cloudflare";
+
+import { paramsFromUrl } from "~/lib/utils";
+import PaginatedTableCard from "~/components/PaginatedTableCard";
+
+function convertCountryCodesToNames(
+    countByCountry: [string, number][],
+): [string, number][] {
+    const regionNames = new Intl.DisplayNames(["en"], { type: "region" });
+    return countByCountry.map((countByBrowserRow) => {
+        let countryName;
+        try {
+            // throws an exception if country code isn't valid
+            //   use try/catch to be defensive and not explode if an invalid
+            //   country code gets insrted into Analytics Engine
+            countryName = regionNames.of(countByBrowserRow[0])!; // "United States"
+        } catch (err) {
+            countryName = "(unknown)";
+        }
+        const count = countByBrowserRow[1];
+        return [countryName, count];
+    });
+}
+
+export async function loader({ context, request }: LoaderFunctionArgs) {
+    const { analyticsEngine } = context;
+
+    const { interval, site, page = 1 } = paramsFromUrl(request.url);
+    const tz = context.requestTimezone as string;
+
+    const countByCountry = await analyticsEngine.getCountByCountry(
+        site,
+        interval,
+        tz,
+        Number(page),
+    );
+
+    // normalize country codes to country names
+    // NOTE: this must be done ONLY on server otherwise hydration mismatches
+    //       can occur because Intl.DisplayNames produces different results
+    //       in different browsers (see )
+    const normalizedCountByCountry = convertCountryCodesToNames(countByCountry);
+
+    return json({
+        countsByProperty: normalizedCountByCountry,
+        page: Number(page),
+    });
+}
+
+export const CountryCard = ({
+    siteId,
+    interval,
+}: {
+    siteId: string;
+    interval: string;
+}) => {
+    return (
+        <PaginatedTableCard
+            siteId={siteId}
+            interval={interval}
+            columnHeaders={["Browser", "Visitors"]}
+            dataFetcher={useFetcher<typeof loader>()}
+            loaderUrl="/resources/country"
+        />
+    );
+};
diff --git a/app/routes/resources.device.tsx b/app/routes/resources.device.tsx
new file mode 100644
index 00000000..fb70518d
--- /dev/null
+++ b/app/routes/resources.device.tsx
@@ -0,0 +1,42 @@
+import { useFetcher } from "@remix-run/react";
+
+import type { LoaderFunctionArgs } from "@remix-run/cloudflare";
+import { json } from "@remix-run/cloudflare";
+
+import { paramsFromUrl } from "~/lib/utils";
+import PaginatedTableCard from "~/components/PaginatedTableCard";
+
+export async function loader({ context, request }: LoaderFunctionArgs) {
+    const { analyticsEngine } = context;
+
+    const { interval, site, page = 1 } = paramsFromUrl(request.url);
+    const tz = context.requestTimezone as string;
+
+    return json({
+        countsByProperty: await analyticsEngine.getCountByDevice(
+            site,
+            interval,
+            tz,
+            Number(page),
+        ),
+        page: Number(page),
+    });
+}
+
+export const DeviceCard = ({
+    siteId,
+    interval,
+}: {
+    siteId: string;
+    interval: string;
+}) => {
+    return (
+        <PaginatedTableCard
+            siteId={siteId}
+            interval={interval}
+            columnHeaders={["Path", "Visitors"]}
+            dataFetcher={useFetcher<typeof loader>()}
+            loaderUrl="/resources/device"
+        />
+    );
+};
diff --git a/app/routes/resources.paths.tsx b/app/routes/resources.paths.tsx
index 90450dd0..ee8a67b7 100644
--- a/app/routes/resources.paths.tsx
+++ b/app/routes/resources.paths.tsx
@@ -34,7 +34,7 @@ export const PathsCard = ({
         <PaginatedTableCard
             siteId={siteId}
             interval={interval}
-            columnHeaders={["Referrer", "Views", "Visitors"]}
+            columnHeaders={["Path", "Visitors", "Views"]}
             dataFetcher={useFetcher<typeof loader>()}
             loaderUrl="/resources/paths"
         />