music-player/src/pages/userTracks.js

import {connect} from "react-redux";
import {actionTrackFindByOwner} from "../actions";
import {backURL} from "../actions";
import {useEffect} from 'react';
import {CPreloaded} from "./preloader";
import {store} from "../reducers";



const defaultTracks = [
    {
        "_id": "5fe35e5be926687ee86b0a49",
        "url": "track/7352b53f3af39db41ffb152acadd11b2",
        "originalFileName": "Фруктовый Кефир - Тому, кто не дружит со своей головой (zoop.su).mp3"
    },
    {
        "_id": "5fe35e5be926687ee86b0a4a",
        "url": "track/254f8d37a4c62ccef0bf1834a43eac54",
        "originalFileName": "Фруктовый Кефир - Убиваю время (zoop.su).mp3"
    },
    {
        "_id": "5fe35e5be926687ee86b0a4b",
        "url": "track/710d8b4ee31df560f7d46dd745cce690",
        "originalFileName": "Фруктовый Кефир - Туча (zoop.su).mp3"
    },
    {
        "_id": "5fe35e5ce926687ee86b0a4c",
        "url": "track/76c3e402d9ed7b3e54640462af7e68bf",
        "originalFileName": "Фруктовый Кефир - Капюшон. Парашют (zoop.su).mp3"
    },
    {
        "_id": "5fe35e5ce926687ee86b0a4d",
        "url": "track/6209eae2563b6a3d0471663fcaf0aede",
        "originalFileName": "Фруктовый Кефир - На своей Волне (zoop.su).mp3"
    },]

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

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

const CTracks = connect(state => ({tracks: state.promise.trackFindByOwner1?.payload || []}))(Tracks)


export const UserTracks = ({match:{params:{_id}}}) =>
    <>
        <h1>{_id}</h1>
        <CTracks />
    </>


// export const UserTracks = ({match:{params:{_id}}, getData}, history) => {
//     useEffect(() => {
//         getData(_id)
//     }, [_id])
//     return (
//        //
//         <CTracks/>
//         // </CPreloaded>
//     )}
//
// export const CUserTracks = connect(null, {getData: actionTrackFindByOwner})(UserTracks)