97 lines
2.7 KiB
JavaScript
97 lines
2.7 KiB
JavaScript
import React, { useState, useEffect } from 'react'
|
|
import SpotifyWebApi from 'spotify-web-api-js'
|
|
import Artist from '../components/Artist'
|
|
import history from '../history.js'
|
|
import './ArtistSearch.scss'
|
|
|
|
const spotifyApi = new SpotifyWebApi()
|
|
|
|
const searchIcon = (
|
|
<svg viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">
|
|
<g>
|
|
<title>Layer 2</title>
|
|
<circle fillOpacity="0" id="svg_2" r="14.22443" cy="15.72443" cx="15.72443" strokeWidth="3" stroke="#cccccc" fill="#000000"/>
|
|
<line stroke="#cccccc" id="svg_4" y2="30.20002" x2="29.72541" y1="26.64045" x1="26.16584" fillOpacity="0" strokeLinecap="null" strokeLinejoin="null" strokeDasharray="null" strokeWidth="3" fill="none"/>
|
|
<line id="svg_6" y2="29.96271" x2="29.72541" y1="40.64143" x1="40.87873" fillOpacity="0" strokeLinecap="null" strokeLinejoin="null" strokeDasharray="null" strokeWidth="6" stroke="#cccccc" fill="none"/>
|
|
</g>
|
|
</svg>
|
|
)
|
|
|
|
function ArtistSearch({ props }) {
|
|
let [search, setSearch] = useState(null)
|
|
let [artists, setArtists] = useState(null)
|
|
let [token, setToken] = useState(null)
|
|
|
|
// Retrieve access token from url
|
|
useEffect(() => {
|
|
const search = window.location.search
|
|
const params = new URLSearchParams(search)
|
|
const token = params.get('access_token')
|
|
|
|
setToken(token)
|
|
spotifyApi.setAccessToken(token)
|
|
}, [])
|
|
|
|
// Search artists
|
|
useEffect(() => {
|
|
if (search && search.length > 0) {
|
|
spotifyApi.searchArtists(search)
|
|
.then(function(data) {
|
|
setArtists(data.artists.items)
|
|
}, function(err) {
|
|
console.error(err);
|
|
})
|
|
}
|
|
else {
|
|
setArtists(null)
|
|
}
|
|
}, [search])
|
|
|
|
// Load search term from props
|
|
useEffect(() => {
|
|
setSearch(props.searchTerm)
|
|
}, [props.searchTerm])
|
|
|
|
// Save token in Router state
|
|
useEffect(() => {
|
|
props.tokenCb(token)
|
|
}, [props, token])
|
|
|
|
// Save search term
|
|
const handleChange = e => {
|
|
setSearch(e.currentTarget.value)
|
|
props.searchCb(e.currentTarget.value)
|
|
}
|
|
|
|
// Save artist id in Router state
|
|
const albumsCallback = id => {
|
|
props.idCb(id)
|
|
history.push('/albums')
|
|
}
|
|
|
|
return (
|
|
<div className="spotify">
|
|
<h1>Artist search</h1>
|
|
|
|
<div className='search-field'>
|
|
<input placeholder='Search for an artist...' onChange={handleChange} />
|
|
{searchIcon}
|
|
</div>
|
|
|
|
{artists && (
|
|
<div className='artists'>
|
|
<ul className='list'>
|
|
{artists.map((artist, index) => (
|
|
<li className='list-item' key={index}>
|
|
<Artist props={artist} callback={albumsCallback} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ArtistSearch
|