music-player/src/pages/allUsers.js

import {connect} from "react-redux";
import {Link} from "react-router-dom";
import {actionUserFind} from "../actions";
import {store} from "../reducers";

const defaultPlaylists = [
    {
        "_id": "5fe25a677aa9837fd3e741d9",
        "owner": {
            "login": "123"
        },
        "tracks": null
    },
    {
        "_id": "5ff7fddee926687ee86b0b17",
        "owner": {
            "login": "uu"
        },
        "tracks": [
            {
                "url": "track/061766012c089e677a18bd7d7fcc132a",
                "originalFileName": "01 - Bored.mp3"
            },
            {
                "url": "track/5fe385a7af766b71f1bcaefe723dfb77",
                "originalFileName": "03 - One Weak.mp3"
            }
        ]
    },


    {
        "_id": "5ff7ff36e926687ee86b0b1d",
        "owner": {
            "login": "uu"
        },
        "tracks": [
            {
                "url": "track/1717d07cd1a5876b51c8e3d00c1fa123",
                "originalFileName": "02 - Minus Blindfold.mp3"
            },
            {
                "url": "track/011dc1fafb88494e2b2fcdd5408c9fc8",
                "originalFileName": "09 - Engine No.9.mp3"
            },
            {
                "url": "track/f926ed49d35036d952fb34426dbc7d0e",
                "originalFileName": "10 - Fireal.mp3"
            }
        ]
    },



    {
        "_id": "5fe0f8097aa9837fd3e74192",
        "owner": {
            "login": "Windforce"
        },
        "tracks": [
            {
                "url": "track/a37387adcf96795d5a49d4d7e09c0472",
                "originalFileName": "01-Cluster One.mp3"
            },
            {
                "url": "track/3164a657cf44dd734344ed3ebcde625f",
                "originalFileName": "Роман, заставь его надеть пиджак!.mp3"
            },
            {
                "url": "track/4685efea193d2d48d5ac56fc2ab767d8",
                "originalFileName": "07-Take It Back.mp3"
            },
            {
                "url": "track/59e061cc86750556dfae0f83708da571",
                "originalFileName": "10-Lost For Words.mp3"
            }
        ]
    },
    {
        "_id": "5fe35ffbe926687ee86b0a5c",
        "owner": {
            "login": "newUser"
        },
        "tracks": [
            {
                "url": "track/9251ba5dd154807fb10fe0d9dfe4c804",
                "originalFileName": "01 - God Loves Only You.mp3"
            },
            {
                "url": "track/a9c945eebf4cd5e829c470f8f0672ddf",
                "originalFileName": "03 - Over The Love.mp3"
            },
            {
                "url": "track/57cd3b9b7cb7d6f216c07fb46374fce5",
                "originalFileName": "04 - Talk Too Much.mp3"
            },
            {
                "url": "track/b1b2c99969d210f3d70f5f1fad651732",
                "originalFileName": "07 - You'Re Too Expensive.mp3"
            },
            {
                "url": "track/a8d8330e2c4ddfa00db8f285d6f7ec0b",
                "originalFileName": "08 - My Love Will Fall.mp3"
            },
            {
                "url": "track/9a6f3d3c2039a5f3e15a367f5f2a3675",
                "originalFileName": "10 - Feeling The Itch.mp3"
            },
            {
                "url": "track/2fc841aff4003b3dd4d0c814f1f9651d",
                "originalFileName": "11 - You Can't Always Do What You Like.mp3"
            }
        ]
    },]



const User = ({playlist:{_id, login}={}}) =>
<li><Link to={`/user/${_id}`}>{login}</Link></li>


const AllUsers = ({playlists=defaultPlaylists}) =>{

        return (
            <div>
                <h3>Плейлисты ползователей</h3>
            <ul className='Users'>
                    {playlists.map(playlist =>  <User playlist={playlist}/> )}
            </ul>
            </div>
        )

}

export const CAllUsers = connect(state => ({playlists: state.promise.userFind?.payload || []}))
(AllUsers)


store.dispatch(actionUserFind())