import React from "react";
import TrackStore from "../../stores/TrackStore.js";
import SearchBar from "../widgets/SearchBar.js";
import Soundcloud from "react-soundcloud-widget";
import ReactPlayer from 'react-player';
import Player from "react-soundcloud-player";

export default class Layout extends React.Component {
    constructor() {
        super();
        this.state = {
            filter: "",
            tracks: []
        };

    };

    async componentDidMount() {
        const res = await TrackStore.getAllTracks();
        this.setState({tracks: res});
    };


    render() {
        const tracks = this.state.tracks;
        return (
            <div>
                <h1>SEARCH</h1>
                {tracks.map((track, i) => {
                    let permalink = track.permalink_url;
                    return (
                        <ReactPlayer
                            url={permalink.toString()} />

                    )
                })}
            </div>

        );
    }
}

Unhandled promise rejection TypeError: (0 , _deepmerge2.default) is not a function
    at getConfig (eval at <anonymous> (bootstrap 9c0c5ebbc83ce26535e6:700), <anonymous>:100:43)
    at new ReactPlayer (eval at <anonymous> (bootstrap 9c0c5ebbc83ce26535e6:700), <anonymous>:86:223)
    at eval (eval at <anonymous> (bootstrap 9c0c5ebbc83ce26535e6:700), <anonymous>:294:18)
    at measureLifeCyclePerf (eval at <anonymous> (bootstrap 9c0c5ebbc83ce26535e6:700), <anonymous>:74:12)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (eval at <anonymous> (bootstrap 9c0c5ebbc83ce26535e6:700), <anonymous>:293:16)
    at ReactCompositeComponentWrapper._constructComponent (eval at <anonymous> (bootstrap 9c0c5ebbc83ce26535e6:700), <anonymous>:279:21)
    at ReactCompositeComponentWrapper.mountComponent (eval at <anonymous> (bootstrap 9c0c5ebbc83ce26535e6:700), <anonymous>:187:21)
    at Object.mountComponent (eval at <anonymous> (bootstrap 9c0c5ebbc83ce26535e6:700), <anonymous>:47:35)
    at Object.updateChildren (eval at <anonymous> (bootstrap 9c0c5ebbc83ce26535e6:700), <anonymous>:122:51)
    at ReactDOMComponent._reconcilerUpdateChildren (eval at <anonymous> (bootstrap 9c0c5ebbc83ce26535e6:700), <anonymous>:210:32)