videos module

jeffreybiles · Oct 7, 2019 · 2ec7e3b · 2ec7e3b
1 parent c3c17c1
commit 2ec7e3b
Show file tree

Hide file tree

Showing 10 changed files with 78 additions and 54 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -42,7 +42,7 @@ import { mapState } from 'vuex';
 export default {
   name: 'App',
   created(){
-    this.$store.dispatch('loadVideos');
+    this.$store.dispatch('videos/loadAll');
     this.$store.dispatch('loadCurrentUser');
     this.$store.dispatch('tags/loadAll');
   },

diff --git a/src/store/index.js b/src/store/index.js
@@ -3,23 +3,21 @@ import Vuex from "vuex";
 import Api from "@/services/api";
 import snackbarModule from './snackbar';
 import tagsModule from './tags';
+import videosModule from './videos';
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
   modules: {
     snackbar: snackbarModule,
-    tags: tagsModule
+    tags: tagsModule,
+    videos: videosModule
   },
   state: {
-    videos: [],
     users: [],
     currentUser: {}
   },
   mutations: {
-    SET_VIDEOS(state, videos) {
-      state.videos = videos;
-    },
     SET_PLAYED_VIDEOS(state, playedVideos) {
       Vue.set(state.currentUser, 'playedVideos', playedVideos);
     },
@@ -30,18 +28,6 @@ export default new Vuex.Store({
       let playedVideos = state.currentUser.playedVideos.concat(videoId);
       state.currentUser.playedVideos = playedVideos;
     },
-    ADD_VIDEO(state, video) {
-      let videos = state.videos.concat(video);
-      state.videos = videos;
-    },
-    DELETE_VIDEO(state, videoId){
-      let videos = state.videos.filter(v => v.id != videoId)
-      state.videos = videos;
-    },
-    EDIT_VIDEO(state, video) {
-      let v = state.videos.find(v => v.id == video.id)
-      v = video;
-    },
     LOGOUT_USER(state) {
       state.currentUser = {}
       window.localStorage.currentUser = JSON.stringify({});
@@ -52,15 +38,6 @@ export default new Vuex.Store({
     },
   },
   actions: {
-    async loadVideos({commit, dispatch}){
-      let response = await Api().get('/videos');
-      let videos = response.data.data;
-      videos.forEach(v => {
-        v.attributes.tag_ids = v.relationships.tags.data.map(t => t.id);
-      });
-
-      commit('SET_VIDEOS', videos.map(v => v.attributes));
-    },
     async loadUsers({commit}) {
       let response = await Api().get('/users');
       let users = response.data.data;
@@ -84,24 +61,6 @@ export default new Vuex.Store({
         });
       }
     },
-    async createVideo({commit}, video) {
-      let response = await Api().post('/videos', video);
-      let savedVideo = response.data.data.attributes;
-      commit('ADD_VIDEO', savedVideo);
-      return savedVideo;
-    },
-    async deleteVideo({commit}, video) {
-      let response = await Api().delete(`/videos/${video.id}`);
-      if(response.status == 200 || response.status == 204){
-        commit('DELETE_VIDEO', video.id);
-      }
-    },
-    async editVideo({commit}, video) {
-      let response = await Api().put(`/videos/${video.id}`, video);
-      let newVideo = response.data.data.attributes;
-      commit('EDIT_VIDEO', newVideo);
-      return newVideo;
-    },
     logoutUser({commit}) {
       commit('LOGOUT_USER');
     },

diff --git a/src/store/videos.js b/src/store/videos.js
@@ -0,0 +1,54 @@
+import Api from "@/services/api";
+
+export default {
+  namespaced: true,
+  state: {
+    videos: [],
+  },
+  mutations: {
+    SET_VIDEOS(state, videos) {
+      state.videos = videos;
+    },
+    ADD_VIDEO(state, video) {
+      let videos = state.videos.concat(video);
+      state.videos = videos;
+    },
+    DELETE_VIDEO(state, videoId){
+      let videos = state.videos.filter(v => v.id != videoId)
+      state.videos = videos;
+    },
+    EDIT_VIDEO(state, video) {
+      let v = state.videos.find(v => v.id == video.id)
+      v = video;
+    },
+  },
+  actions: {
+    async loadAll({commit, dispatch}){
+      let response = await Api().get('/videos');
+      let videos = response.data.data;
+      videos.forEach(v => {
+        v.attributes.tag_ids = v.relationships.tags.data.map(t => t.id);
+      });
+
+      commit('SET_VIDEOS', videos.map(v => v.attributes));
+    },
+    async create({commit}, video) {
+      let response = await Api().post('/videos', video);
+      let savedVideo = response.data.data.attributes;
+      commit('ADD_VIDEO', savedVideo);
+      return savedVideo;
+    },
+    async delete({commit}, video) {
+      let response = await Api().delete(`/videos/${video.id}`);
+      if(response.status == 200 || response.status == 204){
+        commit('DELETE_VIDEO', video.id);
+      }
+    },
+    async edit({commit}, video) {
+      let response = await Api().put(`/videos/${video.id}`, video);
+      let newVideo = response.data.data.attributes;
+      commit('EDIT_VIDEO', newVideo);
+      return newVideo;
+    },
+  }
+}
diff --git a/src/views/AdminVideoCreate.vue b/src/views/AdminVideoCreate.vue
@@ -28,7 +28,7 @@
     },
     methods: {
       async createVideo() {
-        let video = await this.$store.dispatch('createVideo', this.video);
+        let video = await this.$store.dispatch('videos/create', this.video);
         this.$store.dispatch('snackbar/setSnackbar', {text: `You have successfully created a new video, ${video.name}.`});
         this.$router.push({ name: 'video-watch', params: {id: video.id}});
       }

diff --git a/src/views/AdminVideoEdit.vue b/src/views/AdminVideoEdit.vue
@@ -13,14 +13,16 @@
       VideoEditForm,
     },
     computed: {
-      ...mapState(['videos']),
+      ...mapState({
+        videos: state => state.videos.videos
+      }),
       video(){
         return this.videos.find(v => v.id == this.$route.params.id) || {};
       }
     },
     methods: {
       async saveVideo() {
-        let video = await this.$store.dispatch('editVideo', this.video);
+        let video = await this.$store.dispatch('videos/edit', this.video);
         this.$store.dispatch('snackbar/setSnackbar', {text: `You have successfully edited your video, ${video.name}.`});
         this.$router.push({name: 'admin-video-list'});
       },

diff --git a/src/views/AdminVideoList.vue b/src/views/AdminVideoList.vue
@@ -25,7 +25,9 @@
   import { mapState } from 'vuex';
   export default {
     computed: {
-      ...mapState(['videos'])
+      ...mapState({
+        videos: state => state.videos.videos
+      })
     },
     filters: {
       abbreviate(text) {
@@ -39,7 +41,7 @@
       deleteVideo(video) {
         let response = confirm(`Are you sure you want to delete ${video.name}`)
         if(response){
-          this.$store.dispatch('deleteVideo', video);
+          this.$store.dispatch('videos/delete', video);
           this.$store.dispatch('snackbar/setSnackbar', {text: `You have successfully deleted your video, ${video.name}.`});
         }
       }

diff --git a/src/views/AdminVideoShow.vue b/src/views/AdminVideoShow.vue
@@ -22,7 +22,7 @@
   export default {
     computed: {
       ...mapState({
-        videos: 'videos',
+        videos: state => state.videos.videos,
         tags: state => state.tags.tags
       }),
       ...mapGetters({

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -23,7 +23,9 @@ export default {
   },
   methods: {},
   computed: {
-    ...mapState(['videos']),
+    ...mapState({
+      videos: state => state.videos.videos
+    }),
   }
 };
 </script>

diff --git a/src/views/TagVideoList.vue b/src/views/TagVideoList.vue
@@ -21,7 +21,9 @@ export default {
     VideoListVideo
   },
   computed: {
-    ...mapState(['videos']),
+    ...mapState({
+      videos: state => state.videos.videos
+    }),
     ...mapGetters({
       getTag: 'tags/get'
     }),

diff --git a/src/views/VideoWatch.vue b/src/views/VideoWatch.vue
@@ -48,11 +48,14 @@ export default {
     video(){
       return this.videos.find(vid => vid.id == this.$route.params.id) || {}
     },
-    ...mapState(['videos', 'currentUser']),
     ...mapGetters({
       getTag: 'tags/get',
       isPlayed: 'isPlayed'
     }),
+    ...mapState({
+      videos: state => state.videos.videos,
+      currentUser: 'currentUser'
+    }),
     playerOptions(){
       return {
         language: 'en',