Refactor removing tracks

js/actionCreators.js

@@ -23,7 +23,8 @@ import {
   SET_EQ_ON,
   SET_EQ_OFF,
   TOGGLE_EQUALIZER_SHADE_MODE,
-  CLOSE_EQUALIZER_WINDOW
+  CLOSE_EQUALIZER_WINDOW,
+  REMOVE_TRACKS
 } from "./actionTypes";
 
 export function play() {
@@ -232,3 +233,23 @@ export function toggleEqualizerShadeMode() {
 export function closeEqualizerWindow() {
   return { type: CLOSE_EQUALIZER_WINDOW };
 }
+
+export function cropPlaylist() {
+  return (dispatch, getState) => {
+    const { tracks } = getState();
+    dispatch({
+      type: REMOVE_TRACKS,
+      ids: Object.keys(tracks).filter(id => !tracks[id].selected)
+    });
+  };
+}
+
+export function removeSelectedTracks() {
+  return (dispatch, getState) => {
+    const { tracks } = getState();
+    dispatch({
+      type: REMOVE_TRACKS,
+      ids: Object.keys(tracks).filter(id => tracks[id].selected)
+    });
+  };
+}

js/actionTypes.js

@@ -48,5 +48,5 @@ export const INVERT_SELECTION = "INVERT_SELECTION";
 export const PLAYLIST_SIZE_CHANGED = "PLAYLIST_SIZE_CHANGED";
 export const REMOVE_ALL_TRACKS = "REMOVE_ALL_TRACKS";
 export const CROP_TRACKS = "CROP_TRACKS";
-export const REMOVE_SELECTED_TRACKS = "REMOVE_SELECTED_TRACKS";
 export const FILE_INFO = "FILE_INFO";
+export const REMOVE_TRACKS = "REMOVE_TRACKS";

js/components/PlaylistWindow/RemoveMenu.js

@@ -1,15 +1,12 @@
 import React from "react";
 import { connect } from "react-redux";
-import {
-  REMOVE_ALL_TRACKS,
-  CROP_TRACKS,
-  REMOVE_SELECTED_TRACKS
-} from "../../actionTypes";
+import { REMOVE_ALL_TRACKS } from "../../actionTypes";
+import { cropPlaylist, removeSelectedTracks } from "../../actionCreators";
 import PlaylistMenu from "./PlaylistMenu";
 
 const RemoveMenu = props => (
   <PlaylistMenu id="playlist-remove-menu">
-    <li className="remove-misc" onClick={props.removeSelected} />
+    <li className="remove-misc" />
     <li className="remove-all" onClick={props.removeAll} />
     <li className="crop" onClick={props.crop} />
     <li className="remove-selected" onClick={props.removeSelected} />
@@ -17,8 +14,8 @@ const RemoveMenu = props => (
 );
 
 const mapDispatchToProps = {
-  removeSelected: () => ({ type: REMOVE_SELECTED_TRACKS }),
+  removeSelected: removeSelectedTracks,
   removeAll: () => ({ type: REMOVE_ALL_TRACKS }),
-  crop: () => ({ type: CROP_TRACKS })
+  crop: cropPlaylist
 };
 export default connect(null, mapDispatchToProps)(RemoveMenu);

js/reducers.js

@@ -41,8 +41,7 @@ import {
   INVERT_SELECTION,
   PLAYLIST_SIZE_CHANGED,
   REMOVE_ALL_TRACKS,
-  CROP_TRACKS,
-  REMOVE_SELECTED_TRACKS
+  REMOVE_TRACKS
 } from "./actionTypes";
 import { playlistEnabled } from "./config";
 
@@ -268,10 +267,8 @@ const tracks = (state = defaultTracksState, action) => {
       }));
     case REMOVE_ALL_TRACKS:
       return {};
-    case CROP_TRACKS:
-      return filterObject(state, track => track.selected);
-    case REMOVE_SELECTED_TRACKS:
-      return filterObject(state, track => !track.selected);
+    case REMOVE_TRACKS:
+      return filterObject(state, (track, id) => !action.ids.includes(id));
     default:
       return state;
   }
@@ -285,6 +282,11 @@ const playlist = (state = defaultPlaylistState, action) => {
   switch (action.type) {
     case REMOVE_ALL_TRACKS:
       return { ...state, trackOrder: [], currentTrack: null };
+    case REMOVE_TRACKS:
+      return {
+        ...state,
+        trackOrder: state.trackOrder.filter(id => !action.ids.includes(id))
+      };
     default:
       return state;
   }