Merge pull request #2 from michaelsmedley/dev

add emit to track finder to handle getting bpm and recommendations
michaelsmedley · Sep 1, 2020 · 7b6ee69 · 7b6ee69
2 parents d18d1a5 + 8b00d2b
commit 7b6ee69
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 13 deletions.
diff --git a/src/components/TheTrackFinder.vue b/src/components/TheTrackFinder.vue
@@ -7,14 +7,12 @@
       v-model="track"
     />
 
-    <p>{{ track }}</p>
-
     <button type="submit">Search</button>
     <div class="suggestions" v-if="state.suggestions.length > 0">
       <h2>Suggestions</h2>
       <inline-list>
         <li v-for="suggestion in state.suggestions" :key="suggestion.id">
-          <button @click="handleGetBpm(suggestion)" class="inline-btn">
+          <button @click="handleTrackClick(suggestion)" class="inline-btn">
             {{ suggestion.artists[0].name }} - {{ suggestion.name }}
           </button>
         </li>
@@ -40,8 +38,8 @@ export default {
   data() {
     return {
       timeout: null,
-      debounceTimer: 1000
-    }
+      debounceTimer: 1000,
+    };
   },
 
   computed: {
@@ -50,7 +48,7 @@ export default {
         return this.state.track;
       },
       set(newValue) {
-        this.state.track = newValue
+        this.state.track = newValue;
         if (this.timeout !== null) {
           clearTimeout(this.timeout);
         }
@@ -63,6 +61,9 @@ export default {
   },
 
   methods: {
+    handleTrackClick(track) {
+      this.$emit("selected", track);
+    },
     search(val) {
       // this.state.track = val
       SongsModel.searchTrack(val, this.state.authToken).then((resp) => {

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -4,7 +4,7 @@
     <p v-if="state.authToken">Connected with token {{ state.authToken }}</p>
     <p v-if="state.userToken">User authorised with {{ state.userToken }}</p>
 
-    <track-finder />
+    <track-finder @selected="handleGetBpm" />
 
     <div v-if="state.selectedTrack && state.tempo">
       <p>
@@ -53,8 +53,9 @@
 
 <script>
 import AuthModel from "@/api/AuthModel";
+import SongsModel from "@/api/SongsModel";
 
-import TrackFinder from '@/components/TheTrackFinder'
+import TrackFinder from "@/components/TheTrackFinder";
 
 export default {
   name: "Home",
@@ -74,8 +75,27 @@ export default {
 
   computed: {
     track() {
-      return this.state.track
-    }
+      return this.state.track;
+    },
+  },
+
+  methods: {
+    handleGetBpm(track) {
+      this.state.selectedTrack = track;
+      this.state.suggestions = [];
+      SongsModel.getTrackInfo(track.id, this.state.authToken).then((resp) => {
+        this.state.tempo = resp;
+
+        // get recomendations
+        SongsModel.getRecommendations(
+          resp,
+          track.id,
+          this.state.authToken
+        ).then((resp) => {
+          this.state.recommendations = resp;
+        });
+      });
+    },
   },
 
   mounted() {
@@ -178,6 +198,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>