Select Git revision
MusicList.js
-
DongHwi Kim authoredDongHwi Kim authored
MusicList.js 3.69 KiB
import React from 'react';
import {Card, CardContent,CardActions, Typography, IconButton} from '@mui/material';
import {Favorite, FavoriteBorder} from '@mui/icons-material';
import SnackMsg from './snackbar';
const styles = {
content :{},
layout : {
display : 'flex',
justifyContent : 'center'
},
card : {
minWidth : 275,
maxWidth : 600,
marginBottom : "20pt",
marginLeft : 'auto',
marginRight : 'auto',
},
};
export default function MusicList({list,DelteandsetFavoriteList,likes,handleLike,myFavoriteList,addToFavoriteList}){
let [snackState, setSnackState] = React.useState({open:false, msg:''})
const toggleFavorite = (id,name) => () => {
const updatedLikes = { ...likes, [id]: !likes[id] };
setSnackState({ ...snackState, open: true, msg: `${name}이(가) 클릭되었습니다.` });
handleLike(id);
if (updatedLikes[id]) {
if (!myFavoriteList.find((item) => item.collectionId === id)) {
const item = list.find((item) => item.collectionId === id);
console.log(item+"hihihih");
const postData = {
"artistId": item.artistId,
"collectionId": item.collectionId,
"artistName": item.artistName,
"artistViewUrl": item.artistViewUrl,
"collectionViewUrl":item.collectionViewUrl,
"collectionCensoredName":item.collectionCensoredName,
"collectionName": item.collectionName
}
console.log(postData);
fetch('/likes',{
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(postData)
})
.then(response => response.json())
.then((data) => {
console.log(data)
addToFavoriteList(list.find((item) => item.collectionId === id));
}).catch(error => console.log('음악 좋아요 시 에러 발생'));
}
} else {
const updatedFavoriteList = myFavoriteList.filter((item) => item.collectionId !== id);
fetch(`/likes/${id}`, {
method: 'DELETE',
})
.then((data) => {
console.log(data);
DelteandsetFavoriteList(updatedFavoriteList);
console.log('여기 실행 됨');
}).catch(error => console.log('음악 좋아요 취소 시 에러 발생'+error));
}
}
const handleSnackbarClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
setSnackState({ open: false, msg: '' });
};
return (
<div>
{list.map(item => {
return (
<Card sx={styles.card} key={item.collectionId}>
<CardContent>
<Typography variant="subtitle1"> {item.artistName}</Typography>
<Typography variant="subtitle2">{item.collectionCensoredName}</Typography>
</CardContent>
<CardActions>
<IconButton onClick={toggleFavorite(item.collectionId, item.collectionName)}>
{likes[item.collectionId] === true ? <Favorite /> : <FavoriteBorder />}
</IconButton>
</CardActions>
</Card>
)
})}
<SnackMsg open = {snackState.open} message = {snackState.msg} onClose={handleSnackbarClose} />
</div>
)
}