Add Axios and data fetching to the MainView

src/components/ControlBar.vue

@@ -70,6 +70,7 @@
 </template>
 
 <script>
+import * as axios from "axios";
 import Icon from "./Icon.vue";
 
 export default {
@@ -147,6 +148,30 @@ export default {
 				duration: this.duration,
 			});
 		},
+	},
+	mounted: function() {
+		this.$nextTick(function() {
+			axios.get(
+				`${this.api_url}/me`,
+				{ headers: { Authorization: `Bearer ${this.token}` } }
+			).then((response) => {
+				if (response.error) {
+					window.location.hash = ``;
+					window.location.href = `${this.auth.redirect}?error=${encodeURI(response.error)}`;
+					return
+				}
+				let data = response.data;
+
+				// Set the Vue user object
+				this.user.name = data.display_name;
+				this.user.image = data.images.length > 0 ? data.images[0].url : ``;
+
+			}).catch((err) => {
+				window.location.hash = ``;
+				window.location.href = `${this.auth.redirect}?error=${encodeURI(err)}`;;
+				return
+			})
+		});
 	}
 }
 </script>

src/components/MainView.vue

@@ -10,7 +10,8 @@
 </template>
 
 <script>
-import ControlCard from "./ControlBar.vue"
+import * as axios from "axios";
+import ControlCard from "./ControlBar.vue";
 
 export default {
 	name: `MainView`,
@@ -21,14 +22,38 @@ export default {
 	components: {
 		Control: ControlCard
 	},
-	data() { return {};},
+	data() { return {
+		data: [],
+		error: ``,
+		api_base: `https://api.spotify.com/v1`,
+	};},
 	computed: {},
 	methods: {
+		get_token() {
+			let params = new URLSearchParams(window.location.hash.slice(1));
+			return params.get(`access_token`);
+		},
 		handle_export() {
 			console.log("Handling the export");
 		},
-		get_data() {
+		get_data(config) {
 			console.log("Fetching data from Spotify")
+			console.log(config)
+			let url = `${this.api_base}/me/top/${config.type.toLowerCase()}`;
+
+			let limit = parseInt(config.count) || 10;
+
+			url += `?limit=${limit}&time_range=${config.duration}`;
+
+			axios.get(
+				url,
+				{ headers: { Authorization: `Bearer ${this.get_token()}` } }
+			).then((response) => {
+				this.error = ``;
+				this.data = response.data.items;
+			}).catch((err) => {
+				this.error = `${err.name}: ${err.message}`
+			});
 		},
 	}
 }