Upgrading

src/js/components/ContextMenu.js

@@ -14,6 +14,7 @@ import {
 import {
   arrayOf,
   sortItems,
+  indexToArray,
 } from '../util/arrays';
 import Link from './Link';
 import Icon from './Icon';
@@ -375,7 +376,7 @@ class ContextMenu extends React.Component {
       uiActions: {
         hideContextMenu,
       },
-      mopidyActions: {
+      coreActions: {
         addTracksToPlaylist,
       },
       menu: {
@@ -678,7 +679,7 @@ class ContextMenu extends React.Component {
   renderSubmenu = () => {
     const { submenu } = this.state;
     const {
-      playlists,
+      playlists: playlistsIndex,
       processes,
     } = this.props;
 
@@ -686,10 +687,11 @@ class ContextMenu extends React.Component {
     let isLoading = false;
 
     if (submenu === 'add-to-playlist') {
-      const editablePlaylists =
-        playlists.filter(playlist => playlist.can_edit).sortItems(editablePlaylists, 'name');
+      let playlists = indexToArray(playlistsIndex);
+      playlists = playlists.filter((playlist) => playlist.can_edit);
+      playlists = sortItems(playlists, 'name');
 
-      if (processes.SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR && processes.SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR.status == 'running') {
+      if (processes.SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR && processes.SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR.status === 'running') {
         isLoading = true;
       }
 
@@ -698,8 +700,8 @@ class ContextMenu extends React.Component {
           <span className="context-menu__item mid_grey-text">No writable playlists</span>
         </span>
       );
-      if (editablePlaylists.length > 0) {
-        list = editablePlaylists.map((playlist) => (
+      if (playlists.length > 0) {
+        list = playlists.map((playlist) => (
           <span className="context-menu__item" key={playlist.uri}>
             <a
               className="context-menu__item__link"

src/js/components/DebugInfo.js

@@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux';
 import { get as getStorage } from '../util/storage';
 import { isTouchDevice } from '../util/helpers';
 import * as uiActions from '../services/ui/actions';
+import { indexToArray } from '../util/arrays';
 
 class DebugInfo extends React.Component {
   localStorageSize() {
@@ -32,17 +33,12 @@ class DebugInfo extends React.Component {
     const { ui: { load_queue } } = this.props;
     if (!load_queue) return <div className="debug-info-item mid_grey-text">Nothing loading</div>;
 
-    const queue = [];
-    for (const key in load_queue) {
-      if (load_queue.hasOwnProperty(key)) {
-        queue.push(<div key={key}>{load_queue[key]}</div>);
-      }
-    }
+    const queue = indexToArray(load_queue);
 
     if (queue.length > 0) {
       return (
         <div className="debug-info-item">
-          {queue}
+          {queue.map((item) => (<div key={item}>{item}</div>))}
         </div>
       );
     }

src/js/components/Fields/OutputControl.js

@@ -9,7 +9,7 @@ import DropdownField from './DropdownField';
 import * as coreActions from '../../services/core/actions';
 import * as pusherActions from '../../services/pusher/actions';
 import * as snapcastActions from '../../services/snapcast/actions';
-import { sortItems } from '../../util/arrays';
+import { sortItems, indexToArray } from '../../util/arrays';
 
 class OutputControl extends React.Component {
   constructor(props) {
@@ -59,12 +59,7 @@ class OutputControl extends React.Component {
       snapcast_groups,
     } = this.props;
 
-    const groups = [];
-    for (var key in snapcast_groups) {
-      if (snapcast_groups.hasOwnProperty(key)) {
-        groups.push(snapcast_groups[key]);
-      }
-    }
+    const groups = indexToArray(snapcast_groups);
     if (groups.length <= 0) return null;
 
     const streams = Object.keys(snapcast_streams).map(
@@ -117,13 +112,7 @@ class OutputControl extends React.Component {
 
     if (!pusher_commands) return null;
 
-    let items = [];
-    for (var key in pusher_commands) {
-      if (pusher_commands.hasOwnProperty(key)) {
-        items.push(pusher_commands[key]);
-      }
-    }
-
+    let items = indexToArray(pusher_commands);
     if (items.length <= 0) return null;
 
     items = sortItems(items, 'sort_order');

src/js/components/Notifications.js

@@ -11,6 +11,7 @@ import * as snapcastActions from '../services/snapcast/actions';
 
 import Icon from './Icon';
 import Loader from './Loader';
+import { indexToArray } from '../util/arrays';
 
 class Notifications extends React.Component {
   importConfiguration(notification_key, configuration) {
@@ -42,12 +43,7 @@ class Notifications extends React.Component {
   renderNotifications() {
     if (!this.props.notifications || this.props.notifications.length <= 0) return null;
 
-    const notifications = [];
-    for (const key in this.props.notifications) {
-      if (this.props.notifications.hasOwnProperty(key)) {
-        notifications.push(this.props.notifications[key]);
-      }
-    }
+    const notifications = indexToArray(this.props.notifications);
 
     return (
       <span>

src/js/components/PusherConnectionList.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import * as pusherActions from '../services/pusher/actions';
+import { indexToArray } from '../util/arrays';
 
 class PusherConnectionList extends React.Component {
   componentDidMount() {
@@ -21,13 +22,7 @@ class PusherConnectionList extends React.Component {
       return <div className="pusher-connection-list mid_grey-text">Not connected</div>;
     }
 
-    const connections = [];
-    for (const connection_id in this.props.connections) {
-      if (this.props.connections.hasOwnProperty(connection_id)) {
-        connections.push(this.props.connections[connection_id]);
-      }
-    }
-
+    const connections = indexToArray(this.props.connections);
     if (connections.length <= 0) {
       return <div className="pusher-connection-list mid_grey-text">No connections</div>;
     }

src/js/util/arrays.js

@@ -1,5 +1,19 @@
 import { uriSource } from './helpers';
 
+/**
+ * Convert an object (ie index) to an array of values
+ *
+ * @param object Object
+ * @return Array
+ */
+const indexToArray = (index) => {
+  const array = [];
+  for (let key in index) {
+    if (index.hasOwnProperty(key)) array.push(index[key]);
+  }
+  return array;
+};
+
 /**
  * Digest an array of objects and pull into simple array of one property
  *
@@ -241,6 +255,7 @@ export {
   createRange,
   sortItems,
   shuffle,
+  indexToArray,
 };
 
 export default {
@@ -251,4 +266,5 @@ export default {
   createRange,
   sortItems,
   shuffle,
+  indexToArray,
 };

src/js/views/modals/AddToPlaylist.js

@@ -14,8 +14,7 @@ import { sourceIcon } from '../../util/helpers';
 import { sortItems } from '../../util/arrays';
 
 class AddToPlaylist extends React.Component {
-  constructor(props) {
-    super(props);
+  componentDidMount = () => {
     const {
       spotify_library_playlists,
       mopidy_library_playlists,