First JSONAPI relationship, videos and tags

src/main.js

@@ -2,18 +2,31 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
-import { Server, JSONAPISerializer, Model } from "miragejs";
+import { Server, JSONAPISerializer, Model, hasMany } from "miragejs";
 import videoJSON from "./mirage/videos.json";
+import tagsJSON from "./mirage/tags.json";
 
 let server = new Server({
   serializers: {
-    application: JSONAPISerializer
+    application: JSONAPISerializer,
+    video: JSONAPISerializer.extend({
+      include: ['tags']
+    }),
+    tag: JSONAPISerializer.extend({
+      include: ['videos']
+    })
   },
   fixtures: {
-    videos: videoJSON
+    videos: videoJSON,
+    tags: tagsJSON
   },
   models: {
-    video: Model
+    video: Model.extend({
+      tags: hasMany()
+    }),
+    tag: Model.extend({
+      videos: hasMany()
+    })
   },
   routes() {
     this.get("/videos")

src/mirage/tags.json

@@ -0,0 +1,9 @@
+[
+  {
+    "id": "1",
+    "name": "Javascript",
+    "videoIds": [
+      "1"
+    ]
+  }
+]

src/mirage/videos.json

@@ -1,9 +1,13 @@
 [
   {
+    "id": "1",
     "name": "ES2015 Arrow Functions",
     "description": "<p>ES2015 (aka ES6) has some great ways to make your code easier to write and understand. In this episode, we cover two different ways that you can make your code clearer by removing the 'function' keyword.</p>",
     "thumbnail": "https://vue-screencasts.s3.us-east-2.amazonaws.com/images/video-thumbnails/Thumbnail+-+Arrow+Function.png",
-    "videoUrl": "https://vue-screencasts.s3.us-east-2.amazonaws.com/video-files/38-+es2015-+functions+minus+'function'.mp4"
+    "videoUrl": "https://vue-screencasts.s3.us-east-2.amazonaws.com/video-files/38-+es2015-+functions+minus+'function'.mp4",
+    "tagIds": [
+      "1"
+    ]
   },
   {
     "name": "ES2015 Template Strings",

src/store/index.js

@@ -6,22 +6,33 @@ Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
-    videos: []
+    videos: [],
+    tags: []
   },
   mutations: {
     SET_VIDEOS(state, videos) {
       state.videos = videos
+    },
+    SET_TAGS(state, tags) {
+      state.tags = tags
     }
   },
   actions: {
     async loadVideos({commit}){
       let response = await Api().get('/videos');
       let videos = response.data.data;
+      let tags = response.data.included.filter(i => i.type === "tags")
+      tags.forEach(t => {
+        t.attributes.id = t.id;
+        t.attributes.video_ids = t.relationships.videos.data.map(v => v.id);
+      });
       videos.forEach(v => {
         v.attributes.id = v.id;
+        v.attributes.tag_ids = v.relationships.tags.data.map(t => t.id);
       });
 
       commit('SET_VIDEOS', videos.map(v => v.attributes));
+      commit('SET_TAGS', tags.map(t => t.attributes));
     }
   },
   modules: {}