franpcode/spooky-spotify-showcase
1
0
Fork 0
mirror of https://github.com/FranP-code/spooky-spotify-showcase.git synced 2025-10-13 00:02:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix gettings problems

Browse Source
This commit is contained in:
Francisco Pessano
2024-10-18 19:32:22 -03:00
parent 359fda5fd5
commit f44c7713a2
2 changed files with 18 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/app/_components/album-showcase.tsx
View File

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

10
src/app/_components/artist-showcase.tsx
View File

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