From 540b13c9585bfbe0bfa7887cb841200ce4f74850 Mon Sep 17 00:00:00 2001 From: Francisco Pessano Date: Fri, 11 Oct 2024 20:42:30 -0300 Subject: [PATCH] Spookify switch --- src/app/_components/album-showcase.tsx | 22 +++++++---- src/app/_components/artist-showcase.tsx | 8 +++- src/app/_components/showcase.tsx | 49 +++++++++++++++++++++++++ src/app/_components/spotify-data.tsx | 16 ++++---- src/app/_components/switch.tsx | 41 +++++++++++++++++++++ src/app/page.tsx | 2 +- 6 files changed, 121 insertions(+), 17 deletions(-) create mode 100644 src/app/_components/showcase.tsx create mode 100644 src/app/_components/switch.tsx diff --git a/src/app/_components/album-showcase.tsx b/src/app/_components/album-showcase.tsx index a491e2a..3e66b90 100644 --- a/src/app/_components/album-showcase.tsx +++ b/src/app/_components/album-showcase.tsx @@ -1,6 +1,6 @@ "use client"; -import { useEffect, useState } from "react"; +import { use, useEffect, useState } from "react"; import Tilt from "react-parallax-tilt"; import { TrackByAlbum } from "./spotify-data"; import { api } from "@/trpc/react"; @@ -11,17 +11,22 @@ ring2.register(); quantum.register(); export default function AlbumShowcase({ + spookify, album, position, tracks, -}: TrackByAlbum) { +}: TrackByAlbum & { spookify: boolean }) { const imageSource = album.images[0] ? album.images[0].url : "https://via.placeholder.com/150"; - const [showSpookyImage, setShowSpookyImage] = useState(false); + 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, @@ -72,14 +77,17 @@ export default function AlbumShowcase({ )?.match(/https:\/\/res.cloudinary.com\/[^"]+/); const spookyImageSource = spookyImageMatch ? spookyImageMatch[0] : null; + console.log(spookyImageSource); return (
setShowSpookyImage(!showSpookyImage)} key={album.id} className="flex w-full flex-wrap gap-3 rounded-xl bg-white bg-opacity-10 p-5 backdrop-blur-lg backdrop-filter" > -
+
setShowSpookyImage(!showSpookyImage)} + className="cursor-pointer" + > {album.name} { - if (!spookyImageLoaded && generateSpookyImage.data) { + if (!spookyImageLoaded) { setSpookyImageLoaded(true); } }} @@ -120,7 +128,7 @@ export default function AlbumShowcase({ ) : ( <> -

Generating...

+

Getting image...

)}
diff --git a/src/app/_components/artist-showcase.tsx b/src/app/_components/artist-showcase.tsx index 5502f17..701cb92 100644 --- a/src/app/_components/artist-showcase.tsx +++ b/src/app/_components/artist-showcase.tsx @@ -10,17 +10,23 @@ ring2.register(); quantum.register(); export default function ArtistShowcase({ + spookify, images, name, id, }: { + spookify: boolean; images: { url: string }[]; name: string; id: string; }) { - const [showSpookyImage, setShowSpookyImage] = useState(false); + const [showSpookyImage, setShowSpookyImage] = useState(spookify); const [spookyImageLoaded, setSpookyImageLoaded] = useState(false); + useEffect(() => { + setShowSpookyImage(spookify); + }, [spookify]); + const imageSource = images[0] ? images[0].url : "https://via.placeholder.com/150"; diff --git a/src/app/_components/showcase.tsx b/src/app/_components/showcase.tsx new file mode 100644 index 0000000..ac20584 --- /dev/null +++ b/src/app/_components/showcase.tsx @@ -0,0 +1,49 @@ +"use client"; + +import React, { useState } from "react"; +import Switch from "./switch"; +import AlbumShowcase from "./album-showcase"; +import ArtistShowcase from "./artist-showcase"; + +export function Showcase({ + tracksByAlbum, + artists, +}: { + tracksByAlbum: Record; + artists: any[]; +}) { + const [spookify, setSpookify] = useState(false); + return ( + <> +
+ + +
+

Tracks by album

+ {Object.values(tracksByAlbum) + .sort((a, b) => b.position - a.position) + .map( + (album, index) => + !index && , + )} +

Artists images

+
+ {[artists[0]].map((artist) => { + return ( + + ); + })} +
+ + ); +} + +export default Showcase; diff --git a/src/app/_components/spotify-data.tsx b/src/app/_components/spotify-data.tsx index c8dd7e5..ddc66ae 100644 --- a/src/app/_components/spotify-data.tsx +++ b/src/app/_components/spotify-data.tsx @@ -1,7 +1,5 @@ import SpotifyWebApi from "spotify-web-api-node"; -import AlbumShowcase from "./album-showcase"; -import ArtistShowcase from "./artist-showcase"; -import { TRPCReactProvider } from "@/trpc/react"; +import Showcase from "./showcase"; const TRACKS_LIMIT = 20; const ARTISTS_LIMIT = 21; @@ -141,12 +139,12 @@ export default async function SpotifyData({
*/} {/* TODO CHECK IF NEEDED */} - + {/*

Tracks by album

{Object.values(tracksByAlbum) .sort((a, b) => b.position - a.position) .map((album, index) => !index && )} - + */} {/*

Albums images

*/} -

Artists images

+ {/*

Artists images

- {artists.map((artist) => { + {[artists[0]].map((artist) => { return ; })} -
+
*/} + + ); } diff --git a/src/app/_components/switch.tsx b/src/app/_components/switch.tsx new file mode 100644 index 0000000..7ef5ace --- /dev/null +++ b/src/app/_components/switch.tsx @@ -0,0 +1,41 @@ +"use client"; +import React, { useState } from "react"; + +const Switch = ({ + isChecked, + setIsChecked, +}: { + isChecked: boolean; + setIsChecked: (isChecked: boolean) => void; +}) => { + const handleCheckboxChange = () => { + setIsChecked(!isChecked); + }; + + return ( + <> + + + ); +}; + +export default Switch; diff --git a/src/app/page.tsx b/src/app/page.tsx index d5cf986..a950693 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -39,7 +39,7 @@ export default async function Home({ return (
-
+
{userIsLogged ? (