Moved conditions and defined second queries/mutations

src/app/_components/album-image.tsx

@@ -11,6 +11,8 @@ interface AlbumImageProps {
   place: number;
   spookyImageLoaded: boolean;
   onImageLoad: () => void;
+  loadGeneratedImage: boolean;
+  onQueue: boolean;
 }
 
 export function AlbumImage({
@@ -23,6 +25,8 @@ export function AlbumImage({
   place,
   spookyImageLoaded,
   onImageLoad,
+  loadGeneratedImage,
+  onQueue,
 }: AlbumImageProps) {
   return (
     <Tilt tiltMaxAngleX={10} tiltMaxAngleY={10} transitionSpeed={200}>
@@ -34,30 +38,26 @@ export function AlbumImage({
         src={imageSource}
         alt={album.name}
       />
-      {spookyImageSource &&
+      {loadGeneratedImage && spookyImageSource && (
-        (generateSpookyImageData
+        <img
-          ? lastSpookyImageLoaded >= place ||
+          className="h-36 w-36 cursor-pointer rounded"
-            lastSpookyImageLoaded + 1 === place
+          style={{
-          : true) && (
+            display: showSpookyImage && spookyImageLoaded ? "block" : "none",
-          <img
+          }}
-            className="h-36 w-36 cursor-pointer rounded"
+          src={spookyImageSource}
-            style={{
+          alt={album.name}
-              display: showSpookyImage && spookyImageLoaded ? "block" : "none",
+          onLoad={onImageLoad}
-            }}
+          onError={() => {
-            src={spookyImageSource}
+            onImageLoad();
-            alt={album.name}
+          }}
-            onLoad={onImageLoad}
+        />
-            onError={() => {
+      )}
-              onImageLoad();
-            }}
-          />
-        )}
       {showSpookyImage && !spookyImageLoaded && (
         <div className="flex h-36 w-36 items-center justify-center rounded bg-slate-300 bg-opacity-10">
           <div>
             {(() => {
               if (generateSpookyImageData) {
-                if (lastSpookyImageLoaded < place - 1) {
+                if (onQueue) {
                   return (
                     <>
                       <l-pulsar

src/app/_components/album-showcase.tsx

@@ -46,7 +46,28 @@ export default function AlbumShowcase({
   });
 
   const generateSpookyImage = api.entry.generate.useMutation();
+  const generateSecondSpookyImage = api.entry.generate.useMutation();
+
+  const spookyImageMatch = (
+    (entry.data?.value || generateSpookyImage.data) as null | string
+  )?.match(/https:\/\/res.cloudinary.com\/[^"]+/);
+
+  const spookyImageSource = spookyImageMatch ? spookyImageMatch[0] : "";
+
+  const secondEntry = api.entry.get.useQuery(
+    {
+      type: "album",
+      name: album.name,
+      image: spookyImageSource,
+      number: 2,
+    },
+    {
+      enabled: !!spookyImageSource,
+    },
+  );
+
   const saveImage = api.entry.save.useMutation();
+  const saveSecondImage = api.entry.save.useMutation();
 
   const handleGenerateSpookyImage = async () => {
     if (!entry.data && !entry.isLoading) {
@@ -60,6 +81,18 @@ export default function AlbumShowcase({
     }
   };
 
+  const handleSecondGenerateSpookyImage = async () => {
+    if (!secondEntry.data && !secondEntry.isLoading) {
+      generateSecondSpookyImage.mutate({
+        entry: {
+          type: "album",
+          name: album.name,
+          image: spookyImageSource as string,
+        },
+      });
+    }
+  };
+
   const handleSaveImage = async () => {
     if (!entry.data && !entry.isLoading) {
       saveImage.mutate({
@@ -72,6 +105,18 @@ export default function AlbumShowcase({
     }
   };
 
+  const handleSecondSaveImage = async () => {
+    if (!secondEntry.data && !secondEntry.isLoading) {
+      saveSecondImage.mutate({
+        entry: {
+          type: "album",
+          image: spookyImageSource as string,
+          name: album.name,
+        },
+      });
+    }
+  };
+
   useEffect(() => {
     handleGenerateSpookyImage();
   }, [entry.data]);
@@ -84,12 +129,6 @@ export default function AlbumShowcase({
 
   //TODO ERROR HANDLING
 
-  const spookyImageMatch = (
-    (entry.data?.value || generateSpookyImage.data) as null | string
-  )?.match(/https:\/\/res.cloudinary.com\/[^"]+/);
-
-  const spookyImageSource = spookyImageMatch ? spookyImageMatch[0] : null;
-
   const onImageLoad = () => {
     if (!spookyImageLoaded) {
       setSpookyImageLoaded(true);
@@ -120,9 +159,19 @@ export default function AlbumShowcase({
               place={place}
               spookyImageLoaded={spookyImageLoaded}
               onImageLoad={onImageLoad}
+              loadGeneratedImage={
+                !!(
+                  spookyImageSource &&
+                  (generateSpookyImage.data
+                    ? lastSpookyImageLoaded >= place ||
+                      lastSpookyImageLoaded + 1 === place
+                    : true)
+                )
+              }
+              onQueue={lastSpookyImageLoaded < place - 1}
             />
           </SwiperSlide>
-          <SwiperSlide>
+          {/* <SwiperSlide>
             <AlbumImage
               showSpookyImage={showSpookyImage}
               imageSource={imageSource}
@@ -134,7 +183,7 @@ export default function AlbumShowcase({
               spookyImageLoaded={spookyImageLoaded}
               onImageLoad={onImageLoad}
             />
-          </SwiperSlide>
+          </SwiperSlide> */}
         </Swiper>
       </div>
       <section className="flex h-36 flex-grow flex-col">

src/server/api/routers/entry.ts

@@ -11,6 +11,7 @@ export type Entry = {
   type: "artist" | "album";
   name: string;
   image: string;
+  number?: number;
 };
 
 export const entryRouter = createTRPCRouter({
@@ -20,6 +21,7 @@ export const entryRouter = createTRPCRouter({
         type: z.enum(["artist", "album"]),
         name: z.string().min(1),
         image: z.string().min(1),
+        number: z.number().optional(),
       }),
     )
     .query(async ({ ctx, input }) => {

src/server/utils/index.ts

@@ -2,7 +2,7 @@ import * as cloudinary from "cloudinary";
 import { Entry } from "../api/routers/entry";
 
 export const generateEntryUniqueKey = (entry: Entry): string => {
-  return `${entry.type}:${entry.name.trim().toLowerCase().replace(/\s/g, "-")}`;
+  return `${entry.type}:${entry.name.trim().toLowerCase().replace(/\s/g, "-")}:${entry.number || 1}`;
 };
 
 export const uploadImage = async (