From e6cd41855bf607b60e798e8c9c0b06a1ca7ce559 Mon Sep 17 00:00:00 2001
From: Eric Lambrecht <ericlambrecht.hh@gmail.com>
Date: Fri, 26 Oct 2018 15:28:02 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20Added=20shuffle=20operation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EditorOperationPanel.vue     | 40 +++++++++++++++++----
 src/components/LoggedOutWindow.vue          |  4 +--
 src/components/modals/ConfirmationModal.vue |  2 +-
 src/config.js                               |  9 ++++-
 src/editor-operations/shuffle.js            | 25 +++++++++++++
 src/store/app/actions.js                    |  8 +++--
 src/store/editor/actions.js                 | 15 ++++++++
 src/store/editor/getters.js                 |  1 +
 8 files changed, 91 insertions(+), 13 deletions(-)
 create mode 100644 src/editor-operations/shuffle.js

diff --git a/src/components/EditorOperationPanel.vue b/src/components/EditorOperationPanel.vue
index 3b307db2..94fba6c7 100644
--- a/src/components/EditorOperationPanel.vue
+++ b/src/components/EditorOperationPanel.vue
@@ -5,8 +5,10 @@
         <b-column>
           <start-time-settings/>
         </b-column>
-        <b-column>
-          <b-button @click="shuffle">Shuffle</b-button>
+        <b-column class="right">
+          <b-button tertiary @click="onClickShuffle">
+            <shuffle-icon class="icon"/>
+          </b-button>
         </b-column>
       </b-row>
     </b-grid>
@@ -15,24 +17,40 @@
 
 <script>
 import { mapActions } from 'vuex';
+import { Shuffle } from 'vue-feather-icon';
 import StartTimeSettings from './StartTimeSettings.vue';
+import shuffle from '../editor-operations/shuffle';
 
 export default {
   name: 'EditorOperationPanel',
   components: {
     StartTimeSettings,
+    ShuffleIcon: Shuffle.default,
   },
   methods: {
-    async shuffle() {
+    async onClickShuffle() {
       try {
-        await this.askForConfirmation();
-        console.log('Shuffle');
+        await this.askForConfirmation({
+          headline: 'Shuffle',
+          question: 'Are you sure you want to shuffle your playlist?',
+          positive: 'Shuffle',
+          negative: 'Cancel',
+        });
+        await this.rearrangePlaylistWith(shuffle);
       } catch (e) {
-        // do nothing
+        this.addToast({
+          message: e.message,
+          type: 'error',
+          dismissible: false,
+        });
       }
     },
     ...mapActions('app', [
       'askForConfirmation',
+      'addToast',
+    ]),
+    ...mapActions('editor', [
+      'rearrangePlaylistWith',
     ]),
   },
 };
@@ -44,4 +62,14 @@ export default {
     box-shadow: 0 2px 2px 0px rgba(0,0,0,0.1);
     background-color: var(--color-light-grey);
   }
+
+  .icon, .icon > * {
+    color: green;
+    fill: red;
+    stroke: blue;
+  }
+
+  .right {
+    margin-left: auto;
+  }
 </style>
diff --git a/src/components/LoggedOutWindow.vue b/src/components/LoggedOutWindow.vue
index 10d6b5b5..5a89ea8c 100644
--- a/src/components/LoggedOutWindow.vue
+++ b/src/components/LoggedOutWindow.vue
@@ -12,7 +12,7 @@
 import SquareImage from './SquareImage.vue';
 import config from '../config';
 
-const scopes = ['playlist-modify-public'];
+const scopes = config.spotify.scopes;
 const getScopes = () => scopes.map(scope => encodeURIComponent(scope)).join(' ');
 
 export default {
@@ -23,7 +23,7 @@ export default {
   computed: {
     loginURI() {
       return `${'https://accounts.spotify.com/authorize?'
-        + 'client_id='}${config.client_id}&`
+        + 'client_id='}${config.spotify.client_id}&`
         + 'response_type=token&'
         + `scope=${getScopes()}&`
         + `redirect_uri=${encodeURIComponent(`${window.location.protocol}//${window.location.host}${window.location.pathname}`)}`;
diff --git a/src/components/modals/ConfirmationModal.vue b/src/components/modals/ConfirmationModal.vue
index 7a4fff91..4191a866 100644
--- a/src/components/modals/ConfirmationModal.vue
+++ b/src/components/modals/ConfirmationModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <b-modal headline="Please confirm">
+  <b-modal :headline="pendingConfirmation.headline">
     <b-text>{{ pendingConfirmation.question }}</b-text>
     <div slot="footer">
       <b-button tertiary @click="declineConfirmation">{{ pendingConfirmation.negative }}</b-button>
diff --git a/src/config.js b/src/config.js
index 380d89a6..d7f56bc3 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,5 +1,12 @@
 const config = {
-  client_id: 'dc57243b2f564609beb31f87954380b6',
+  spotify: {
+    client_id: 'dc57243b2f564609beb31f87954380b6',
+    scopes: [
+      'playlist-read-private',
+      'playlist-modify-public',
+      'playlist-modify-private',
+    ],
+  },
 };
 
 export default config;
diff --git a/src/editor-operations/shuffle.js b/src/editor-operations/shuffle.js
new file mode 100644
index 00000000..144a2dc0
--- /dev/null
+++ b/src/editor-operations/shuffle.js
@@ -0,0 +1,25 @@
+export default {
+  rearrange(playlist) {
+    let uris = playlist.tracks.items.map(item => item.track.uri);
+    uris = this.shuffleArray(uris);
+    return uris;
+  },
+
+  /**
+   * Shuffles array in place. (Fisher-Yates-Shuffle)
+   * @param {Array} a items An array containing the items.
+   */
+
+  shuffleArray(a) {
+    /* eslint-disable */
+    var j, x, i;
+    for (i = a.length - 1; i > 0; i--) {
+      j = Math.floor(Math.random() * (i + 1));
+      x = a[i];
+      a[i] = a[j];
+      a[j] = x;
+    }
+    return a;
+    /* eslint-enable */
+  },
+};
diff --git a/src/store/app/actions.js b/src/store/app/actions.js
index fcb11db3..ef3750f5 100644
--- a/src/store/app/actions.js
+++ b/src/store/app/actions.js
@@ -39,16 +39,18 @@ export default {
     }
   },
 
-  askForConfirmation({ commit }, confirmation) {
+  askForConfirmation({ commit }, confirmation = {}) {
     const promise = new Promise((resolve, reject) => {
       commit('setOnConfirmationAccept', resolve);
       commit('setOnConfirmationDecline', reject);
     });
-    // TODO make customizable
-    commit('setPendingConfirmation', confirmation || {
+
+    commit('setPendingConfirmation', {
+      headline: 'Please confirm',
       question: 'Are you sure you want to proceed?',
       positive: 'Yes',
       negative: 'No',
+      ...confirmation,
     });
     return promise;
   },
diff --git a/src/store/editor/actions.js b/src/store/editor/actions.js
index 4c073f5c..9ac77b19 100644
--- a/src/store/editor/actions.js
+++ b/src/store/editor/actions.js
@@ -81,4 +81,19 @@ export default {
       Spotify.handleApiError(dispatch, err);
     }
   },
+
+  async replaceTracks({ dispatch, state }, uris) {
+    try {
+      await api.replaceTracksInPlaylist(state.playlist.id, uris);
+      await dispatch('fetchPlaylist', state.playlist.id);
+    } catch (err) {
+      Spotify.handleApiError(dispatch, err);
+    }
+  },
+
+  async rearrangePlaylistWith({ dispatch, state }, rearranger) {
+    const { playlist } = state;
+    const uris = rearranger.rearrange(playlist);
+    return dispatch('replaceTracks', uris);
+  },
 };
diff --git a/src/store/editor/getters.js b/src/store/editor/getters.js
index d5d82921..b2e23f49 100644
--- a/src/store/editor/getters.js
+++ b/src/store/editor/getters.js
@@ -4,6 +4,7 @@ export default {
     href: '',
     images: [],
     public: false,
+    id: null,
     tracks: {
       items: [],
       total: 0,