Set up infinite scroll n stuff

next.config.mjs

@@ -8,7 +8,7 @@ const nextConfig = {
     reactCompiler: true,
     ppr: "incremental",
   },
-  serverExternalPackages: ["typeorm", "better-sqlite3"],
+  serverExternalPackages: ["better-sqlite3"],
   reactStrictMode: true,
   output: "standalone",
   images: {

src/app/(root)/manage/page.tsx

@@ -0,0 +1,14 @@
+import { TRPCProvider } from "@/trpc/client";
+import RefreshImageDb from "@/components/refresh-image-db";
+import { trpc } from "@/trpc/server";
+
+export default async function Photos(): Promise<React.JSX.Element> {
+  const imageCount = await trpc.photos.count();
+  return (
+    <div className="mx-auto">
+      <TRPCProvider>
+        <RefreshImageDb count={imageCount}/>
+      </TRPCProvider>
+    </div>
+  );
+}

src/app/(root)/photos/page.tsx

@@ -9,22 +9,7 @@ export default async function Photos(): Promise<React.JSX.Element> {
   return (
     <div className="mx-auto">
       <TRPCProvider>
-        <FilteredLightbox imageData={images}>
-          {images.map((image) => (
-            <Image
-              key={image.src}
-              alt={image.src}
-              src={image.src}
-              className="object-contain h-60 w-80"
-              sizes="100vw"
-              loading="lazy"
-              width={image.width}
-              height={image.height}
-              blurDataURL={image.blur}
-              placeholder="blur"
-            />
-          ))}
-        </FilteredLightbox>
+        <FilteredLightbox imageData={images}/>
       </TRPCProvider>
     </div>
   );

src/components/footer.tsx

@@ -3,7 +3,7 @@ export default function NavBar(): React.JSX.Element {
     <footer className="dark:bg-dracula-bg-darker border-t-2 dark:border-dracula-purple">
       <div className="mx-auto max-w-7xl px-4">
         <div className="relative flex flex-row-reverse h-12 items-center justify-between">
-          <span className='dark:text-white select-none'>© Joe Monk 2024</span>
+          <span className='dark:text-white select-none'>© Joe Monk 2025</span>
         </div>
       </div>
     </footer>

src/components/lightbox.tsx

@@ -129,15 +129,15 @@ interface UsernameFormElement extends HTMLFormElement {
 
 export default function FilteredLightbox(props: {
   imageData: ImageData[];
-  children: React.JSX.Element[];
 }): React.JSX.Element {
-  //const [imageData, setImageData] = useState(props.imageData);
-  const [imageData] = useState(props.imageData);
   const photoQuery = trpc.photos.list.useInfiniteQuery(
     {
       limit: 1,
     },
     {
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false,
       initialData: {
         pages: [
           {
@@ -151,24 +151,30 @@ export default function FilteredLightbox(props: {
     }
   );
 
-  const refreshQuery = trpc.photos.update.useQuery(undefined, {
-    enabled: false,
-    retry: false,
-  });
+  // Call from observable
+  function loadNextPage(): void {
+    console.log(photoQuery.isFetchingNextPage);
+    console.log(photoQuery.hasNextPage);
+    if (!photoQuery.isFetchingNextPage) {
+      void photoQuery.fetchNextPage();
+    }
+  }
 
   function handleSubmit(event: React.FormEvent<UsernameFormElement>): void {
     event.preventDefault();
-    // const imageData = props.imageData;
-    // setImageData(
+    // Set filters, then action in the re-render on the data, or pass to photo query?
+    // setFilters(
     //   imageData.filter(
     //     (data) => data.src === event.currentTarget.elements.src.value
     //   )
     // );
-    void photoQuery.fetchNextPage();
   }
 
-  const children = photoQuery.data.pages
+  const imageData = photoQuery.data.pages
     .flatMap((data) => data.data)
+    .filter((data) => !!data);
+
+  const images = imageData
     .map((data) => (
       <Image
         key={data.src}
@@ -182,8 +188,7 @@ export default function FilteredLightbox(props: {
         blurDataURL={data.blur}
         placeholder="blur"
       />
-    ))
-    .filter((data) => !!data);
+    ));
 
   return (
     <>
@@ -194,16 +199,7 @@ export default function FilteredLightbox(props: {
         </div>
         <button type="submit">Submit</button>
       </form>
-      <button
-        onClick={() => {
-          void refreshQuery.refetch();
-        }}
-      >
-        Refresh
-      </button>
-      {refreshQuery.data ? JSON.stringify(refreshQuery.data) : "\nNot"}
-      {refreshQuery.error ? JSON.stringify(refreshQuery.error) : "\nNo Error"}
-      <Lightbox imageData={imageData}>{...children}</Lightbox>
+      <Lightbox imageData={imageData}>{...images}</Lightbox>
     </>
   );
 }

src/components/refresh-image-db.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import React from "react";
+import { trpc } from "@/trpc/client";
+
+export default function RefreshImageDb({count}: {count: number}): React.JSX.Element {
+  const countQuery = trpc.photos.count.useQuery(undefined, {
+    refetchOnMount: false,
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+    initialData: count
+  });
+  const refreshQuery = trpc.photos.update.useQuery(undefined, {
+    enabled: false,
+    retry: false,
+  });
+
+
+  
+  return (
+    <>
+      {countQuery.data}
+      <button onClick={() => void refreshQuery.refetch()}>
+        Refresh image db
+      </button>
+      {refreshQuery.data ? JSON.stringify(refreshQuery.data) : "\nNot"}
+      {refreshQuery.error ? JSON.stringify(refreshQuery.error) : "\nNo Error"}
+    </>
+  );
+}

src/trpc/routers/photos.ts

@@ -3,6 +3,7 @@ import { createTRPCRouter, privateProcedure, publicProcedure } from '../init';
 
 import { list } from './photos/list';
 import { update } from './photos/update';
+import { count } from './photos/count';
 
 export const photosRouter = createTRPCRouter({
   list: publicProcedure
@@ -31,5 +32,6 @@ export const photosRouter = createTRPCRouter({
         next
       };
     }),
+  count: publicProcedure.query(count),
   update: privateProcedure.query(update)
 });

src/trpc/routers/photos/count/index.ts

@@ -0,0 +1,7 @@
+import db from "@/db/db";
+import { photosTable } from "@/db/schema/photo";
+
+export async function count(): Promise<number> {
+  const count = await db.$count(photosTable);
+  return count;
+}