Skip to content
Snippets Groups Projects
Select Git revision
  • d57186df9a65cf0b20abd795a7bf8802e6bd6194
  • master default protected
2 results

Search.js

Blame
  • Search.js 1.49 KiB
    import React from 'react';
    import {Button, TextField} from '@mui/material';
    import MusicList from './MusicList';
    
    export default function SearchPage({list, onSearch, onsetLikes}){
        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 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={list} onsetLikes={onsetLikes}>
    
                </MusicList>
            </React.Fragment>
        )
    }