gRomkoPlayer/src/components/Library.js

import React, { useState, useEffect, Component } from "react";
import { Link } from "react-router-dom";
import { Provider, connect } from "react-redux";
import { createStore, combineReducers, applyMiddleware } from "redux";
import { render } from "react-dom";
import { Spin } from "antd";
import Header from "./Header";
import Footer from "./Footer";

import App from "../App";
import Player from "./Player";
import getGQL from "../utils/getGQL";
import { getTracks, setCurrentTrack } from "../actions/playerActions";

import "../styles/library.css";

const Lib = ({
  tracks,
  history,
  getTracks,
  login,
  setCurrentTrack,
  currentTrack,
  // state
}) => {
  useEffect(() => {
    getTracks && getTracks();
  }, []);

  const Track = ({ track, highlighted, }) => {
    const { originalFileName, url, _id, trackIndex } = track;
    return (
      <li
        className={highlighted ? "highlighted" : null}
        onClick={(e) => {  
          // debugger 
          setCurrentTrack(trackIndex)}
        }
      >
        <p>
          <span>{originalFileName}</span>
          <span onClick={() => console.log("TODO action")}>+</span>
        </p>
      </li>
    );
  };

  const TrackList = ({ playlist, currentTrack }) => {
    console.log("playlist in library: ", playlist);
    return (
      <div className="main">
        <div className="trackList">
          <ul>
            {/* trackIndex это порядковый номер объекта в массиве */}
            { playlist.map((track, trackIndex) => (
              (track.originalFileName && track.url && track._id !==null)? 
              <Track
                key={trackIndex}
                track={{ ...track, trackIndex }}
                highlighted={trackIndex === currentTrack}
              /> : ''
              // console.log(track)
            ))}
          </ul>
          <Player playlist={tracks} />
        </div>
      </div>
    );
  };

  return (
    <div className="wrapper">
     <Header login={login}/> 
      {!tracks.length && (
        <div className="container">
          <Spin size="large" />
        </div>
      )}
      <TrackList playlist={tracks} currentTrack={currentTrack} />
      <Footer />
    </div>
  );
};

const mapStateToProps = (state) => ({
  tracks: state.player.tracks,
  currentTrack: state.player.currentTrack,
  login: (state.auth.data.data && state.auth.data.data.sub.login) || "",
});

const mapDispatchToProps = (dispatch) => ({
  getTracks: ()=>setTimeout(() => dispatch(getTracks()), 2000),
  setCurrentTrack: (trackIndex) => dispatch(setCurrentTrack(trackIndex)),
});

// export default connect(mapStateToProps, mapDispatchToProps)(Main);
export default connect(mapStateToProps, mapDispatchToProps)(Lib);