// app/playlist/[id]/page.tsx
'use client';

import { Track } from '@/components/molecules';
import { TrackSkeleton } from '@/components/molecules/Track/components/skeleton';
import { usePlaySongHandler, useQueueStore, useSoundStore } from '@/hooks';
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
import { useState } from 'react';

export default function PlaylistPage({ params }: { params: { id: string } }) {
  const { id } = params;
  const [loading, setLoading] = useState(true);
  const song = useQueueStore((state) => state.song);
  const isPlaying = useSoundStore((state) => state.isPlaying);

  const fetchPlaylist = async (): Promise<any[]> => {
    console.log(params);
    const { data } = await axios.get(
      `https://server/playlist/${id}`,
    );
    data.forEach((track: any) => {
      track.src = track.source;
      track.authors = [track.authors[0].name];
      delete track.source;
    });
    setLoading(false);
    return data;
  };

  const { data } = useQuery({
    queryKey: ['singles'],
    queryFn: fetchPlaylist,
  });

  return (
    <div className="flex size-full flex-col items-center justify-between gap-12 overflow-auto p-6 pb-48 md:p-24">
      <div>
        {loading &&
          [...Array(12)].map((_, index) => (
            <TrackSkeleton key={index} className="w-full" />
          ))}

        {data?.map((track, index) => (
          <Track
            key={index}
            index={index + 1}
            {...track}
            selected={track.src === song?.src}
            playing={track.src === song?.src && isPlaying}
            className="w-full"
          />
        ))}
      </div>
    </div>
  );
}

import axios from 'axios';
import { PlaylistContent } from './components/Playlists';

export async function generateStaticParams() {
  const { data } = await axios.get('https://soundwaves.vercel.app/playlists');
  // Make sure shops is an array of shops at this point
  data.forEach((track: any) => {
    track.src = track.source;
    track.authors = [track.authors[0].name];
    delete track.source;
  });

  return data.map((single: any) => ({
    id: single.id.toString(),
  }));
}

export default async function PlaylistPage({
  params,
}: {
  params: { id: string };
}) {
  const { id } = params;
  const { data } = await axios.get(`https://soundwaves.vercel.app/playlists/${id}`);
  if (!data) return null;
  return <PlaylistContent data={data} />;
}

'use client';

import axios from 'axios';
import { PlaylistContent } from './components/Playlists';
import { useParams } from 'next/navigation';
import { useEffect, useState } from 'react';

export const dynamic = 'force-dynamic';

export default function PlaylistPage() {
  const { id } = useParams();
  const [data, setData] = useState<any[]>([]);

  useEffect(() => {
    const fetchPlaylist = async () => {
      console.log('id', id);
      const { data } = await axios.get(
        `https://soundwaves-server.vercel.app/playlist/${id}`,
      );
      setData(data);
    };

    fetchPlaylist();
  });

  if (!data) return null;
  return <PlaylistContent data={data} />;
}