favorites.js

//import React from 'react';
import { Typography } from '@mui/material';
import MusicList from './MusicList';
import axios from 'axios';
import React, { useEffect } from 'react';
import App from './App';

const Favorites = ({ list, onLike, setFavorites }) => {

  // useEffect(() => {
  //   axios.get('/likes')
  //     .then((response) => {
  //       const data = response.data;
  //       setFavorites(data);
  //     })
  //     .catch((error) => {
  //       console.error('Error:', error);
  //     });
  // }, []);

  return (
    <React.Fragment>
      <MusicList list={list} onLike={onLike} />
      {/* <App setFavorites={setFavorites} /> */}
    </React.Fragment>

  );
};

export default Favorites;

// import React from 'react';
// import MusicList from './MusicList';
// import axios from 'axios';

// export default function Favorites() {
//   const { favorites, handleOnLike } = useContext(LikeContext); // Context에서 favorites와 handleOnLike 함수 가져오기
//   const [favoriteList, setFavoriteList] = useState([]); // 즐겨찾기 목록 상태 정의

//   useEffect(() => {
//     // /likes endpoint를 사용하여 즐겨찾기 목록을 가져옵니다.
//     axios.get('/likes')
//       .then((response) => {
//         setFavoriteList(response.data);
//       })
//       .catch((error) => {
//         console.error('Error:', error);
//       });
//   }, []); // 빈 배열을 전달하여 처음에만 실행되도록 설정합니다.

//   // MusicList 컴포넌트에 즐겨찾기 정보를 전달하도록 설정합니다.
//   const musicListWithFavorites = favorites.map((item) => ({
//     ...item,
//     like: true,
//   }));

//   return (
//     <React.Fragment>
//       <MusicList list={musicListWithFavorites} onLike={handleOnLike} />
//     </React.Fragment>
//   );
// }