First iteration of playlist exporting -- functional

src/components/modals/PlaylistExport.vue

@@ -29,9 +29,20 @@
 								<option :value="false">Private Playlist</option>
 								<option :value="true">Public Playlist</option>
 							</select>
-							<button>Create Playlist</button>
+							<button
+								:disabled="!create_button_enabled"
+								@click.self="create_playlist()"
+							>
+								Create Playlist
+							</button>
 						</div>
 					</div>
+					<div
+						v-if="success"
+						class="alert success"
+					>
+						<a :href="playlist.url">Playlist</a> created successfully!
+					</div>
 				</div>
 			</transition>
 		</div>
@@ -39,6 +50,8 @@
 </template>
 
 <script>
+import * as axios from "axios";
+
 export default {
 	name: `PlaylistExportModal`,
 	props: {
@@ -50,13 +63,23 @@ export default {
 			type: String,
 			required: true,
 		},
+		data: {
+			type: Array,
+			required: true,
+		}
 	},
 	data() {return {
 		container: false,
 		content: false,
+		create_button_enabled: true,
 		name: ``,
 		is_public: false,
 		description: `Playlist auto-generated by Top Lists for Spotify`,
+		success: false,
+		playlist: {
+			id: null,
+			url: null,
+		},
 	}},
 	mounted() {
 		let date = new Date();
@@ -70,7 +93,62 @@ export default {
 	},
 	methods: {
 		create_playlist() {
+			this.create_button_enabled = false;
 
+			// Generate payload object
+			let payload = {
+				name: this.name,
+				description: this.description,
+				public: this.is_public
+			};
+
+			// Create the Spotify playlist (no tracks yet)
+			axios.post(
+				`${this.api_url}/users/${this.user_id}/playlists`,
+				JSON.stringify(payload),
+				{ headers: {
+					Authorization: `Bearer ${this.api_token}`,
+					"Content-Type": `application/json`
+				} }
+			)
+			.then(response => {
+				this.playlist.id = response.data.id;
+				this.playlist.url = response.data.external_urls.spotify;
+				this.populate_playlist()
+			})
+			.catch((err) => {
+				console.error(err)
+				window.location.hash = ``;
+				window.location.href = `${this.auth_redirect}?error=${encodeURI(err)}`;;
+				return
+			})
+		},
+		populate_playlist() {
+			// POST /playlists/{playlist_id}/tracks
+			let payload = { uris: [] };
+
+			for (var track of this.data) {
+				payload.uris.push(track.uri);
+			};
+
+			axios.post(
+				`${this.api_url}/playlists/${this.playlist.id}/tracks`,
+				payload,
+				{ headers: {
+					Authorization: `Bearer ${this.api_token}`,
+					"Content-Type": `application/json`
+				} }
+			)
+			.then(response => {
+				alert(`Playlist created successfully.`);
+				this.success = true;
+			})
+			.catch((err) => {
+				console.error(err)
+				window.location.hash = ``;
+				window.location.href = `${this.auth_redirect}?error=${encodeURI(err)}`;;
+				return;
+			})
 		},
 	},
 }