Skip to content
Snippets Groups Projects
Commit 6a83613a authored by 최현수's avatar 최현수
Browse files

Implement without viewing Favorites

parent 4c39c45f
No related branches found
No related tags found
No related merge requests found
Pipeline #8468 passed
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
"dependencies": { "dependencies": {
"@emotion/react": "^11.9.3", "@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3", "@emotion/styled": "^11.9.3",
"@mui/icons-material": "^5.14.1",
"@mui/material": "^5.8.6" "@mui/material": "^5.8.6"
}, },
"devDependencies": { "devDependencies": {
......
This diff is collapsed.
import React from 'react'; import React from 'react';
import Typography from '@mui/material/Typography'; import {Typography, AppBar} from '@mui/material';
import MusicList from './MusicList';
import music_list from './data';
import SearchPage from './SearchPage';
import {Box, Tabs, Tab, CssBaseline} from '@mui/material';
import Favorites from './Favorites';
export default function App () { export default function App () {
return <Typography variant="h1">Hello World</Typography> const [likes, setlikes] = React.useState({});
const [currentTab, setCurrentTab] = React.useState(0);
const toggleFavorite = (id) => () => {
setlikes({...likes, [id] : !likes[id]});
}
const handleTabChange = (event, newValue) => {
setCurrentTab(newValue);
}
return (
<React.Fragment>
<AppBar position="fixed">
<Typography align="center" variant="h3" color="inherit">Favorite Music</Typography>
</AppBar>
<div style={{height: 60, width: '100%'}}></div>
<Box sx={{borderBottom: 1, borderColor: 'divider'}}>
<Tabs value={currentTab} onChange={handleTabChange} aria-label="basic tabs" centered>
<Tab label="Search Music" value={0}/>
<Tab label="Favories" value={1}/>
<Tab label="More Contents" value={2}/>
</Tabs>
</Box>
{currentTab == 0 && <SearchPage list={music_list} likes={likes} toggleFavorite={toggleFavorite}/>}
{currentTab == 1 && <Favorites list={music_list} likes={likes} toggleFavorite={toggleFavorite}/>}
{currentTab == 2 && <Typography align="center" variant="h2"> Item two </Typography>}
</React.Fragment>
)
} }
import React from 'react';
import { Card, CardContent, CardActions, Typography, IconButton } from '@mui/material';
import { Favorite, FavoriteBorder } from '@mui/icons-material';
const styles = {
content: {},
layout: {
display: 'flex',
justifyContent: 'center'
},
card: {
minWidth: 275,
maxWidth: 600,
marginBottom: "20pt",
marginLeft: 'auto',
marginRight: 'auto',
},
};
const Favorites = ({ list, likes, toggleFavorite }) => {
const musicList = Array.isArray(list) ? list : [];
const favoriteList = musicList.filter(item => likes[item.collectionId] === true);
return (
<React.Fragment>
<div>
{favoriteList.map(item => (
<Card sx={styles.card} key={item.collectionId}>
<CardContent>
<Typography variant="subtitle1"> {item.artistName} </Typography>
<Typography variant="subtitle2"> {item.collectionCensoredName}</Typography>
</CardContent>
<CardActions>
<IconButton onClick={toggleFavorite(item.collectionId)}>
<Favorite />
</IconButton>
</CardActions>
</Card>
))}
</div>
</React.Fragment>
);
}
export default Favorites;
import React from 'react';
import {Card, CardContent, CardActions, Typography, IconButton} from '@mui/material'
import { Favorite, FavoriteBorder } from '@mui/icons-material';
const styles = {
content : {},
layout : {
display : 'flex',
justifyContent : 'center'
},
card : {
minWidth: 275,
maxWidth: 600,
marginBottom : "20pt",
marginLeft : 'auto',
marginRight : 'auto',
},
};
export default function MusicList ({list, likes, toggleFavorite}) {
return (
<div>
{list.map(item => {
return(
<Card sx={styles.card} key={item.collectionId}>
<CardContent>
<Typography variant="subtitle1"> {item.artistName} </Typography>
<Typography variant="subtitle2"> {item.collectionCensoredName}</Typography>
</CardContent>
<CardActions>
<IconButton onClick={toggleFavorite(item.collectionId)}>
{(likes[item.collectionId] === true) ? <Favorite /> : <FavoriteBorder /> }
</IconButton>
</CardActions>
</Card>
)
})}
</div>
);
}
\ No newline at end of file
import React from 'react';
import {Button, TextField} from '@mui/material';
import MusicList from './MusicList';
export default function SearchPage({list, likes, toggleFavorite}){
const [searchWord, setSearchWord] = React.useState('');
const [music_list, setMusicList] = React.useState([]);
const handleSearch = (event) => {
event.preventDefault();
console.log(searchWord);
setSearchWord('');
fetch(`http://itunes.apple.com/search?term=${searchWord}&entity=album`)
.then(r => r.json()).then(r => {
console.log(r);
setMusicList(r.results);
setSearchWord('');
}).catch(e => console.log('error when search musician'));
}
const handleSearchTextChange = (event) => {
setSearchWord(event.target.value);
}
return(
<React.Fragment>
<form style={{display: 'flex', marginTop : 20, marginBottom : 15}}>
<div style={{display : 'flex', marginLeft : 'auto', marginRight : 'auto',}}>
<TextField variant="outlined" label="Music Album Search" type="search" style={{width:450}}
onChange={handleSearchTextChange} value={searchWord}>
</TextField>
<Button variant="contained" color="primary"
type="submit" onClick={handleSearch}
style={{marginLeft : 20}}>
Search
</Button>
</div>
</form>
<MusicList list={music_list} likes={likes} toggleFavorite={toggleFavorite}>
</MusicList>
</React.Fragment>
)
}
\ No newline at end of file
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment