useEffect to trigger API call (needs delay for mopidy_connected)

src/js/components/Fields/PinList.js

@@ -1,29 +1,37 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
+import React, { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
 import Link from '../Link';
+import * as coreActions from '../../services/core/actions';
+
+const PinListItem = ({ uri }) => {
+  const playlists = useSelector((state) => state.core.playlists);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(coreActions.loadItem(uri));
+  }, [uri]);
+
+  const playlist = playlists[uri] || { uri };
+  return (
+    <Link
+      to={`/playlist/${uri}`}
+      className="sidebar__menu__item sidebar__menu__item--submenu"
+      activeClassName="sidebar__menu__item--active"
+    >
+      {playlist.name || playlist.uri}
+    </Link>
+  );
+};
 
 const PinList = () => {
   const uris = useSelector((state) => state.core.pinned || []);
-  const playlists = useSelector((state) => state.core.playlists);
 
   if (uris.length <= 0) return null;
 
   return (
     <div>
       {
-        uris.map((uri) => {
-          const playlist = playlists[uri] || { uri };
-          return (
-            <Link
-              to={`/playlist/${uri}`}
-              className="sidebar__menu__item sidebar__menu__item--submenu"
-              activeClassName="sidebar__menu__item--active"
-              key={uri}
-            >
-              {playlist.name || playlist.uri}
-            </Link>
-          );
-        })
+        uris.map((uri) => <PinListItem uri={uri} key={uri} />)
       }
     </div>
   );

src/js/services/core/actions.js

@@ -115,14 +115,18 @@ export function cachebustHttpStream() {
  * relevant service to load the record - all from one neat package.
  * */
 
-export function loadItem(uri, force_reload = false) {
+export function loadItems(uris, force_reload = false) {
   return {
-    type: 'LOAD_ITEM',
-    uri,
+    type: 'LOAD_ITEMS',
+    uris,
     force_reload,
   };
 }
 
+export function loadItem(uri, force_reload = false) {
+  return loadItems([uri], force_reload);
+}
+
 export function loadTrack(uri, force_reload = false) {
   return {
     type: 'LOAD_TRACK',

src/js/services/core/middleware.js

@@ -321,11 +321,13 @@ const CoreMiddleware = (function () {
        * assets. This is where we can return already indexed records
        * where appropriate
        * */
-      case 'LOAD_ITEM':
-        store.dispatch(coreActions[`load${titleCase(uriType(action.uri))}`](
-          action.uri,
-          action.force_reload,
-        ));
+      case 'LOAD_ITEMS':
+        action.uris.forEach((uri) => {
+          store.dispatch(coreActions[`load${titleCase(uriType(uri))}`](
+            uri,
+            action.force_reload,
+          ));
+        });
         break;
 
       case 'LOAD_TRACK':

src/scss/components/_sidebar.scss

@@ -38,6 +38,7 @@
       padding: 0.75em 0.85em;
       margin: 0 1.1em;
       border-radius: 3px;
+      line-break: anywhere;
 
       @include theme('dark') & {
         @include gradient_overlay(3px);