-

src/components/EditPlaylistModal.js

@@ -5,12 +5,13 @@ import { actionPlaylistById } from '../store/promiseReducer';
 import { store } from '../store/store';
 import { sendForm } from './SendForm';
 import {Form} from "react-bootstrap";
+import { RunToast } from './Toast';
 
 
 export function EditPlaylistModal  (props)  {
     const [name, setName] = useState(props.playlist?.name);
     const [description, setDescription] = useState(props.playlist?.description);
-    //const [privat, setPrivat] = useState(0);
+    const [privat, setPrivat] = useState(props.playlist?.private);
     const [image, setImage] = useState(props.playlist?.photo);
 
     const PostEditPlaylist = async(event)  =>{
@@ -19,11 +20,12 @@ export function EditPlaylistModal  (props)  {
 
         data.append("name", name || props.playlist?.name);
         (description !== props.playlist?.description) && data.append("description", description);
-        data.append("private", props.playlist?.private);
+        data.append("private", privat);
         image.name && data.append("photo",  image, image.name);
 
         sendForm('playlists/' + props.playlist?.id + '/edit', data);  
         setTimeout(() => store.dispatch(actionPlaylistById(props.playlist?.id)), 100) ;
+        RunToast('bg-success','Success', 'Playlist updated')
     } 
     const PreViewImage = (image) => {
         if (image && typeof (image) !== "string") {
@@ -59,6 +61,14 @@ export function EditPlaylistModal  (props)  {
                     <Form.Label>Description</Form.Label>
                     <Form.Control as="textarea" name="description" rows={3}  id="description" className='form-control mb-3' value={description || ''} onChange={e => setDescription(e.target.value)} />
                 </Form.Group>
+
+                <Form.Check
+                  type="switch"
+                  id="flexCheckIndeterminate"
+                  label="Private?"
+                  checked={privat}
+                  onChange={e => setPrivat(e.target.checked? 1 : 0)}
+              />
             </Form>
         </Modal.Body>
         <Modal.Footer> 

src/components/LoadTrackModal.js

@@ -1,12 +1,12 @@
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
-import {connect}   from 'react-redux';
-import React, {useState, useEffect} from 'react';
+import React, {useState} from 'react';
 import { store } from '../store/store';
 import { sendForm } from './SendForm';
 import { actionPlaylistById} from '../store/promiseReducer';
-import { actionFullSetPlaylist, actionFullSetTrack, actionFullSetTrackCount} from '../store/playerReducer';
+import { actionFullSetPlaylist} from '../store/playerReducer';
 import {Form} from "react-bootstrap";
+import { RunToast } from './Toast';
 
 export function LoadTrackModal  (props)  {
     const [tracks, setTrack] = useState(null);
@@ -27,6 +27,8 @@ export function LoadTrackModal  (props)  {
                 setTimeout(() => store.dispatch(actionFullSetPlaylist(store.getState().promise.plstById?.payload?.tracks)), 1000);
             }
             , 1000);
+            
+        RunToast('bg-success','Success', 'Tracks loaded')
       }  
 
       let TracksTableItem = ({name}) =>

src/components/Tracks.js

@@ -1,6 +1,6 @@
 import {connect}   from 'react-redux';
 import {actionFullSetTrack, actionFullPlay, actionFullSetPlaylist , actionAddTrackToQueue} from '../store/playerReducer';
-import { actionNowPlaylist, actionPlaylistById, actionArtistById} from '../store/promiseReducer';
+import {actionPlaylistById, actionArtistById} from '../store/promiseReducer';
 import { store } from '../store/store';
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
@@ -57,13 +57,14 @@ const ButtonDeleteTrack = (track) => {
 
 
 const Track = ({track,  playlist}) => {
-    // const [select, setSelect] = React.useState('');
     const PostLoadTracks = async(form)  =>{
         console.log(form.target)
         const data = new FormData(form.target);
         sendForm('playlists/add-track', data);
 
-      }  
+      }
+
+    
 return(
 <tr>
 <td scope="row" width={30} data-id={track.id}>
@@ -74,7 +75,7 @@ return(
             playlist.tracks ? store.dispatch(actionFullSetTrack(playlist?.tracks[playlist?.tracks.indexOf(track)])) : store.dispatch(actionFullSetTrack(track))
             store.dispatch(actionFullPlay());
         }}>
-            <FontAwesomeIcon className='' icon={faPlay}/>
+            <FontAwesomeIcon className={`track-play-icon${track?.id}`} icon={faPlay}/>
         </Button>
     </div>
 </td>
@@ -117,7 +118,7 @@ return(
 }
 
 
-export const TracksAll = ({tracks, playlist}) => 
+export const TracksAll = ({tracks, playlist, playingTrack}) => 
 <table className="table table-dark table-hover align-middle">
     <thead>
         <tr>

src/components/createPlaylist.js

@@ -6,6 +6,7 @@ import { actionUsersPlaylists } from '../store/promiseReducer';
 import { store } from '../store/store';
 import { history } from '../App';
 import {Form} from "react-bootstrap";
+import { RunToast } from './Toast';
 
 
 export const CreatePlaylist = (props) => {
@@ -26,6 +27,7 @@ export const CreatePlaylist = (props) => {
     console.log(result);
     store.dispatch(actionUsersPlaylists(store.getState().auth?.user?.id));
     history.push(`/playlist/${result.playlist.id}`)
+    RunToast('bg-success','Success', 'Playlist created')
   }
   const PreViewImage = (image) => {
     if (image && typeof (image) !== "string") {