Skip to content
Snippets Groups Projects
Select Git revision
  • 5d38b5fbf4df83de9dd21b83c8ebbb29039ac779
  • master default protected
2 results

index.css

Blame
  • 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>
        );
    }