Adding unpin to pinned list (allows unpinning broken/unloadable playlists)

src/js/components/Fields/PinButton.js

@@ -4,7 +4,7 @@ import * as pusherActions from '../../services/pusher/actions';
 import Icon from '../Icon';
 import Button from '../Button';
 
-const PinButton = ({ item }) => {
+const PinButton = ({ item, unpinIcon = 'star', pinIcon = 'star_border' }) => {
   if (!item || !item.name) return null;
 
   const {
@@ -29,7 +29,7 @@ const PinButton = ({ item }) => {
         onClick={remove}
         tracking={{ category: 'PinButton', action: 'Pin' }}
       >
-        <Icon name="star" />
+        <Icon name={unpinIcon} />
       </Button>
     );
   }
@@ -39,7 +39,7 @@ const PinButton = ({ item }) => {
       onClick={add}
       tracking={{ category: 'PinButton', action: 'Unpin' }}
     >
-      <Icon name="star_border" />
+      <Icon name={pinIcon} />
     </Button>
   );
 };

src/js/components/Fields/PinList.js

@@ -2,18 +2,22 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import Link from '../Link';
 import { sortItems } from '../../util/arrays';
+import PinButton from './PinButton';
 
 const PinListItem = ({ item }) => {
   if (!item) return null;
 
   return (
-    <Link
-      to={`/playlist/${item.uri}`}
-      className="sidebar__menu__item sidebar__menu__item--submenu"
-      activeClassName="sidebar__menu__item--active"
-    >
-      {item.name}
-    </Link>
+    <span className="pin-list__item">
+      <PinButton item={item} unpinIcon="delete" />
+      <Link
+        to={`/playlist/${item.uri}`}
+        className="sidebar__menu__item sidebar__menu__item--submenu"
+        activeClassName="sidebar__menu__item--active"
+      >
+        {item.name}
+      </Link>
+    </span>
   );
 };
 

src/js/services/spotify/actions.js

@@ -118,7 +118,6 @@ const request = (dispatch, getState, endpoint, method = 'GET', data = false, cac
   });
 };
 
-
 /**
 * Check an access token validity
 *
@@ -143,9 +142,10 @@ function getToken(dispatch, getState) {
       // Re-check the queue periodically to see if it's finished yet
       // TODO: Look at properly hooking up with the ajax finish event
       setTimeout(
-        () =>
+        () => {
           // Return myself for a re-check
-          getToken(dispatch, getState),
+          getToken(dispatch, getState);
+        },
         1000,
       );
     } else {
@@ -1401,12 +1401,6 @@ export function getPlaylist(uri, options) {
     endpoint += `?market=${getState().spotify.country}`;
     if (forceRefetch) endpoint += `&refetch=${Date.now()}`;
 
-    // TODO
-    // When we have a callbackAction, start the process. To do this:
-    // 1. Create unified callbackAction naming convention
-    // 2. Start process here
-    // 3. Update process as tracks are loaded and enqueue occurs
-
     request(dispatch, getState, endpoint)
       .then(
         (response) => {

src/scss/app.scss

@@ -40,6 +40,7 @@
 @import 'components/sortable';
 @import 'components/mute-control';
 @import 'components/select-field';
+@import 'components/pin-list';
 
 @import 'views/artist';
 @import 'views/user';

src/scss/components/_pin-list.scss

@@ -0,0 +1,27 @@
+.pin-list {
+  &__item {
+    position: relative;
+
+    .button {
+      position: absolute;
+      z-index: 2;
+      left: 2.2em;
+      font-size: 0.85em;
+      opacity: 0;
+
+      &:not(:hover) {
+        color: colour(mid_grey);
+
+        @include theme('light') {
+          color: colour(soft_grey);
+        }
+      }
+    }
+
+    &:hover {
+      .button {
+        opacity: 1;
+      }
+    }
+  }
+}