Skip to content
Snippets Groups Projects
Commit 7b0ef64c authored by DongHwi Kim's avatar DongHwi Kim
Browse files

final

parent d57186df
Branches
No related tags found
No related merge requests found
Pipeline #7960 passed
......@@ -8,16 +8,18 @@ import FavoriteList from './Favorite';
export default function App () {
const [currentTab, setCurrentTab] = React.useState(0);
const [searchResult, setSearchResult] = React.useState([]);
const [likes, setLikes] = React.useState([]);
const [myFavoriteList, setmyFavoriteList] = React.useState([]);
const [likes, setLikes] = React.useState({});
const handleTabChange = (event, newValue) => {
setCurrentTab(newValue);
}
const handleLike = (item) => {
if(likes.includes(item.collectionId)){
setLikes(likes.filter(it => it != item.collectionId))
}else{
setLikes([...likes, item]);
}
const addToFavoriteList = (item) => {
setmyFavoriteList((prevList) => [...prevList, item]);
};
const handleLike = (id) => {
const updatedLikes = { ...likes, [id]: !likes[id] };
setLikes(updatedLikes);
}
return (
<React.Fragment>
......@@ -37,8 +39,8 @@ export default function App () {
</Tabs>
</Box>
{ currentTab == 0 && <SearchPage list={searchResult} onSearch={setSearchResult} onsetLikes={handleLike}/>}
{ currentTab == 1 && <FavoriteList list={likes} onsetLikes={handleLike} />}
{ currentTab == 0 && <SearchPage list={searchResult} addToFavoriteList={addToFavoriteList} myFavoriteList={myFavoriteList} handleLike={handleLike} likes={likes} onSearch={setSearchResult}/>}
{ currentTab == 1 && <FavoriteList likes={likes} handleLike={handleLike} myFavoriteList={myFavoriteList} addToFavoriteList={addToFavoriteList} />}
{ currentTab == 2 && <Typography align="center" variant="h2">Item Three</Typography>}
</React.Fragment>
)
......
......@@ -18,17 +18,20 @@ const styles = {
},
};
export default function Favoritee({list,onsetLikes}){
export default function Favoritee({likes,myFavoriteList,handleLike,addToFavoriteList}){
const [favoriteLikes, setFavoriteLikes] = React.useState(likes);
let [snackState, setSnakState] = React.useState({open:false, msg:''})
const toggleFavorite = (item) => () => {
onsetLikes(item);
setSnakState({...snackState, open:true, msg:`${item.collectionName} is clicked`})
const toggleFavorite = (id) => () => {
const updatedLikes = { ...favoriteLikes, [id]: !favoriteLikes[id] };
setFavoriteLikes(updatedLikes);
handleLike(id);
}
const favoriteList = myFavoriteList.filter((item) => favoriteLikes[item.collectionId] === true);
return (
<div>
{list.map(item => {
{favoriteList.map(item => {
return (
<Card sx={styles.card} key={item.collectionId}>
<CardContent>
......@@ -36,9 +39,8 @@ export default function Favoritee({list,onsetLikes}){
<Typography variant="subtitle2">{item.collectionCensoredName}</Typography>
</CardContent>
<CardActions>
<IconButton onClick={toggleFavorite(item)}>
{list.includes(item.collectionId) ?
<Favorite /> : <FavoriteBorder />}
<IconButton onClick={toggleFavorite(item.collectionId)}>
{favoriteLikes[item.collectionId] ? <Favorite /> : <FavoriteBorder />}
</IconButton>
</CardActions>
</Card>
......
......@@ -18,18 +18,29 @@ const styles = {
},
};
export default function MusicList({list,onsetLikes}){
let [snackState, setSnakState] = React.useState({open:false, msg:''})
const toggleFavorite = (item) => () => {
onsetLikes(item);
setSnakState({...snackState, open:true, msg:`${item.collectionName} is clicked`})
export default function MusicList({list,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} is clicked` });
handleLike(id);
if (updatedLikes[id]) {
if (!myFavoriteList.find((item) => item.collectionId === id)) {
addToFavoriteList(list.find((item) => item.collectionId === id));
}
} else {
const updatedFavoriteList = myFavoriteList.filter((item) => item.collectionId !== item);
addToFavoriteList(updatedFavoriteList);
}
}
const handleSnackbarClose = (event, reason) => {
if(reason == 'clickaway'){
if (reason === 'clickaway') {
return;
}
setSnakState({open:false, msg:''});
}
setSnackState({ open: false, msg: '' });
};
return (
<div>
{list.map(item => {
......@@ -40,9 +51,8 @@ export default function MusicList({list,onsetLikes}){
<Typography variant="subtitle2">{item.collectionCensoredName}</Typography>
</CardContent>
<CardActions>
<IconButton onClick={toggleFavorite(item)}>
{list.includes(item.collectionId) ?
<Favorite /> : <FavoriteBorder />}
<IconButton onClick={toggleFavorite(item.collectionId, item.collectionName)}>
{likes[item.collectionId] === true ? <Favorite /> : <FavoriteBorder />}
</IconButton>
</CardActions>
</Card>
......
......@@ -2,7 +2,7 @@ import React from 'react';
import {Button, TextField} from '@mui/material';
import MusicList from './MusicList';
export default function SearchPage({list, onSearch, onsetLikes}){
export default function SearchPage({list, onSearch,likes,handleLike,myFavoriteList,addToFavoriteList}){
const [searchWord, setSearchWord] = React.useState('');
const handleSearch = (event) =>{
......@@ -35,7 +35,7 @@ export default function SearchPage({list, onSearch, onsetLikes}){
</div>
</form>
<MusicList list={list} onsetLikes={onsetLikes}>
<MusicList list={list} addToFavoriteList={addToFavoriteList} likes={likes} handleLike={handleLike} myFavoriteList={myFavoriteList}>
</MusicList>
</React.Fragment>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment