gRomkoPlayer/AddTrack.js

//try to do dropzone, open Programming/hw/project/src/components/DropZone and check code
//MyPlaylists && playerActions && AddTrack
import React, { useState, useEffect, useRef, useCallback } from "react";
import { useDropzone } from "react-dropzone";
import {
  addTrackToPlaylist,
  deleteTrackFromPlaylist,
  // AddTrackFromLibToPlaylist
} from "../actions/playerActions";
import { connect } from "react-redux";
import { Spin } from "antd";

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

const AddTrack = ({
  myPlaylist,
  addTrackToPlaylist,
  deleteTrackFromPlaylist,
  // AddTrackFromLibToPlaylist,
  // playlistId,
  // playlist,
  // form
  // setCurrentTrack, currentTrack
}) => {
  // const onDrop = useCallback(acceptedFiles => {
  //   // Do something with the files
  //   console.log(acceptedFiles)
  // }, [])
  // const {getRootProps, getInputProps} = useDropzone({onDrop})

  // console.log('currentTrack in AddTrack: ', currentTrack);

  let ref = useRef();
  const [isLoading, setIsLoading] = useState(false);
  //let formData = new FormData();

  const onDrop = useCallback((acceptedFiles) => {
    console.log(acceptedFiles)
    acceptedFiles.map((file) => {
      // function Upload(playlistId, playlist, form) {
      //   setIsLoading(true);
      //   let arrTracks = [];
      //   playlist.tracks &&
      //     playlist.tracks.map((item) => arrTracks.push({ ["_id"]: item._id }));
      //   // }
      let formData = new FormData();
      formData.append("track", file);
      // Upload(playlistId, playlist, formData)
      // fetch("/track", {
      //   method: "POST",
      //   headers: localStorage.authToken
      //     ? { Authorization: "Bearer " + localStorage.authToken }
      //     : {},
      //   //body: new FormData(form),
      //   body: formData,
      // })
      //   .then((res) => res.json()) //у чего есть then? у promise.
      //   .then(async (track) => {
      //     console.log("track: ", track);
      //     await addTrackToPlaylist(playlistId, arrTracks, track._id);
      //     setIsLoading(false);
      //   });
      // }
    });
  })
  // }

  function Upload(playlistId, playlist, formData) {
    setIsLoading(true);
    let arrTracks = [];
    playlist.tracks &&
      playlist.tracks.map((item) => arrTracks.push({ ["_id"]: item._id }));

    fetch("/track", {
      method: "POST",
      headers: localStorage.authToken
        ? { Authorization: "Bearer " + localStorage.authToken }
        : {},
      //body: new FormData(form),
      body: formData,
    })
      .then((res) => res.json()) //у чего есть then? у promise.
      .then(async (track) => {
        console.log("track: ", track);
        await addTrackToPlaylist(playlistId, arrTracks, track._id);
        setIsLoading(false);
      });
    console.log("arrTracks in upload: ", arrTracks);
  }
  const { getRootProps, getInputProps } = useDropzone({ onDrop });

  return (
    <div className="my_tracks">
      <h2>My tracks in playlist {myPlaylist.name}</h2>
      <ul>
        {myPlaylist &&
          myPlaylist.tracks &&
          myPlaylist.tracks.map((track, index) => (
            <li key={index.toString()}>
              {track.originalFileName}
              <span
                className="adding-track"
                onClick={() => {
                  console.log(index);
                  deleteTrackFromPlaylist(
                    localStorage.lastPLaylist,
                    myPlaylist,
                    index
                  );
                }}
              >
                x
                  </span>
            </li>
          ))}
      </ul>
      {/* <div classMane={"add"} {...getRootProps()}> */}
        <div className={"main__description__dropzone"} {...getRootProps()}>
          <h2>Add track</h2>
          {/* <Spin className="" spinning={isLoading} /> */}
          <input {...getInputProps()} />+
          </div>
      {/* </div> */}
    </div>
  );
};

const mapStateToProps = (state) => ({
  // newTrack: state.player.newTrack,
});

const mapDispatchtoProps = (dispatch) => ({
  addTrackToPlaylist: (idPlaylist, arrTracks, idTrack) =>
    dispatch(addTrackToPlaylist(idPlaylist, arrTracks, idTrack)),
  deleteTrackFromPlaylist: (idPlaylist, playlist, currentIndex) =>
    dispatch(deleteTrackFromPlaylist(idPlaylist, playlist, currentIndex)),
});

export default connect(mapStateToProps, mapDispatchtoProps)(AddTrack);