Added second album image

src/app/_components/album-showcase.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { TrackByAlbum } from "./spotify-data";
 import { api } from "@/trpc/react";
 import { quantum } from "ldrs";
@@ -19,12 +19,12 @@ export default function AlbumShowcase({
   album,
   position,
   tracks,
-  place,
+  places,
   lastSpookyImageLoaded,
   setLastSpookyImageLoaded,
 }: TrackByAlbum & {
   spookify: boolean;
-  place: number;
+  places: number[];
   lastSpookyImageLoaded: number;
   setLastSpookyImageLoaded: any;
 }) {
@@ -33,26 +33,34 @@ export default function AlbumShowcase({
     : "https://via.placeholder.com/150";
 
   const [showSpookyImage, setShowSpookyImage] = useState(spookify);
-  const [spookyImageLoaded, setSpookyImageLoaded] = useState(false);
 
   useEffect(() => {
     setShowSpookyImage(spookify);
   }, [spookify]);
 
-  const entry = api.entry.get.useQuery({
-    type: "album",
-    name: album.name,
-    image: imageSource,
-  });
+  const entry = api.entry.get.useQuery(
+    {
+      type: "album",
+      name: album.name,
+      image: imageSource,
+    },
+    {
+      refetchInterval: false,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false,
+    },
+  );
 
   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 = useMemo(() => {
+    const spookyImageMatch = (
+      (entry.data?.value || generateSpookyImage.data) as null | string
+    )?.match(/<img\s+src='([^']+)'[^>]*>/);
 
-  const spookyImageSource = spookyImageMatch ? spookyImageMatch[0] : "";
+    return spookyImageMatch && spookyImageMatch[1] ? spookyImageMatch[1] : "";
+  }, [entry.data, generateSpookyImage.data]);
 
   const secondEntry = api.entry.get.useQuery(
     {
@@ -62,13 +70,12 @@ export default function AlbumShowcase({
       number: 2,
     },
     {
-      enabled: !!spookyImageSource,
+      refetchInterval: false,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false,
     },
   );
 
-  const saveImage = api.entry.save.useMutation();
-  const saveSecondImage = api.entry.save.useMutation();
-
   const handleGenerateSpookyImage = async () => {
     if (!entry.data && !entry.isLoading) {
       generateSpookyImage.mutate({
@@ -82,61 +89,44 @@ export default function AlbumShowcase({
   };
 
   const handleSecondGenerateSpookyImage = async () => {
-    if (!secondEntry.data && !secondEntry.isLoading) {
+    if (!secondEntry.data && !secondEntry.isLoading && spookyImageSource) {
       generateSecondSpookyImage.mutate({
         entry: {
           type: "album",
           name: album.name,
-          image: spookyImageSource as string,
+          image: spookyImageSource,
+          number: 2,
         },
       });
     }
   };
 
-  const handleSaveImage = async () => {
-    if (!entry.data && !entry.isLoading) {
-      saveImage.mutate({
-        entry: {
-          type: "album",
-          image: imageSource,
-          name: album.name,
-        },
-      });
-    }
-  };
-
-  const handleSecondSaveImage = async () => {
-    if (!secondEntry.data && !secondEntry.isLoading) {
-      saveSecondImage.mutate({
-        entry: {
-          type: "album",
-          image: spookyImageSource as string,
-          name: album.name,
-        },
-      });
-    }
-  };
+  const saveImage = api.entry.save.useMutation();
+  const saveSecondImage = api.entry.save.useMutation();
 
   useEffect(() => {
     handleGenerateSpookyImage();
   }, [entry.data]);
 
   useEffect(() => {
-    if (spookyImageLoaded) {
-      handleSaveImage();
-    }
-  }, [spookyImageLoaded]);
+    handleSecondGenerateSpookyImage();
+  }, [secondEntry.data, entry.data]);
 
-  //TODO ERROR HANDLING
+  const secondSpookyImageMatch = (
+    (secondEntry.data?.value || generateSecondSpookyImage?.data || "") as string
+  ).match(/<img\s+src='([^']+)'[^>]*>/);
+  const secondSpookyImageSource =
+    secondSpookyImageMatch && secondSpookyImageMatch[1]
+      ? secondSpookyImageMatch[1]
+      : "";
 
-  const onImageLoad = () => {
-    if (!spookyImageLoaded) {
-      setSpookyImageLoaded(true);
-      setLastSpookyImageLoaded((state: number) =>
-        state > place ? state : place,
-      );
-    }
-  };
+  const firstPlace = places[0] || 0;
+  const secondPlace = places[1] || 0;
+
+  const firstImageError = !!(entry.error || generateSpookyImage.error);
+  const secondImageError = !!(
+    secondEntry.error || generateSecondSpookyImage.error
+  );
 
   return (
     <div
@@ -148,49 +138,64 @@ export default function AlbumShowcase({
         className="cursor-pointer *:select-none"
       >
         <Swiper>
-          <SwiperSlide>
+          <SwiperSlide className="shadow-lg">
             <AlbumImage
+              entry={entry}
               showSpookyImage={showSpookyImage}
               imageSource={imageSource}
               spookyImageSource={spookyImageSource}
               album={album}
               generateSpookyImageData={generateSpookyImage.data as string}
               lastSpookyImageLoaded={lastSpookyImageLoaded}
-              place={place}
-              spookyImageLoaded={spookyImageLoaded}
-              onImageLoad={onImageLoad}
+              place={firstPlace}
               loadGeneratedImage={
                 !!(
                   spookyImageSource &&
                   (generateSpookyImage.data
-                    ? lastSpookyImageLoaded >= place ||
-                      lastSpookyImageLoaded + 1 === place
+                    ? lastSpookyImageLoaded >= firstPlace ||
+                      lastSpookyImageLoaded + 1 === firstPlace
                     : true)
                 )
               }
-              onQueue={lastSpookyImageLoaded < place - 1}
+              onQueue={lastSpookyImageLoaded < firstPlace - 1}
+              saveImage={saveImage}
+              setLastSpookyImageLoaded={setLastSpookyImageLoaded}
+              error={firstImageError}
             />
           </SwiperSlide>
-          {/* <SwiperSlide>
+          <SwiperSlide>
             <AlbumImage
+              number={2}
+              entry={secondEntry}
               showSpookyImage={showSpookyImage}
               imageSource={imageSource}
-              spookyImageSource={spookyImageSource}
+              spookyImageSource={secondSpookyImageSource}
               album={album}
-              generateSpookyImageData={generateSpookyImage.data as string}
+              generateSpookyImageData={generateSecondSpookyImage.data as string}
               lastSpookyImageLoaded={lastSpookyImageLoaded}
-              place={place}
-              spookyImageLoaded={spookyImageLoaded}
-              onImageLoad={onImageLoad}
+              place={secondPlace}
+              loadGeneratedImage={
+                !!(
+                  secondSpookyImageSource &&
+                  (generateSecondSpookyImage.data
+                    ? lastSpookyImageLoaded >= secondPlace ||
+                      lastSpookyImageLoaded + 1 === secondPlace
+                    : true)
+                )
+              }
+              onQueue={lastSpookyImageLoaded < secondPlace - 1}
+              saveImage={saveSecondImage}
+              setLastSpookyImageLoaded={setLastSpookyImageLoaded}
+              error={secondImageError}
             />
-          </SwiperSlide> */}
+          </SwiperSlide>
         </Swiper>
       </div>
       <section className="flex h-36 flex-grow flex-col">
         <h4 className="mb-2 text-lg font-semibold leading-none">
           {album.name}
         </h4>
-        <ul className="overflow-scroll">
+        <ul className="max-h-[400px] overflow-auto overflow-y-auto [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 [&::-webkit-scrollbar]:w-2">
           {tracks.map((track) => (
             <li key={track.id}>{track.name}</li>
           ))}