Fix gettings problems

src/app/_components/album-showcase.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
-import { TrackByAlbum } from "./spotify-data";
+import { type TrackByAlbum } from "./spotify-data";
 import { api } from "@/trpc/react";
 import { quantum } from "ldrs";
 import { ring2 } from "ldrs";
@@ -29,9 +29,11 @@ export default function AlbumShowcase({
   lastSpookyImageLoaded: number;
   setLastSpookyImageLoaded: any;
 }) {
-  const imageSource = album.images[0]
-    ? album.images[0].url
-    : "https://via.placeholder.com/150";
+  const imageSource = album.images[1]
+    ? album.images[1].url
+    : (
+      album.images[0] ? album.images[0].url : "https://via.placeholder.com/150"
+    )
 
   const [showSpookyImage, setShowSpookyImage] = useState(spookify);
 
@@ -60,7 +62,7 @@ export default function AlbumShowcase({
       (entry.data?.value || generateSpookyImage.data) as null | string
     )?.match(/<img\s+src='([^']+)'[^>]*>/);
 
-    return spookyImageMatch && spookyImageMatch[1] ? spookyImageMatch[1] : "";
+    return spookyImageMatch?.[1] ? spookyImageMatch[1] : "";
   }, [entry.data, generateSpookyImage.data]);
 
   const secondEntry = api.entry.get.useQuery(
@@ -71,6 +73,7 @@ export default function AlbumShowcase({
       number: 2,
     },
     {
+      enabled: !!spookyImageSource,
       refetchInterval: false,
       refetchOnReconnect: false,
       refetchOnWindowFocus: false,
@@ -111,16 +114,14 @@ export default function AlbumShowcase({
 
   useEffect(() => {
     handleSecondGenerateSpookyImage();
-  }, [secondEntry.data, entry.data]);
+  }, [secondEntry.data, entry.data, spookyImageSource]);
 
   const secondSpookyImageSource = useMemo(() => {
-    const secondSpookyImageMatch = (
-      (secondEntry.data?.value ||
+    const secondSpookyImageMatch = /<img\s+src='([^']+)'[^>]*>/.exec(((secondEntry.data?.value ||
         generateSecondSpookyImage?.data ||
-        "") as string
-    )?.match(/<img\s+src='([^']+)'[^>]*>/);
+        "") as string));
 
-    return secondSpookyImageMatch && secondSpookyImageMatch[1]
+    return secondSpookyImageMatch?.[1]
       ? secondSpookyImageMatch[1]
       : "";
   }, [secondEntry.data, generateSecondSpookyImage.data]);
@@ -229,7 +230,9 @@ export default function AlbumShowcase({
           />
         )}
       </div>
-      <section className="flex h-36 flex-grow flex-col">
+      <section className="flex flex-grow flex-col" style={{
+        height: "146px"
+      }}>
         <h4 className="mb-2 text-lg font-semibold leading-none">
           {album.name}
         </h4>

src/app/_components/artist-showcase.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { api } from "@/trpc/react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import Tilt from "react-parallax-tilt";
 // import { AiLoader } from "./ai-loader";
 import { quantum } from "ldrs";
@@ -48,7 +48,7 @@ export default function ArtistShowcase({
   const generateSpookyImage = api.entry.generate.useMutation();
   const saveImage = api.entry.save.useMutation();
 
-  const error = useMemo(() => !!(entry.error || generateSpookyImage.error), [entry.error, generateSpookyImage.error]);
+  const error = !!(entry.error || generateSpookyImage.error);
 
   const handleGenerateSpookyImage = async () => {
     if (!entry.data && !entry.isLoading) {
@@ -86,7 +86,7 @@ export default function ArtistShowcase({
 
   const spookyImageSource = useMemo(() => {
     const spookyImageMatch = (
-      (entry.data?.value || generateSpookyImage.data) as null | string
+      (entry.data?.value ?? generateSpookyImage.data) as null | string
     )?.match(/https:\/\/res.cloudinary.com\/[^"]+/);
     return spookyImageMatch ? spookyImageMatch[0] : null;
   }, [entry.data?.value, generateSpookyImage.data]);
@@ -187,7 +187,3 @@ export default function ArtistShowcase({
     </Tilt>
   );
 }
-function useMemo(arg0: () => string | null, arg1: unknown[]) {
-  throw new Error("Function not implemented.");
-}
-