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

MusicList.js

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