N2w buttons

src/components/buttons/N2wFollowButton.vue

@@ -0,0 +1,46 @@
+<template>
+  <v-btn
+    v-on:click="followMovie"
+    v-if="!this.movie.following"
+    class="primary secondary--text"
+  >FOLLOW</v-btn>
+  <v-btn v-on:click="unfollowMovie" v-else class="primary secondary--text">FOLLOWING</v-btn>
+</template>
+<script>
+import axios from 'axios';
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'N2wFollowButton',
+  computed: {
+    ...mapGetters({
+      loggedUser: 'loggedUser/loggedUser',
+      movie: 'currentMovie/currentMovie',
+    }),
+  },
+  methods: {
+    followMovie() {
+      const previousThis = this;
+      axios
+        .post('http://127.0.0.1:5000/movies/follow', {
+          user_id: previousThis.loggedUser.userId,
+          movie_id: previousThis.movie.movie_id,
+        })
+        .then(function () {
+          previousThis.$store.dispatch('currentMovie/followMovie');
+        });
+    },
+    unfollowMovie() {
+      const previousThis = this;
+      axios
+        .post('http://127.0.0.1:5000/movies/unfollow', {
+          user_id: previousThis.loggedUser.userId,
+          movie_id: previousThis.movie.movie_id,
+        })
+        .then(function () {
+          previousThis.$store.dispatch('currentMovie/followMovie');
+        });
+    },
+  },
+};
+</script>

src/components/buttons/N2wWatchButton.vue

@@ -0,0 +1,46 @@
+<template>
+  <v-btn v-on:click="watchMovie" v-if="!this.movie.watched" color="n2wblue">
+    <v-icon>mdi-eye</v-icon>
+  </v-btn>
+  <v-btn v-on:click="unwatchMovie" v-else color="n2wblue">
+    <v-icon>mdi-eye-off</v-icon>
+  </v-btn>
+</template>
+<script>
+import axios from 'axios';
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'N2wWatchButton',
+  computed: {
+    ...mapGetters({
+      loggedUser: 'loggedUser/loggedUser',
+      movie: 'currentMovie/currentMovie',
+    }),
+  },
+  methods: {
+    watchMovie() {
+      const previousThis = this;
+      axios
+        .post('http://127.0.0.1:5000/movies/watch', {
+          user_id: previousThis.loggedUser.userId,
+          movie_id: previousThis.movie.movie_id,
+        })
+        .then(function () {
+          previousThis.$store.dispatch('currentMovie/watchMovie');
+        });
+    },
+    unwatchMovie() {
+      const previousThis = this;
+      axios
+        .post('http://127.0.0.1:5000/movies/unwatch', {
+          user_id: previousThis.loggedUser.userId,
+          movie_id: previousThis.movie.movie_id,
+        })
+        .then(function () {
+          previousThis.$store.dispatch('currentMovie/watchMovie');
+        });
+    },
+  },
+};
+</script>

src/components/moviesView/N2wMovieCard.vue

@@ -19,27 +19,19 @@
         </v-card-subtitle>
         <v-card-text class="headline mb-10">{{this.movie.overview}}</v-card-text>
         <v-card-actions v-if="this.loggedUser.userId" class="movieCardActions">
-          <v-btn
-            v-on:click="followMovie"
-            v-if="!this.movie.following"
-            class="primary secondary--text"
-          >FOLLOW</v-btn>
-          <v-btn v-on:click="unfollowMovie" v-else class="primary secondary--text">FOLLOWING</v-btn>
-          <v-btn v-on:click="watchMovie" v-if="!this.movie.watched" color="n2wblue">
-            <v-icon>mdi-eye</v-icon>
-          </v-btn>
-          <v-btn v-on:click="unwatchMovie" v-else color="n2wblue">
-            <v-icon>mdi-eye-off</v-icon>
-          </v-btn>
+          <n2w-follow-button />
+          <n2w-watch-button />
         </v-card-actions>
       </v-col>
     </v-row>
   </v-card>
 </template>
 <script>
-import axios from 'axios';
 import { mapGetters } from 'vuex';
 
+import N2wFollowButton from '../buttons/N2wFollowButton.vue';
+import N2wWatchButton from '../buttons/N2wWatchButton.vue';
+
 export default {
   name: 'N2wMovieCard',
   computed: {
@@ -57,51 +49,9 @@ export default {
     },
   },
 
-  methods: {
-    followMovie() {
-      const previousThis = this;
-      axios
-        .post('http://127.0.0.1:5000/movies/follow', {
-          user_id: previousThis.loggedUser.userId,
-          movie_id: previousThis.movie.movie_id,
-        })
-        .then(function () {
-          previousThis.$store.dispatch('currentMovie/followMovie');
-        });
-    },
-    watchMovie() {
-      const previousThis = this;
-      axios
-        .post('http://127.0.0.1:5000/movies/watch', {
-          user_id: previousThis.loggedUser.userId,
-          movie_id: previousThis.movie.movie_id,
-        })
-        .then(function () {
-          previousThis.$store.dispatch('currentMovie/watchMovie');
-        });
-    },
-    unfollowMovie() {
-      const previousThis = this;
-      axios
-        .post('http://127.0.0.1:5000/movies/unfollow', {
-          user_id: previousThis.loggedUser.userId,
-          movie_id: previousThis.movie.movie_id,
-        })
-        .then(function () {
-          previousThis.$store.dispatch('currentMovie/followMovie');
-        });
-    },
-    unwatchMovie() {
-      const previousThis = this;
-      axios
-        .post('http://127.0.0.1:5000/movies/unwatch', {
-          user_id: previousThis.loggedUser.userId,
-          movie_id: previousThis.movie.movie_id,
-        })
-        .then(function () {
-          previousThis.$store.dispatch('currentMovie/watchMovie');
-        });
-    },
+  components: {
+    N2wFollowButton,
+    N2wWatchButton,
   },
 };
 </script>

src/components/tvSeriesView/N2wEpisodeInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="secondary" fill-height>
+  <v-container data-testid="episode-info" class="secondary" fill-height>
     <v-row class="fill-height">
       <v-col>
         <v-card-title>{{this.title}}</v-card-title>

src/components/tvSeriesView/N2wEpisodesList.stories.js

@@ -6,12 +6,24 @@ export default {
   excludeStories: /.*Data$/,
 };
 
-const N2wEpisodesListTemplate = `<N2wEpisodesList />`;
+export const episodes = [
+  { title: 'Rose', seen: true },
+  { title: 'The End of the world', seen: true },
+  { title: 'The Unquiet Dead', seen: true },
+  { title: 'Aliens on London', seen: true },
+  { title: 'World War Three', seen: false },
+  { title: 'Dalek', seen: false },
+  { title: 'The Long Game', seen: false },
+];
+
+const N2wEpisodesListTemplate = `<N2wEpisodesList :episodes=episodes></N2wEpisodesList>`;
 
 // default task state
 export const Default = () => ({
   components: { N2wEpisodesList },
   template: N2wEpisodesListTemplate,
-  props: {},
+  props: {
+    episodes: Array,
+  },
   methods: {},
 });

src/components/tvSeriesView/N2wEpisodesList.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-container class="secondary" fill-height fluid>
+  <v-container data-testid="episodes-list" class="secondary" fill-height fluid>
     <v-row align="center">
       <v-col>
         <p class="font-weight-black">Episodes</p>
@@ -13,16 +13,20 @@
     </v-row>
     <v-col cols="12">
       <v-list color="transparent">
-        <v-list-item v-for="(item, index) in episodes" :key="item.title" @click="{}">
+        <v-list-item
+          v-for="(item, index) in episodes"
+          :key="item.title"
+          @click="updateSelectedEpisode(index)"
+        >
           <v-list-item-content>
-            <v-list-item-title>{{index}}. {{item.title}}</v-list-item-title>
+            <v-list-item-title>{{ index }}. {{ item.title }}</v-list-item-title>
           </v-list-item-content>
 
           <v-list-item-action>
-            <v-btn v-if="item.seen" icon>
+            <v-btn v-on:click="watchEpisode" v-if="item.seen" icon>
               <v-icon>mdi-eye</v-icon>
             </v-btn>
-            <v-btn v-if="!item.seen" icon>
+            <v-btn v-on:click="unwatchEpisode" v-if="!item.seen" icon>
               <v-icon>mdi-eye-off</v-icon>
             </v-btn>
           </v-list-item-action>
@@ -33,42 +37,49 @@
 </template>
 
 <script>
+//import axios from 'axios';
+
 export default {
   name: 'N2wEpisodesList',
-  data: () => ({
-    episodes: [
-      {
-        title: 'Rose',
-        seen: true,
-      },
-      {
-        title: 'The End of the world',
-        seen: true,
-      },
-      {
-        title: 'The Unquiet Dead',
-        seen: true,
-      },
-      {
-        title: 'Aliens on London',
-        seen: true,
-      },
-      {
-        title: 'World War Three',
-        seen: false,
-      },
-      {
-        title: 'Dalek',
-        seen: false,
-      },
-      {
-        title: 'The Long Game',
-        seen: false,
-      },
-    ],
-  }),
-  methods: {},
+  props: {
+    episodes: {
+      type: Array,
+      required: true,
+    },
+  },
+  methods: {
+    watchEpisode() {
+      /* Back part isn't ready
+
+      const previousThis = this;
+      axios
+        .post('http://127.0.0.1:5000/tvseries/watch', {
+          user_id: previousThis.loggedUser.userId,
+          tvSerie_id: previousThis.serie.serie_id,
+        })
+        .then(function () {
+          previousThis.$store.dispatch('currentTvSerie/watchTvSerie');
+        });
+      */
+    },
+    unwatchEpisode() {
+      /* Back part isn't ready
+
+      const previousThis = this;
+      axios
+        .post('http://127.0.0.1:5000/tvseries/unwatch', {
+          user_id: previousThis.loggedUser.userId,
+          tvSerie_id: previousThis.serie.serie_id,
+        })
+        .then(function () {
+          previousThis.$store.dispatch('currentTvSerie/watchTvSerie');
+        });
+      */
+    },
+    updateSelectedEpisode(episode) {
+      this.$emit('clickedEpisode', episode);
+    },
+  },
 };
 </script>
-<style scoped>
-</style>
+<style scoped></style>

src/components/tvSeriesView/N2wSeasonsList.stories.js

@@ -6,7 +6,7 @@ export default {
   excludeStories: /.*Data$/,
 };
 
-const N2wSeasonsListTemplate = `<N2wSeasonsList seasons=14></N2wSeasonsList>`;
+const N2wSeasonsListTemplate = `<N2wSeasonsList :seasons=14></N2wSeasonsList>`;
 
 // default task state
 export const Default = () => ({