Select Git revision
MusicList.js 2.15 KiB
import React from 'react';
import {Card, CardContent, CardActions, Typography, IconButton} from '@mui/material';
import {Favorite, FavoriteBorder} from '@mui/icons-material';
const styles = {
content : {},
layout : {
display : 'flex',
justifyContent : 'center'
},
card: {
minWidth: 275,
maxWidth: 600,
marginBottom : "20pt",
marginLeft : 'auto',
marginRight : 'auto',
},
};
export default function MusicList ({list}) {
let [snackState, setSnackState] = React.useState({open : false, msg : ''})
const [likes, setLikes] = React.useState({});
const toggleFavorite = (id) => () => {
//React Hooks useState() with Object
//https://stackoverflow.com/questions/54150783/react-hooks-usestate-with-object
setLikes({...likes, [id] : !likes[id]});
//let temp = likes;
//temp[id] = !temp[id]
//setlikes(temp) => 좋아요 이미 눌려져 있는거 다시 누르면 좋아요 취소
setSnackState({...snackState, open : true, msg : `${id} is clicked` })
}
const handleSnackbarClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
setSnackState({open : false, msg : ''});
<SnackMsg open = {snackState.open} message={snackState.msg}
onClose={handleSnackbarClose}/>
}
return (
<div>
{list.map(item => {
return(
<Card sx = {styles.card} key={item.collectionName}>
<CardContent>
<Typography variant="subtitle1"> {item.artistName}</Typography>
<Typography variant="subtitle2"> {item.collectionCensoredName}</Typography>
</CardContent>
<CardActions>
<IconButton onClick = {toggleFavorite(item.collectionName)}>
{(likes[item.collectionName] === true) ?
<Favorite /> : <FavoriteBorder />}
</IconButton>
</CardActions>
</Card>)
})}
</div>
);
}