import {actionTracksFind, backURL} from "../actions";
import {connect} from "react-redux";
import {store} from "../reducers";

const Track = ({track:{_id,url,originalFileName}={}}) =>
    <div className='Tracks'>
        {url === null ? <></> :(<strong className='Tracks1'><audio controls src={backURL+'/'+url}></audio>{originalFileName}</strong>)}
    </div>

const AllTracks = ({tracks}={}) =>
    <div>
        {(tracks || []).map(track => <Track track={track}/>)}
    </div>


export const CAllTracks = connect(state => ({tracks: state.promise.findAllTracks1?.payload || []}))(AllTracks)

store.dispatch(actionTracksFind())