import React, { useState } from 'react'; import { AutoComplete, Input } from 'antd'; import { Redirect } from 'react-router-dom'; import { search, extractArtistInfo, extractTrackInfo } from '../modules/Spotify'; import Cookies from 'js-cookie'; import ReactGA from 'react-ga'; const SearchPlaylists = (props) => { const [accessToken] = useState(Cookies.get('access_token')); const [value, setValue] = useState(''); const [tracks, setTracks] = useState([]); const [artists, setArtists] = useState([]); const [seed, setSeed] = useState(null); const searchSpotify = async (searchTerm) => { if (searchTerm && searchTerm.length > 0) { let { artists, tracks } = await search(accessToken, searchTerm); console.log(artists); artists = artists.map(extractArtistInfo); tracks = tracks.map(extractTrackInfo); setArtists(artists); setTracks(tracks); } }; const renderTitle = (title) => <span>{title}</span>; const renderItem = (item, type) => ({ key: item.id, data: item, type, value: item.id, label: ( <div> <img src={item.image} className="rounded" width="50" height="50" alt="" /> <span style={{ marginLeft: '1em', }} > {item.name} </span> </div> ), }); const options = [ { label: renderTitle('Tracks'), options: tracks && tracks.length > 0 ? tracks.map((track) => renderItem(track, 'track')) : [], }, { label: renderTitle('Artists'), options: artists && artists.length > 0 ? artists.map((artist) => renderItem(artist, 'artist')) : [], }, ]; const addSeed = (value, option) => { if (props && props.addSeed) { // Results page ReactGA.event({ category: 'Seeds', action: 'Add seed', label: 'Results', }); props.addSeed(option.data, option.type); setValue(''); } else { // Home page ReactGA.event({ category: 'Seeds', action: 'Add seed', label: 'Home page', }); if (option.type === 'track') { setSeed({ artists: [], tracks: [option.data] }); } else { setSeed({ artists: [option.data], tracks: [] }); } } }; // For home page. Go to results after seed is added if (seed) { return ( <Redirect to={{ pathname: '/results', state: { seed }, }} /> ); } return ( <div> <AutoComplete style={{ marginBottom: '0.5em', width: '100%', borderRadius: '10px', }} dropdownClassName="certain-category-search-dropdown" options={options} value={value} onChange={(value) => { searchSpotify(value); setValue(value); }} onSelect={addSeed} > <Input style={{ borderRadius: '10px', }} size="large" placeholder={props.addSeed ? 'Add or remove seeds' : 'Discover based on artists or songs'} /> </AutoComplete> </div> ); }; export default SearchPlaylists;