Reduce card data fetching complexity (#115)

* Simplify useEffect/loader usage in resources.stats.tsx * Better state management/loader usage * Fix comment
benvinegar · Nov 18, 2024 · de1dc0e · de1dc0e
1 parent 5c4ed8b
commit de1dc0e
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 68 deletions.
diff --git a/app/components/PaginatedTableCard.tsx b/app/components/PaginatedTableCard.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import TableCard from "~/components/TableCard";
 
 import { Card } from "./ui/card";
@@ -27,38 +27,27 @@ const PaginatedTableCard = ({
     timezone,
 }: PaginatedTableCardProps) => {
     const countsByProperty = dataFetcher.data?.countsByProperty || [];
-    const page = dataFetcher.data?.page || 1;
-
-    const loadData = (page: string | undefined = undefined) => {
-        // turn filters into query string
-        const filterString = filters
-            ? Object.entries(filters)
-                  .map(([key, value]) => `&${key}=${value}`)
-                  .join("")
-            : "";
-
-        let url = `${loaderUrl}?site=${siteId}&interval=${interval}&timezone=${timezone}${filterString}`;
-        if (page) {
-            url += `&page=${page}`;
-        }
-
-        dataFetcher.load(url);
-    };
+    const [page, setPage] = useState(1);
 
     useEffect(() => {
-        if (dataFetcher.state === "idle") {
-            loadData();
-        }
-    }, []);
+        const params = {
+            site: siteId,
+            interval,
+            timezone,
+            ...filters,
+            page,
+        };
 
-    useEffect(() => {
-        if (dataFetcher.state === "idle") {
-            loadData();
-        }
-    }, [siteId, interval, filters]);
+        dataFetcher.submit(params, {
+            method: "get",
+            action: loaderUrl,
+        });
+        // NOTE: dataFetcher is intentionally omitted from the useEffect dependency array
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [loaderUrl, siteId, interval, filters, timezone, page]); //
 
     function handlePagination(page: number) {
-        loadData(page.toString());
+        setPage(page);
     }
 
     const hasMore = countsByProperty.length === 10;

diff --git a/app/routes/resources.stats.tsx b/app/routes/resources.stats.tsx
@@ -34,31 +34,25 @@ export const StatsCard = ({
     timezone: string;
 }) => {
     const dataFetcher = useFetcher<typeof loader>();
+
     const { views, visits, visitors } = dataFetcher.data || {};
     const countFormatter = Intl.NumberFormat("en", { notation: "compact" });
 
-    const loadData = () => {
-        const filterString = filters
-            ? Object.entries(filters)
-                  .map(([key, value]) => `&${key}=${value}`)
-                  .join("")
-            : "";
-
-        const url = `/resources/stats?site=${siteId}&interval=${interval}&timezone=${timezone}${filterString}`;
-        dataFetcher.load(url);
-    };
-
     useEffect(() => {
-        if (dataFetcher.state === "idle") {
-            loadData();
-        }
-    }, []);
+        const params = {
+            site: siteId,
+            interval,
+            timezone,
+            ...filters,
+        };
 
-    useEffect(() => {
-        if (dataFetcher.state === "idle") {
-            loadData();
-        }
-    }, [siteId, interval, filters]);
+        dataFetcher.submit(params, {
+            method: "get",
+            action: `/resources/stats`,
+        });
+        // NOTE: dataFetcher is intentionally omitted from the useEffect dependency array
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [siteId, interval, filters, timezone]);
 
     return (
         <Card>

diff --git a/app/routes/resources.timeseries.tsx b/app/routes/resources.timeseries.tsx
@@ -60,28 +60,21 @@ export const TimeSeriesCard = ({
     const dataFetcher = useFetcher<typeof loader>();
     const { chartData, intervalType } = dataFetcher.data || {};
 
-    const loadData = () => {
-        const filterString = filters
-            ? Object.entries(filters)
-                  .map(([key, value]) => `&${key}=${value}`)
-                  .join("")
-            : "";
-
-        const url = `/resources/timeseries?site=${siteId}&interval=${interval}&timezone=${timezone}${filterString}`;
-        dataFetcher.load(url);
-    };
-
     useEffect(() => {
-        if (dataFetcher.state === "idle") {
-            loadData();
-        }
-    }, []);
+        const params = {
+            site: siteId,
+            interval,
+            timezone,
+            ...filters,
+        };
 
-    useEffect(() => {
-        if (dataFetcher.state === "idle") {
-            loadData();
-        }
-    }, [siteId, interval, filters]);
+        dataFetcher.submit(params, {
+            method: "get",
+            action: `/resources/timeseries`,
+        });
+        // NOTE: dataFetcher is intentionally omitted from the useEffect dependency array
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [siteId, interval, filters, timezone]);
 
     return (
         <Card>