before excercise

src/App.js

 import React from 'react';
-import {Typography, AppBar} from '@mui/material';
 import MusicList from './MusicList';
 import music_list from './data';
+import {Box, Tabs, Tab, Typography, AppBar, CssBaseline} from '@mui/material';
+import SearchPage from './SearchPage';
 
 export default function App () {
+    const [currentTab, setCurrentTab] = React.useState(0);
+    const [searchResul, setSearchResult] = React.useState([]);
+    const handleTabChange = (event, newValue) => {
+        setCurrentTab(newValue);
+    }
+    
     return (
         <React.Fragment>
             <AppBar positions = "fixed">
@@ -11,8 +18,17 @@ export default function App () {
             </AppBar>
 
             <div style = {{height: 60, width: '100%'}}></div>
-            <MusicList list = {music_list}></MusicList> 
+            <Box sx = {{borderBottom: 1, borderColor: 'divider'}}>
+                <Tabs value = {currentTab} onChange = {handleTabChange} aria-label = "basic tabs" centered>
+                    <Tab label = "Search Music" value = {0}/>
+                    <Tab label = "Favorites" value = {1}/>
+                    <Tab label = "More Contents" value = {2}/>
+                </Tabs>
+            </Box>
+
+            {currentTab == 0 && <SearchPage list = {searchResult} onSearch = {setSearchResult}/>}
+            {currentTab == 1 && <Typography align = "center" variant = "h2"> Item Two </Typography>}
+            {currentTab == 2 && <Typography align = "center" variant = "h2"> Item Three </Typography>}
         </React.Fragment>
     )    
 }
\ No newline at end of file
-

src/MusicList.js

@@ -18,14 +18,20 @@ const styles = {
 };
 export default function MusicList ({list}) {
     const [likes, setLikes] = React.useState({});
-
+    let [snackState, setSnackState] = React.useState({open: false, msg:''})
     const toggleFavorite = (id) => () => {
         setLikes({...likes, [id]: !likes[id]});
+        setSnackState({...snackState, open: true, msg: `${id} is clicked`})
+    }
+    const handleSnackbarClose = (event, reason)=> {
+        if(reason === 'clickaway'){
+            return;
+        }
+        setSnackState({open: false, msg: ''});
     }
-
     return (
         <div>
-            {list.results.map(item => {
+            {list.map(item => {
                 return (
                     <Card sx={styles.card} key={(item.collectionId)}>
                         <CardContent>
@@ -33,13 +39,14 @@ export default function MusicList ({list}) {
                             <Typography variant = "subtitle2"> {item.colletcionCensoredName} </Typography>
                         </CardContent>
                         <CardActions>
-                            <IconButton onClick = {toggleFavorite(item.collectionId)}>
+                            <IconButton onClick = {toggleFavorite(item.collectionName)}>
                                 {(likes[item.collectionId] === true) ? <Favorite/> : <FavoriteBorder/>}
                             </IconButton>
                         </CardActions>
                     </Card>
                 )
             })}
+            <SnackMsg open = {snackState.open} message = {snackState.msg} onClose = {handleSnackbarClose}/>
         </div>
     );
 }
\ No newline at end of file

src/SearchPage.js

+import React from 'react';
+import {Button, TextField} from '@mui/material';
+import MusicList from './MusicList';
+
+export default function SearchPage ({list, onSearch}) {
+    const [searchWord, setSearchWord] = 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);
+            onSearch(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 varient = "outlined" label = "Music Album Search" type ="search" style = {{width: 450}} onChange = {handleSearchTextChange} value = {searchWord}></TextField>
+                    <Button varient = "contained" collor = "primary" type = "submit" onClick = {handleSearch} style = {{marginLeft: 20}}>Search</Button>
+                </div>
+            </form>
+            <MusicList list = {list}></MusicList>
+        </React.Fragment>
+    )
+ }
\ No newline at end of file

src/SnackMsg.js

+import React from 'react';
+
+import {Snackbar} from '@mui/material';
+
+const SnackMsg = (props) => {
+    return (
+        <Snackbar
+            open = {props.open}
+            anchorOrigin = {{vertical: 'Bottom', horizontal: 'right'}}
+            autoHideDuration = {3000}
+            onClose = {props.onClose}
+            message = {props.message}>
+        </Snackbar>
+    );
+}
+
+export default SnackMsg;
\ No newline at end of file