Set up infinite scroll n stuff

.gitea/workflows/deploy.yaml

@@ -40,12 +40,12 @@ jobs:
           context: .
           push: true
           tags: |
-            'gitea.home.joemonk.co.uk/${{ gitea.repository }}:latest'
-            'gitea.home.joemonk.co.uk/${{ gitea.repository }}:${{ gitea.sha }}'
-            'registry.fly.io/${{ gitea.repository }}:${{ gitea.sha }}'
+            gitea.home.joemonk.co.uk/${{ gitea.repository }}:latest
+            gitea.home.joemonk.co.uk/${{ gitea.repository }}:${{ gitea.sha }}
+            registry.fly.io/joemonk:${{ gitea.sha }}
 
       - uses: superfly/flyctl-actions/setup-flyctl@master
 
-      - run: flyctl deploy --remote-only -i registry.fly.io/${{ gitea.repository }}:${{ gitea.sha }}
+      - run: flyctl deploy --remote-only -i registry.fly.io/joemonk:${{ gitea.sha }}
         env:
           FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

Dockerfile

@@ -15,7 +15,7 @@ WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
-ENV NEXT_TELEMETRY_DISABLED 1
+ENV NEXT_TELEMETRY_DISABLED=1
 
 RUN npm run build
 
@@ -23,8 +23,8 @@ RUN npm run build
 FROM base AS runner
 WORKDIR /app
 
-ENV NODE_ENV production
-ENV NEXT_TELEMETRY_DISABLED 1
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
 
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
@@ -39,13 +39,13 @@ RUN chown nextjs:nodejs .next
 # https://nextjs.org/docs/advanced-features/output-file-tracing
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
-COPY --from=builder /app/db.sql ./db.sql
+COPY --from=builder --chown=nextjs:nodejs /app/db.sql ./db.sql
 
 USER nextjs
 
 EXPOSE 3000
 
-ENV PORT 3000
+ENV PORT=3000
 
 # server.js is created by next build from the standalone output
 # https://nextjs.org/docs/pages/api-reference/next-config-js/output

fly.toml

@@ -6,17 +6,15 @@
 app = 'joemonk'
 primary_region = 'lhr'
 
-[build]
-
 [http_service]
   internal_port = 3000
   force_https = true
   auto_stop_machines = 'stop'
   auto_start_machines = true
-  min_machines_running = 0
-  processes = ['app']
+  min_machines_running = 1
+  processes = ["app"]
   [[http_service.checks]]
-    grace_period = "15s"
+    grace_period = "30s"
     interval = "120s"
     method = "GET"
     timeout = "5s"

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;
+}