Let user delete Tracks from playlists

seiKiMo-Inc · Nov 24, 2022 · ce8c5af · ce8c5af
1 parent ac78e50
commit ce8c5af
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 10 deletions.
diff --git a/src/backend/playlist.ts b/src/backend/playlist.ts
@@ -114,9 +114,12 @@ export async function addTrackToPlaylist(playlistId: string, track: TrackData):
  * @param playlistId The ID of the playlist.
  * @param index The index of the track to remove.
  */
-export async function removeTrackFromPlaylist(playlistId: string, index: string): Promise<boolean> {
+export async function removeTrackFromPlaylist(playlistId: string, index: number): Promise<boolean> {
     const response = await fetch(`${targetRoute}/playlist/${playlistId}?type=remove`, {
-        method: "PATCH", headers: { Authorization: token() },
+        method: "PATCH", headers: {
+            Authorization: token(),
+            "Content-Type": "application/json"
+        },
         body: JSON.stringify({ index })
     });
 

diff --git a/src/css/Playlist.scss b/src/css/Playlist.scss
@@ -75,6 +75,7 @@
     color: #fff;
     text-align: center;
     margin-top: 20px;
+    margin-bottom: 20px;
 
     &:hover {
         background-color: transparent;

diff --git a/src/ui/components/playlist/PlaylistTrack.tsx b/src/ui/components/playlist/PlaylistTrack.tsx
@@ -6,13 +6,14 @@ import { player, playFromResult } from "@backend/audio";
 
 import Button from "@components/common/Button";
 import { displayModal } from "@components/common/Modal";
-import { faPause, faPlay, faAdd, faShare, faCopy, faDownload } from "@fortawesome/free-solid-svg-icons";
+import { faPause, faPlay, faAdd, faShare, faCopy, faDownload, faDeleteLeft } from "@fortawesome/free-solid-svg-icons";
 
 import "@css/Playlist.scss";
 
 interface IProps {
     track: TrackData;
-    onClick: () => void;
+    setTrack: () => void;
+    removeTrack: () => void;
 }
 
 interface IState {
@@ -64,7 +65,7 @@ class PlaylistTrack extends React.Component<IProps, IState> {
     render() {
         const track = this.props.track;
         return (
-            <div className="PlaylistTrack" key={track.id} onClick={this.props.onClick}>
+            <div className="PlaylistTrack" key={track.id} onClick={this.props.setTrack}>
 
                 <Button
                     id="statusButton"
@@ -85,6 +86,7 @@ class PlaylistTrack extends React.Component<IProps, IState> {
 
                     <div className="PlaylistTrackButtons">
                         <Button icon={faAdd} className="TrackOptionsButtons" tooltip="Add to playlist" onClick={() => displayModal("PlaylistTrackAddModal")} />
+                        <Button icon={faDeleteLeft} className="TrackOptionsButtons" tooltip="Remove track" onClick={this.props.removeTrack} />
                         <Button icon={faShare} className="TrackOptionsButtons" tooltip="Open track source" onClick={this.openTrackSource} />
                         <Button icon={faCopy} className="TrackOptionsButtons" tooltip="Copy track URL" onClick={this.copyTrackURL} />
                         <Button icon={faDownload} className="TrackOptionsButtons" tooltip="Download track" onClick={this.preview2} />

diff --git a/src/ui/components/playlist/PlaylistTracks.tsx b/src/ui/components/playlist/PlaylistTracks.tsx
@@ -1,13 +1,17 @@
 import React from "react";
+
 import { Playlist, TrackData } from "@backend/types";
+import { addTrackToPlaylist, removeTrackFromPlaylist, fetchAllPlaylists } from "@backend/playlist";
+import emitter from "@backend/events";
+
 import PlaylistTrack from "@components/playlist/PlaylistTrack";
+import Modal from "@components/common/Modal";
 
 import "@css/Playlist.scss";
-import Modal from "@components/common/Modal";
-import { addTrackToPlaylist, fetchAllPlaylists } from "@backend/playlist";
 
 interface IProps {
     tracks: TrackData[];
+    playlistId: string;
 }
 
 interface IState {
@@ -43,8 +47,14 @@ class PlaylistTracks extends React.Component<IProps, IState> {
         this.hideModal();
         const playlistId = (document.getElementById("PlaylistTrackAddModal-PlaylistSelect") as HTMLSelectElement).value;
         await addTrackToPlaylist(playlistId, this.state.track);
+        emitter.emit("playlist-update");
     };
 
+    deleteFromPlaylist = async (index) => {
+        await removeTrackFromPlaylist(this.props.playlistId, index);
+        emitter.emit("playlist-update");
+    }
+
     componentDidUpdate() {
         // Scroll to the top of the page when the results change.
         document.documentElement.scrollTop = 0;
@@ -53,9 +63,14 @@ class PlaylistTracks extends React.Component<IProps, IState> {
     render() {
         return (
             <>
-                {this.props.tracks.map((track) => {
+                {this.props.tracks.map((track, index) => {
                     return (
-                        <PlaylistTrack key={track.id} track={track} onClick={() => this.setState({ track: track })} />
+                        <PlaylistTrack
+                            key={track.id}
+                            track={track}
+                            setTrack={() => this.setState({ track: track })}
+                            removeTrack={() => this.deleteFromPlaylist(index)}
+                        />
                     );
                 })}
 

diff --git a/src/ui/pages/PlaylistPage.tsx b/src/ui/pages/PlaylistPage.tsx
@@ -13,6 +13,7 @@ import Modal, { displayModal } from "@components/common/Modal";
 
 import "@css/Playlist.scss";
 import { loadPlaylists } from "@backend/user";
+import emitter from "@backend/events";
 
 interface IState {
     playlist: Playlist;
@@ -63,8 +64,16 @@ class PlaylistPage extends React.Component<any, IState> {
                 this.hideModal();
             }
         };
+
+        emitter.on("playlist-update", async () => {
+            await loadPlaylists();
+            this.setState({
+                playlist: fetchPlaylist(this.props.match.params.id),
+            });
+        });
     }
 
+
     componentWillUnmount() {
         window.onclick = null;
     }
@@ -98,7 +107,7 @@ class PlaylistPage extends React.Component<any, IState> {
                     </div>
                     <div className="PlaylistContent">
                         {this.state.playlist.tracks.length > 0 ? (
-                            <PlaylistTracks tracks={this.state.playlist.tracks} />
+                            <PlaylistTracks tracks={this.state.playlist.tracks} playlistId={this.state.playlist.id} />
                         ) : (
                             <h2 id="NoTracksMessage">No tracks found.</h2>
                         )}