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

msg commit

parent 33604124
No related branches found
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