Skip to content
Snippets Groups Projects
Commit 2a16f88f authored by HyunjinNoh's avatar HyunjinNoh
Browse files

msg commit

parent 33604124
Branches
No related tags found
No related merge requests found
Pipeline #8129 passed
import React from 'react';
import MusicList from './MusicList.js';
import music_list from './data.js';
import music_list from './data';
import SearchPage from './SearchPage';
import Favorites from './Favorites';
import {Box, Tabs, Tab, Typography, AppBar, CssBaseline} from '@mui/material';
export default function App () {
const [currentTab, setCurrentTab] = React.useState(0);
const [searchResult, setSearchResult] = React.useState([]);
const [likes, setLikes] = React.useState({});
const handleTabChange = (event, newValue) => {
setCurrentTab(newValue);
}
......@@ -26,8 +28,8 @@ export default function App () {
</Tabs>
</Box>
{currentTab == 0 && <SearchPage list = {searchResult} onSearch = {setSearchResult}/>}
{currentTab == 1 && <Typography align = "center" variant = "h2"> Favorites </Typography>}
{currentTab == 0 && <SearchPage list = {searchResult} onSearch = {setSearchResult} likes = {likes} setLikes = {setLikes}/>}
{currentTab == 1 && <Typography align = "center" variant = "h2" likes = {likes} setLikes = {setLikes}> Favorites </Typography>}
{currentTab == 2 && <Typography align = "center" variant = "h2"> Item Three </Typography>}
</React.Fragment>
)
......
......@@ -6,9 +6,20 @@ Favorites에서 좋아요를 다시 클릭하면, 그 음악이 사라져야 합
3. 상태변수 likes는 SearchPage와 Favorites에 공유되어야 한다.
4. 상태변수 likes를 어느 컴포넌트에 두어야 하며, MusicList, SearchPage, Favorites 컴포넌트의 props는 어떠한 형태로 전달되어야 하는가?
*/
import React from 'react';
import MusicList from './MusicList';
const Favorites = ({likes, setLikes}) => {
const list = Object.entries(likes)
.filter(([_, value]) => value)
.map(([key]) => key);
return (
<MusicList list={list} likes={likes} setLikes={setLikes}></MusicList>
);
}
/*
const Favorites = ({ list, likes, onToggleFavorite }) => {
return (
<div>
......@@ -16,5 +27,6 @@ const Favorites = ({ list, likes, onToggleFavorite }) => {
</div>
);
};
*/
export default Favorites;
......@@ -3,7 +3,6 @@ import SnackMsg from './SnackMsg';
import {Card, CardContent, CardActions, Typography, IconButton} from '@mui/material';
import {Favorite, FavoriteBorder} from '@mui/icons-material';
const styles = {
content: {},
layout: {
......@@ -18,15 +17,16 @@ const styles = {
marginRight: 'auto',
},
};
export default function MusicList ({list, likes, onToggleFavorite}) {//여기
//const [likes, setLikes] = React.useState({});//SearchPage.js로 옮겨짐
export default function MusicList ({list, likes, setLikes}) {
let [snackState, setSnackState] = React.useState({open: false, msg:''})
/*
const toggleFavorite = (id, name) => () => {//SearchPage.js로 옮겨짐
const toggleFavorite = (id, name) => () => {
setLikes({...likes, [id]: !likes[id]});
setSnackState({...snackState, open: true, msg: `${name} is clicked`})
console.log(likes)
}
*/
const handleSnackbarClose = (event, reason)=> {
if(reason === 'clickaway'){
return;
......@@ -44,7 +44,7 @@ export default function MusicList ({list, likes, onToggleFavorite}) {//여기
<Typography variant = "subtitle2"> {item.colletcionCensoredName} </Typography>
</CardContent>
<CardActions>
<IconButton onClick = {onToggleFavorite(item.collectionId, item.collectionCensoredName)}>
<IconButton onClick = {toggleFavorite(item.collectionId, item.collectionCensoredName)}>
{(likes[item.collectionId] === true) ? <Favorite/> : <FavoriteBorder/>}
</IconButton>
</CardActions>
......
import React from 'react';
//import music_list from './data';
import MusicList from './MusicList.js';
import Favorites from './Favorites.js';//여기
import {Button, TextField} from '@mui/material';
export default function SearchPage ({list, onSearch}) {
export default function SearchPage ({list, onSearch, likes, setLikes}) {
const [searchWord, setSearchWord] = React.useState('');
const [likes, setLikes] = React.useState({});//여기
let [snackState, setSnackState] = React.useState({open: false, msg:''});//여기
const handleSearch = (event) => {
event.preventDefault();
......@@ -24,33 +22,6 @@ export default function SearchPage ({list, onSearch}) {
setSearchWord(event.target.value);
}
const toggleFavorite = (id, name) => () => {
setLikes({...likes, [id]: !likes[id]});
setSnackState({...snackState, open: true, msg: `${name} is clicked`})
}
/*
let [snackState, setSnackState] = React.useState({open: false, msg:''})
const toggleFavorite = (id, name) => () => {
setLikes({...likes, [id]: !likes[id]});
setSnackState({...snackState, open: true, msg: `${name} is clicked`})
}
*/
/*
const handleToggleFavorite = (id, name) => () => {//여기
setLikes((prevLikes) => {
const updatedLikes = { ...prevLikes };
if (updatedLikes[id]) {
delete updatedLikes[id];
} else {
updatedLikes[id] = true;
}
return updatedLikes;
});
};
*/
return (
<React.Fragment>
<form style = {{display:'flex', marginTop: 20, marginBottom: 15}}>
......@@ -59,9 +30,7 @@ export default function SearchPage ({list, onSearch}) {
<Button varient = "contained" collor = "primary" type = "submit" onClick = {handleSearch} style = {{marginLeft: 20}}>Search</Button>
</div>
</form>
<MusicList list = {list} likes = {likes} onToggleFavorite = {toggleFavorite}></MusicList>
<Favorites list = {list} likes = {likes} onToggleFavorite = {toggleFavorite}></Favorites>
<MusicList list = {list} likes = {likes} setLikes={setLikes}></MusicList>
</React.Fragment>
)
//MusicList랑 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