Table cards now paginate independently (#80)

benvinegar · Jun 19, 2024 · 848569e · 848569e
1 parent 6ce3675
commit 848569e
Show file tree

Hide file tree

Showing 14 changed files with 735 additions and 326 deletions.
diff --git a/app/analytics/query.ts b/app/analytics/query.ts
@@ -305,10 +305,9 @@ export class AnalyticsEngineAPI {
         column: T,
         interval: string,
         tz?: string,
-        limit?: number,
+        page: number = 1,
+        limit: number = 10,
     ) {
-        limit = limit || 10;
-
         const intervalSql = intervalToSql(interval, tz);
 
         const _column = ColumnMappings[column];
@@ -320,7 +319,7 @@ export class AnalyticsEngineAPI {
                 AND ${ColumnMappings.siteId} = '${siteId}'
             GROUP BY ${_column}
             ORDER BY count DESC
-            LIMIT ${limit}`;
+            LIMIT ${limit * page}`;
 
         type SelectionSet = {
             count: number;
@@ -342,8 +341,16 @@ export class AnalyticsEngineAPI {
 
                 const responseData =
                     (await response.json()) as AnalyticsQueryResult<SelectionSet>;
+
+                // since CF AE doesn't support OFFSET clauses, we select up to LIMIT and
+                // then slice that into the individual requested page
+                const pageData = responseData.data.slice(
+                    limit * (page - 1),
+                    limit * page,
+                );
+
                 resolve(
-                    responseData.data.map((row) => {
+                    pageData.map((row) => {
                         const key =
                             row[_column] === "" ? "(none)" : row[_column];
                         return [key, row["count"]] as const;
@@ -359,11 +366,9 @@ export class AnalyticsEngineAPI {
         column: T,
         interval: string,
         tz?: string,
-        limit?: number,
+        page: number = 1,
+        limit: number = 10,
     ) {
-        // defaults to 1 day if not specified
-        limit = limit || 10;
-
         const intervalSql = intervalToSql(interval, tz);
 
         const _column = ColumnMappings[column];
@@ -377,7 +382,7 @@ export class AnalyticsEngineAPI {
                 AND ${ColumnMappings.siteId} = '${siteId}'
             GROUP BY ${_column}, ${ColumnMappings.newVisitor}, ${ColumnMappings.newSession}
             ORDER BY count DESC
-            LIMIT ${limit}`;
+            LIMIT ${limit * page}`;
 
         type SelectionSet = {
             readonly count: number;
@@ -401,7 +406,14 @@ export class AnalyticsEngineAPI {
                     const responseData =
                         (await response.json()) as AnalyticsQueryResult<SelectionSet>;
 
-                    const result = responseData.data.reduce(
+                    // since CF AE doesn't support OFFSET clauses, we select up to LIMIT and
+                    // then slice that into the individual requested page
+                    const pageData = responseData.data.slice(
+                        limit * (page - 1),
+                        limit * page,
+                    );
+
+                    const result = pageData.reduce(
                         (acc, row) => {
                             const key =
                                 row[_column] === ""
@@ -426,12 +438,18 @@ export class AnalyticsEngineAPI {
         return returnPromise;
     }
 
-    async getCountByPath(siteId: string, interval: string, tz?: string) {
+    async getCountByPath(
+        siteId: string,
+        interval: string,
+        tz?: string,
+        page: number = 1,
+    ) {
         const allCountsResultPromise = this.getAllCountsByColumn(
             siteId,
             "path",
             interval,
             tz,
+            page,
         );
 
         return allCountsResultPromise.then((allCountsResult) => {
@@ -445,32 +463,77 @@ 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(siteId: string, interval: string, tz?: string) {
-        return this.getVisitorCountByColumn(siteId, "referrer", interval, tz);
+    async getCountByReferrer(
+        siteId: string,
+        interval: string,
+        tz?: string,
+        page: number = 1,
+    ) {
+        return this.getVisitorCountByColumn(
+            siteId,
+            "referrer",
+            interval,
+            tz,
+            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/components/PaginatedTableCard.tsx b/app/components/PaginatedTableCard.tsx
@@ -0,0 +1,65 @@
+import { useEffect } from "react";
+import TableCard from "~/components/TableCard";
+
+import { Card } from "./ui/card";
+import PaginationButtons from "./PaginationButtons";
+
+const ReferrerCard = ({
+    siteId,
+    interval,
+    dataFetcher,
+    columnHeaders,
+    loaderUrl,
+}: {
+    siteId: string;
+    interval: string;
+    dataFetcher: any; // ignore type for now
+    columnHeaders: string[];
+    loaderUrl: string;
+}) => {
+    const countsByProperty = dataFetcher.data?.countsByProperty || [];
+    const page = dataFetcher.data?.page || 1;
+
+    useEffect(() => {
+        if (dataFetcher.state === "idle") {
+            dataFetcher.load(
+                `${loaderUrl}?site=${siteId}&interval=${interval}`,
+            );
+        }
+    }, []);
+
+    useEffect(() => {
+        if (dataFetcher.state === "idle") {
+            dataFetcher.load(
+                `${loaderUrl}?site=${siteId}&interval=${interval}`,
+            );
+        }
+    }, [siteId, interval]);
+
+    function handlePagination(page: number) {
+        dataFetcher.load(
+            `${loaderUrl}?site=${siteId}&interval=${interval}&page=${page}`,
+        );
+    }
+
+    const hasMore = countsByProperty.length === 10;
+    return (
+        <Card className={dataFetcher.state === "loading" ? "opacity-60" : ""}>
+            {countsByProperty ? (
+                <div className="grid grid-rows-[auto,40px] h-full">
+                    <TableCard
+                        countByProperty={countsByProperty}
+                        columnHeaders={columnHeaders}
+                    />
+                    <PaginationButtons
+                        page={page}
+                        hasMore={hasMore}
+                        handlePagination={handlePagination}
+                    />
+                </div>
+            ) : null}
+        </Card>
+    );
+};
+
+export default ReferrerCard;
diff --git a/app/components/PaginationButtons.tsx b/app/components/PaginationButtons.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+interface PaginationButtonsProps {
+    page: number;
+    hasMore: boolean;
+    handlePagination: (page: number) => void;
+}
+
+const PaginationButtons: React.FC<PaginationButtonsProps> = ({
+    page,
+    hasMore,
+    handlePagination,
+}) => {
+    return (
+        <div className="p-2 pr-0 grid grid-cols-[auto,2rem,2rem] text-right">
+            <div></div>
+            <button
+                onClick={() => {
+                    if (page > 1) handlePagination(page - 1);
+                }}
+                className={
+                    page > 1
+                        ? `text-primary hover:cursor-pointer`
+                        : `text-orange-300`
+                }
+            >
+                <ArrowLeft />
+            </button>
+            <button
+                onClick={() => {
+                    if (hasMore) handlePagination(page + 1);
+                }}
+                className={
+                    hasMore
+                        ? "text-primary hover:cursor-pointer"
+                        : "text-orange-300"
+                }
+            >
+                <ArrowRight />
+            </button>
+        </div>
+    );
+};
+
+export default PaginationButtons;
diff --git a/app/components/TableCard.tsx b/app/components/TableCard.tsx
@@ -9,8 +9,6 @@ import {
     TableRow,
 } from "~/components/ui/table";
 
-import { Card } from "~/components/ui/card";
-
 type CountByProperty = [string, string][];
 
 function calculateCountPercentages(countByProperty: CountByProperty) {
@@ -40,49 +38,47 @@ export default function TableCard({
             ? "grid-cols-[minmax(0,1fr),minmax(0,8ch),minmax(0,8ch)]"
             : "grid-cols-[minmax(0,1fr),minmax(0,8ch)]";
     return (
-        <Card>
-            <Table>
-                <TableHeader>
-                    <TableRow className={`${gridCols}`}>
-                        {(columnHeaders || []).map((header: string, index) => (
-                            <TableHead
-                                key={header}
-                                className={
-                                    index === 0
-                                        ? "text-left"
-                                        : "text-right pr-4 pl-0"
-                                }
-                            >
-                                {header}
-                            </TableHead>
-                        ))}
-                    </TableRow>
-                </TableHeader>
-                <TableBody>
-                    {(countByProperty || []).map((item, key) => (
-                        <TableRow
-                            key={item[0]}
-                            className={`group [&_td]:last:rounded-b-md ${gridCols}`}
-                            width={barChartPercentages[key]}
+        <Table>
+            <TableHeader>
+                <TableRow className={`${gridCols}`}>
+                    {(columnHeaders || []).map((header: string, index) => (
+                        <TableHead
+                            key={header}
+                            className={
+                                index === 0
+                                    ? "text-left"
+                                    : "text-right pr-4 pl-0"
+                            }
                         >
-                            <TableCell className="font-medium min-w-48 break-all">
-                                {item[0]}
-                            </TableCell>
+                            {header}
+                        </TableHead>
+                    ))}
+                </TableRow>
+            </TableHeader>
+            <TableBody>
+                {(countByProperty || []).map((item, key) => (
+                    <TableRow
+                        key={item[0]}
+                        className={`group [&_td]:last:rounded-b-md ${gridCols}`}
+                        width={barChartPercentages[key]}
+                    >
+                        <TableCell className="font-medium min-w-48 break-all">
+                            {item[0]}
+                        </TableCell>
 
+                        <TableCell className="text-right min-w-16">
+                            {countFormatter.format(item[1] as number)}
+                        </TableCell>
+
+                        {item.length > 2 && (
                             <TableCell className="text-right min-w-16">
-                                {countFormatter.format(item[1] as number)}
+                                {countFormatter.format(item[2] as number)}
                             </TableCell>
-
-                            {item.length > 2 && (
-                                <TableCell className="text-right min-w-16">
-                                    {countFormatter.format(item[2] as number)}
-                                </TableCell>
-                            )}
-                        </TableRow>
-                    ))}
-                </TableBody>
-            </Table>
-        </Card>
+                        )}
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
     );
 }