fix: improved responsivness of the FE API

sirLisko · Sep 17, 2024 · 1a6e91f · 1a6e91f
1 parent 37792c8
commit 1a6e91f
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 30 deletions.
diff --git a/components/Result/Result.tsx b/components/Result/Result.tsx
@@ -32,15 +32,14 @@ const Result = ({ artistName }: Props) => {
 
  useEffect(() => {
  document.body.style.background = from;
- return () => {
- document.body.style.background = "";
- };
  }, [from]);
 
  if (isLoadingArtist || isLoadingTracks) {
  return null;
  }
 
+ const isArtistiWithTrack = tracks && tracks.length > 0 && artistData;
+
  return (
  <article
  className="min-h-screen bg-gradient-to-b to-black text-white p-6"
@@ -58,40 +57,37 @@ const Result = ({ artistName }: Props) => {
  <ArrowLeft size={24} />
  </button>
  </Link>
- <h1 className="text-3xl font-bold">{artistData?.name}</h1>
+ <h1 className="text-3xl font-bold">
+ {isArtistiWithTrack && artistData?.name}
+ </h1>
  <div className="w-6"></div>
  </header>
+ {isArtistiWithTrack ? (
+ <>
+ <picture>
+ <img
+ src={artistData?.image}
+ alt={artistData?.name}
+ className="w-32 h-32 mx-auto mb-4 rounded-lg shadow-lg"
+ />
+ </picture>
 
- {artistData && (
- <picture>
- <img
- src={artistData?.image}
- alt={artistData?.name}
- className="w-32 h-32 mx-auto mb-4 rounded-lg shadow-lg"
- />
- </picture>
- )}
-
- {events && artistData && <Events events={events} />}
+ {events && <Events events={events} />}
 
- {/* <div className="bg-black bg-opacity-30 rounded-lg p-4 mb-6">
+  {/* <div className="bg-black bg-opacity-30 rounded-lg p-4 mb-6">
  <h2 className="text-xl font-semibold mb-2">Playlist Info</h2>
  <p>Based on last 20 concerts from 2022 to 2024</p>
  <p>13 songs • Estimated playtime: 65 minutes</p>
  </div> */}
 
- {tracks && tracks.length > 0 && artistData && (
- <SavePlaylist artistData={artistData} tracks={tracks} />
- )}
-
- {tracks && tracks.length > 0 && artistData && (
- <Tracks
- tracks={tracks}
- links={artistData?.tracks}
- palette={artistData?.palette}
- />
- )}
- {(artistError || trackError) && (
+ <SavePlaylist artistData={artistData} tracks={tracks} />
+ <Tracks
+ tracks={tracks}
+ links={artistData?.tracks}
+ palette={artistData?.palette}
+ />
+ </>
+ ) : (
  <div className="flex flex-col">
  <div className="m-auto text-center text-2xl p-3">
  <Frown height={100} width={100} />

diff --git a/pages/[artist].tsx b/pages/[artist].tsx
@@ -12,10 +12,11 @@ import { useTracks } from "services/tracks";
 const ResultPage = () => {
  const router = useRouter();
  const artistName = router.query.artist as string | undefined;
- const { isLoading: isLoadingArtist, isError } = useArtistData(artistName);
+ const { isLoading: isLoadingArtist } = useArtistData(artistName);
  const { isLoading: isLoadingTracks } = useTracks(artistName);
  const isLoading = isLoadingArtist || isLoadingTracks;
- const showAlternate = isLoading || isError || !artistName;
+ const showAlternate = isLoading || !artistName;
+
  return (
  <div
  className={classNames("min-h-screen", {

diff --git a/services/artistData.ts b/services/artistData.ts
@@ -6,6 +6,7 @@ export const useArtistData = (artist: string | undefined) => {
  const { data, error, isLoading } = useSWR(
  artist ? `/api/artists/${artist}/spotify` : null,
  fetcher<ArtistData>,
+ { revalidateOnFocus: false, revalidateOnReconnect: false },
  );
 
  return {

diff --git a/services/events.ts b/services/events.ts
@@ -6,6 +6,7 @@ export const useEvents = (artist: string) => {
  const { data, error, isLoading } = useSWR(
  `/api/artists/${artist}/events`,
  fetcher<Event[]>,
+ { revalidateOnFocus: false, revalidateOnReconnect: false },
  );
 
  return {

diff --git a/services/tracks.ts b/services/tracks.ts
@@ -6,6 +6,7 @@ export const useTracks = (artist?: string) => {
  const { data, error, isLoading } = useSWR(
  artist ? `/api/artists/${artist}/tracks` : null,
  fetcher<Track[]>,
+ { revalidateOnFocus: false, revalidateOnReconnect: false },
  );
 
  return {