music-player/src/pages/userTracks.js

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


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}}, getData}, history) => {
    useEffect(() => {
        getData(_id)
    }, [_id])
    return (
        <CTracks/>
    )}

export const CUserTracks = connect(null, {getData: actionTrackFindByOwner})(UserTracks)