Only refresh data when num checkouts changes

app/routes/inventory/layout.tsx

@@ -1,24 +1,25 @@
 import { LoaderFunctionArgs } from "@remix-run/node";
-import { Outlet, json, useLoaderData, useRevalidator } from "@remix-run/react";
-import { useEffect } from "react";
+import { Outlet, json, useFetcher, useLoaderData, useRevalidator } from "@remix-run/react";
+import { useEffect, useState } from "react";
 import { getSession } from "~/auth/session";
 import Header, { HeaderData } from "~/components/header";
+import { enhance } from "~/utils/db.server";
 
 export async function loader({
     request,
   }: LoaderFunctionArgs) {
-    const session = await getSession(
-      request.headers.get("Cookie")
-    );
+    const {dbe, session} = await enhance(request);
   
-    let data : HeaderData = {loggedin: false};
+    let sessiondata : HeaderData = {loggedin: false};
   
     if(session.has("user_id")){
-      data.user = session.get("user");
-      data.loggedin = true;
+      sessiondata.user = session.get("user");
+      sessiondata.loggedin = true;
     }
+
+    const numCheckouts = await dbe.history.count({});
     
-    return json({data});
+    return json({sessiondata, checkouts: numCheckouts});
   }
 
 
@@ -27,11 +28,29 @@ export default function InventoryLayout() {
     let data = useLoaderData<typeof loader>();
     let revalidator = useRevalidator();
 
+    const [checkouts, setCheckouts] = useState(data.checkouts);
+    let fetcher = useFetcher();
+
     useEffect(() => {
       const timer = setTimeout(() => {
-        if (revalidator.state === "idle") {
-          revalidator.revalidate();
+
+        fetcher.load("/resource/checkouts");
+
+        if(fetcher.state === "idle"){
+          if(!fetcher.data) return;
+
+          let newCheckouts = Number(fetcher.data.checkouts);
+          if(newCheckouts != checkouts){
+
+            setCheckouts(newCheckouts);
+
+            if (revalidator.state === "idle") {
+              revalidator.revalidate();
+            }
+          }
         }
+
+        
       }, 5000);
     
       return () => clearTimeout(timer);
@@ -40,7 +59,7 @@ export default function InventoryLayout() {
     return (
     <>
         <header>
-            <Header data={data.data}></Header>
+            <Header data={data.sessiondata}></Header>
         </header>
         <main>
             <Outlet />

app/routes/scan/layout.tsx

@@ -1,6 +1,6 @@
 import { LoaderFunctionArgs } from "@remix-run/node";
-import { Outlet, json, redirect, useLoaderData, useRevalidator } from "@remix-run/react";
-import { useEffect } from "react";
+import { Outlet, json, redirect, useFetcher, useLoaderData, useRevalidator } from "@remix-run/react";
+import { useEffect, useState } from "react";
 import { enhance } from "~/utils/db.server";
 
 export async function loader({
@@ -17,15 +17,31 @@ export async function loader({
 
 export default function InventoryLayout() {
     useLoaderData<typeof loader>();
-    
     let revalidator = useRevalidator();
 
+    const [checkouts, setCheckouts] = useState(0);
+    let fetcher = useFetcher();
+
     useEffect(() => {
       const timer = setTimeout(() => {
-        if (revalidator.state === "idle") {
-          revalidator.revalidate();
+
+        fetcher.load("/resource/checkouts");
+
+        if(fetcher.state === "idle"){
+          if(!fetcher.data) return;
+
+          let newCheckouts = Number(fetcher.data.checkouts);
+          
+          if(newCheckouts < checkouts){
+            if (revalidator.state === "idle") {
+              revalidator.revalidate();
+            }
+          }
+
+          setCheckouts(newCheckouts);
         }
-      }, 10000);
+        
+      }, 5000);
     
       return () => clearTimeout(timer);
     });