Use endpoint for playlist items when adding a new item (#1115)

* Use endpoint for playlist items when adding a new item

* Run `yarn lint`

* Update to match api

* Use latest api-client-js

---------

Co-authored-by: Charlotte Van Petegem <[email protected]>

package.json

@@ -9,7 +9,7 @@
     "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
   },
   "dependencies": {
-    "@accentor/api-client-js": "^0.19.1",
+    "@accentor/api-client-js": "^0.20.0",
     "@mdi/font": "^7.4.47",
     "@mdi/svg": "^7.4.47",
     "fetch-retry": "^6.0.0",

src/components/AddToPlaylist.vue

@@ -98,7 +98,7 @@ export default {
     },
   },
   methods: {
-    ...mapActions("playlists", ["update"]),
+    ...mapActions("playlists", ["addItem"]),
     filterName(item, queryText) {
       const search = queryText.toLowerCase();
       return item.name.toLowerCase().indexOf(search) > -1;
@@ -108,10 +108,16 @@ export default {
         return;
       }
 
-      const newItems = [...this.selectedPlaylist.item_ids, this.item.id];
-      this.update({
+      // Item type requires a capitalized string
+      const item_type =
+        this.selectedPlaylist.playlist_type.charAt(0).toUpperCase() +
+        this.selectedPlaylist.playlist_type.slice(1);
+      this.addItem({
         id: this.selectedPlaylist.id,
-        newPlaylist: { item_ids: newItems },
+        newItem: {
+          item_id: this.item.id,
+          item_type,
+        },
       }).finally(() => {
         this.dialog = false;
       });

src/store/playlists.js

@@ -92,6 +92,17 @@ export default {
         return false;
       }
     },
+    async addItem({ commit, rootState, dispatch }, { id, newItem }) {
+      try {
+        await api.playlists.addItem(rootState.auth, id, {
+          playlist_item: newItem,
+        });
+        await dispatch("read", newItem.playlist_id);
+      } catch (error) {
+        commit("addError", error, { root: true });
+        return false;
+      }
+    },
     async destroy({ commit, rootState }, id) {
       try {
         await api.playlists.destroy(rootState.auth, id);