add Drop Zone

AddTrack.js

@@ -0,0 +1,139 @@
+//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);