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

드디어 끝냈다git add .

parent 697d040a
Branches
No related tags found
No related merge requests found
......@@ -4,6 +4,9 @@
<title> muiBasic </title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>
<body>
<div id="app"></div>
......
......@@ -9,27 +9,58 @@ export default function App () {
const [currentTab, setCurrentTab] = React.useState(0);
const [searchResult, setSearchResult] = React.useState([]);
const [favorites, setFavorites] = React.useState([]);
//const [like, setLike] = React.useState([]);
const handleTabChange = (event, newValue) => {
setCurrentTab(newValue);
}
//수정
//수정 - 버전1
// 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]);
// }
// };
//버전2
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) {
let favoriteItem = favorites.find((it) => it.collectionId === item.collectionId);
if (favoriteItem) {
// item.like = false;
//favorite & search 둘다 삭제
let a = searchResult.find((it) => it.collectionId === item.collectionId);
if (a) {
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) {
let b = favorites.filter((it) => it.collectionId !== item.collectionId);
setFavorites(b);
}
else {
let a = searchResult.find((it) => it.collectionId === item.collectionId);
if (a) {
item.like = true;
}
setFavorites([...favorites, item]);
//setFavorites([...favorites, { ...item, like: true }]);
}
// const updatedSearchResult = searchResult.map((it) =>
// it.collectionId === item.collectionId ? { ...it, like: !favoriteItem } : it
// );
// setSearchResult(updatedSearchResult);
};
return (
......@@ -50,7 +81,7 @@ export default function App () {
</Tabs>
</Box>
{currentTab == 0 && <SearchPage list={searchResult} onSearch={setSearchResult}/>}
{currentTab == 0 && <SearchPage list={searchResult} onSearch={setSearchResult} onLike={handleOnLike} />}
{currentTab == 1 && <Favorites list={favorites} onLike={handleOnLike} />}
{currentTab == 2 &&
<Typography align="center" variant="h2">Item Three</Typography>}
......
......@@ -19,9 +19,9 @@ const styles = {
export default function MusicList({ list, onLike }) {
let [snackState, setSnackState] = React.useState({ open: false, msg: '' })
const [likes, setLikes] = React.useState({});
//const [likes, setLikes] = React.useState({});
const toggleFavorite = (id) => () => {
const toggleFavorite = (item) => () => {
//React Hooks useState() with Object
//https://stackoverflow.com/questions/54150783/react-hooks-usestate-with-object
//setLikes({...likes, [id] : !likes[id]});
......@@ -29,7 +29,7 @@ export default function MusicList ({list, onLike}) {
//temp[id] = !temp[id]
//setlikes(temp) => 좋아요 이미 눌려져 있는거 다시 누르면 좋아요 취소
//setSnackState({...snackState, open : true, msg : `${id} is clicked` })
onLike(id);
onLike(item);
}
const handleSnackbarClose = (event, reason) => {
......@@ -47,7 +47,7 @@ export default function MusicList ({list, onLike}) {
<div>
{list.map(item => {
return (
<Card sx = {styles.card} key={item.collectionName}>
<Card sx={styles.card} key={item.collectionId}>
<CardContent>
<Typography variant="subtitle1"> {item.artistName} </Typography>
<Typography variant="subtitle2"> {item.collectionCensoredName}</Typography>
......@@ -57,7 +57,8 @@ export default function MusicList ({list, onLike}) {
{item.like ? <Favorite /> : <FavoriteBorder />}
</IconButton>
</CardActions>
</Card>)
</Card>
);
})}
</div>
);
......
......@@ -2,7 +2,7 @@ import React from 'react';
import { Button, TextField } from '@mui/material';
import MusicList from './MusicList';
export default function SearchPage({list, onSearch}){
export default function SearchPage({ list, onSearch, onLike }) {
const [searchWord, setSearchWord] = React.useState('');
const handleSearch = (event) => {
......@@ -12,12 +12,12 @@ export default function SearchPage({list, onSearch}){
fetch(`http://itunes.apple.com/search?term=${searchWord}&entity=album`)
.then(r => r.json()).then(r => {
console.log(r);
const updatedList = r.results.map(item => ({
...item,
show: true,
liked: false
}));
onSearch(updatedList);
// const updatedList = r.results.map(item => ({
// ...item,
// show: true,
// liked: false
// }));
onSearch(r.results);
setSearchWord('');
}).catch(e => console.log('error when search musician'))
}
......@@ -26,18 +26,18 @@ export default function SearchPage({list, onSearch}){
setSearchWord(event.target.value);
}
const handleLike = (collectionName, liked) => {
const updatedList = list.map(item => {
if (item.collectionName === collectionName) {
return {
...item,
liked
};
}
return item;
});
onSearch(updatedList);
};
// const handleLike = (collectionName, liked) => {
// const updatedList = list.map(item => {
// if (item.collectionName === collectionName) {
// return {
// ...item,
// liked
// };
// }
// return item;
// });
// onSearch(updatedList);
// };
return (
<React.Fragment>
......@@ -55,7 +55,7 @@ export default function SearchPage({list, onSearch}){
</div>
</form>
<MusicList list={list} onLike={handleLike} />
<MusicList list={list} onLike={onLike} />
</React.Fragment>
)
}
\ No newline at end of file
......@@ -4,9 +4,10 @@ import MusicList from './MusicList';
const Favorites = ({ list, onLike }) => {
return (
<div>
<React.Fragment>
<MusicList list={list} onLike={onLike} />
</div>
</React.Fragment>
);
};
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment