diff --git a/src/app/_components/album-showcase.tsx b/src/app/_components/album-showcase.tsx
index eeb32ce..32f67d6 100644
--- a/src/app/_components/album-showcase.tsx
+++ b/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(/
]*>/);
- 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 = /
]*>/.exec(((secondEntry.data?.value ||
generateSecondSpookyImage?.data ||
- "") as string
- )?.match(/
]*>/);
+ "") as string));
- return secondSpookyImageMatch && secondSpookyImageMatch[1]
+ return secondSpookyImageMatch?.[1]
? secondSpookyImageMatch[1]
: "";
}, [secondEntry.data, generateSecondSpookyImage.data]);
@@ -229,7 +230,9 @@ export default function AlbumShowcase({
/>
)}
-
+
{album.name}
diff --git a/src/app/_components/artist-showcase.tsx b/src/app/_components/artist-showcase.tsx
index b911a6c..2a969fc 100644
--- a/src/app/_components/artist-showcase.tsx
+++ b/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({
);
}
-function useMemo(arg0: () => string | null, arg1: unknown[]) {
- throw new Error("Function not implemented.");
-}
-