Lint and TRPC

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

@@ -1,33 +1,31 @@
 import Image from "next/image";
 import FilteredLightbox from "@/components/lightbox";
-import { type GetPhotos } from "@/app/api/photos/route";
-
-async function getImageData(): Promise<GetPhotos> {
-  const res = await fetch(`http://localhost:3000/api/photos`, { next: { revalidate: false, tags: ['photos'] } });
-  return res.json() as Promise<GetPhotos>;
-}
+import { trpc } from "@/trpc/server";
+import { TRPCProvider } from "@/trpc/client";
 
 export default async function Photos(): Promise<React.JSX.Element> {
-  const {data: imageData} = await getImageData();
-  
+  const { data: images } = await trpc.photos.list();
+
   return (
     <div className="mx-auto">
-      <FilteredLightbox imageData={imageData.images}>
-        {imageData.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>
+      <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>
+      </TRPCProvider>
     </div>
   );
 }