Skip to content
Snippets Groups Projects
Commit 697d040a authored by nahyun's avatar nahyun
Browse files

correct?

parent a6179170
Branches
No related tags found
No related merge requests found
Pipeline #8126 canceled
...@@ -8,10 +8,30 @@ import Favorites from './favorites'; ...@@ -8,10 +8,30 @@ import Favorites from './favorites';
export default function App () { export default function App () {
const [currentTab, setCurrentTab] = React.useState(0); const [currentTab, setCurrentTab] = React.useState(0);
const [searchResult, setSearchResult] = React.useState([]); const [searchResult, setSearchResult] = React.useState([]);
const [favorites, setFavorites] = React.useState([]);
const handleTabChange = (event, newValue) => { const handleTabChange = (event, newValue) => {
setCurrentTab(newValue); setCurrentTab(newValue);
} }
//수정
const handleOnLike = (item) => {
let value = favorites.find(it => it.collectionId == item.collectionId)
if (value) {
let i = searchResult.find(it => it.collectionId == item.collectionId)
if (i) {
item.like = false;
}
let remains = favorites.filter((it) => it.collectionId !== item.collectionId);
setFavorites(remains);
} else {
let i = searchResult.find(it => it.collectionId == item.collectionId)
if (i) {
item.like = true;
}
setFavorites([...favorites, item]);
}
};
return ( return (
<React.Fragment> <React.Fragment>
<AppBar position="fixed"> <AppBar position="fixed">
...@@ -31,8 +51,7 @@ export default function App () { ...@@ -31,8 +51,7 @@ export default function App () {
</Box> </Box>
{currentTab == 0 && <SearchPage list={searchResult} onSearch={setSearchResult}/>} {currentTab == 0 && <SearchPage list={searchResult} onSearch={setSearchResult}/>}
{currentTab == 1 && {currentTab == 1 && <Favorites list={favorites} onLike={handleOnLike}/> }
<Favorites/> }
{currentTab == 2 && {currentTab == 2 &&
<Typography align="center" variant="h2">Item Three</Typography>} <Typography align="center" variant="h2">Item Three</Typography>}
</React.Fragment> </React.Fragment>
......
...@@ -17,18 +17,19 @@ const styles = { ...@@ -17,18 +17,19 @@ const styles = {
}, },
}; };
export default function MusicList ({list}) { export default function MusicList ({list, onLike}) {
let [snackState, setSnackState] = React.useState({open : false, msg : ''}) let [snackState, setSnackState] = React.useState({open : false, msg : ''})
const [likes, setLikes] = React.useState({}); const [likes, setLikes] = React.useState({});
const toggleFavorite = (id) => () => { const toggleFavorite = (id) => () => {
//React Hooks useState() with Object //React Hooks useState() with Object
//https://stackoverflow.com/questions/54150783/react-hooks-usestate-with-object //https://stackoverflow.com/questions/54150783/react-hooks-usestate-with-object
setLikes({...likes, [id] : !likes[id]}); //setLikes({...likes, [id] : !likes[id]});
//let temp = likes; //let temp = likes;
//temp[id] = !temp[id] //temp[id] = !temp[id]
//setlikes(temp) => 좋아요 이미 눌려져 있는거 다시 누르면 좋아요 취소 //setlikes(temp) => 좋아요 이미 눌려져 있는거 다시 누르면 좋아요 취소
setSnackState({...snackState, open : true, msg : `${id} is clicked` }) //setSnackState({...snackState, open : true, msg : `${id} is clicked` })
onLike(id);
} }
const handleSnackbarClose = (event, reason) => { const handleSnackbarClose = (event, reason) => {
...@@ -41,6 +42,7 @@ export default function MusicList ({list}) { ...@@ -41,6 +42,7 @@ export default function MusicList ({list}) {
} }
return ( return (
<div> <div>
{list.map(item => { {list.map(item => {
...@@ -51,9 +53,8 @@ export default function MusicList ({list}) { ...@@ -51,9 +53,8 @@ export default function MusicList ({list}) {
<Typography variant="subtitle2"> {item.collectionCensoredName}</Typography> <Typography variant="subtitle2"> {item.collectionCensoredName}</Typography>
</CardContent> </CardContent>
<CardActions> <CardActions>
<IconButton onClick = {toggleFavorite(item.collectionName)}> <IconButton onClick={toggleFavorite(item)}>
{(likes[item.collectionName] === true) ? {item.like ? <Favorite /> : <FavoriteBorder />}
<Favorite /> : <FavoriteBorder />}
</IconButton> </IconButton>
</CardActions> </CardActions>
</Card>) </Card>)
......
...@@ -12,7 +12,12 @@ export default function SearchPage({list, onSearch}){ ...@@ -12,7 +12,12 @@ export default function SearchPage({list, onSearch}){
fetch(`http://itunes.apple.com/search?term=${searchWord}&entity=album`) fetch(`http://itunes.apple.com/search?term=${searchWord}&entity=album`)
.then(r => r.json()).then(r => { .then(r => r.json()).then(r => {
console.log(r); console.log(r);
onSearch(r.results); const updatedList = r.results.map(item => ({
...item,
show: true,
liked: false
}));
onSearch(updatedList);
setSearchWord(''); setSearchWord('');
}).catch(e => console.log('error when search musician')) }).catch(e => console.log('error when search musician'))
} }
...@@ -21,6 +26,19 @@ export default function SearchPage({list, onSearch}){ ...@@ -21,6 +26,19 @@ export default function SearchPage({list, onSearch}){
setSearchWord(event.target.value); setSearchWord(event.target.value);
} }
const handleLike = (collectionName, liked) => {
const updatedList = list.map(item => {
if (item.collectionName === collectionName) {
return {
...item,
liked
};
}
return item;
});
onSearch(updatedList);
};
return( return(
<React.Fragment> <React.Fragment>
...@@ -37,9 +55,7 @@ export default function SearchPage({list, onSearch}){ ...@@ -37,9 +55,7 @@ export default function SearchPage({list, onSearch}){
</div> </div>
</form> </form>
<MusicList list={list}> <MusicList list={list} onLike={handleLike} />
</MusicList>
</React.Fragment> </React.Fragment>
) )
} }
\ No newline at end of file
import React from 'react'; import React from 'react';
import { Typography } from '@mui/material'; import { Typography } from '@mui/material';
import MusicList from './MusicList';
const Favorites = (props) => { const Favorites = ({list, onLike}) => {
return <Typography align="center" variant="h2">IFavoriteo</Typography> return (
} <div>
<MusicList list={list} onLike={onLike}/>
</div>
);
};
export default Favorites; export default Favorites;
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment