Add rating system. Prepare for authentication.

controllers/movies.js

@@ -1,4 +1,5 @@
 const MovieSchema = require('../models/Movie');
+const Rating = require('../models/Rating');
 
 module.exports.controller = (app) => {
   app.get('/movies', (req, res) => {
@@ -15,6 +16,23 @@ module.exports.controller = (app) => {
     });
   });
 
+  app.post('/movies/rate/:id', (req, res) => {
+    const rating = new Rating({
+      movie_id: req.params.id,
+      user_id: req.body.user_id,
+      rate: req.body.rate,
+    });
+
+    rating.save(function (error, rating) {
+      if (error) { console.log(error); }
+      res.send({
+        movie_id: rating.movie_id,
+        user_id: rating.user_id,
+        rate: rating.rate
+      });
+    });
+  });
+
   app.post('/movies', (req, res) => {
     const newMovie = new MovieSchema({
       name: req.body.name,

models/Rating.js

@@ -0,0 +1,10 @@
+const mongoose = require('mongoose');
+const Schema = mongoose.Schema;
+const RatingSchema = new Schema({
+  movie_id: String,
+  user_id: String,
+  rate: Number
+});
+
+const Rating = mongoose.model("Rating", RatingSchema);
+module.exports = Rating;

package.json

@@ -24,6 +24,7 @@
     "morgan": "^1.9.0",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
+    "vue-star-rating": "^1.6.0",
     "vue-swal": "^0.1.0",
     "vuetify": "^1.0.19"
   },

src/components/Movie.vue

@@ -8,7 +8,7 @@
             <span class="grey--text">{{ movie.release_year }} ‧ {{ movie.genre }}</span>
           </div>
         </v-card-title>
-        <h6 class="card-title">Rate this movie</h6>
+        <h6 class="card-title" v-if="current_user" @click="rate">Rate this movie</h6>
         <v-card-text>
           {{ movie.description }}
         </v-card-text>
@@ -19,6 +19,30 @@
 
 <script>
 import axios from 'axios';
+import Vue from 'vue';
+import StarRating from 'vue-star-rating';
+
+const wrapper = document.createElement('div');
+const state = {
+  note: 0,
+};
+
+const RatingComponent = Vue.extend({
+  data() {
+    return { rating: 0 };
+  },
+  watch: {
+    rating(newVal) { state.note = newVal; },
+  },
+  template: `
+    <div class="rating">
+      How was your experience watching this movie?
+      <star-rating v-model="rating" :show-rating="false"></star-rating>
+    </div>`,
+  components: { 'star-rating': StarRating },
+});
+
+const component = new RatingComponent().$mount(wrapper);
 
 export default {
   name: 'Movie',
@@ -31,6 +55,35 @@ export default {
     this.fetchMovie();
   },
   methods: {
+    async rate() {
+      this.$swal({
+        content: component.$el,
+        buttons: {
+          confirm: {
+            value: 0,
+          },
+        },
+      }).then(() => {
+        const movieId = this.$route.params.id;
+        return axios({
+          method: 'post',
+          data: {
+            rate: state.note,
+          },
+          url: `http://localhost:8081/movies/rate/${movieId}`,
+          headers: {
+            'Content-Type': 'application/json',
+          },
+        })
+          .then(() => {
+            this.$swal(`Thank you for rating! ${state.note}`, 'success');
+          })
+          .catch((error) => {
+            const message = error.responses.data.message;
+            this.$swal('Error!', `${message}`, 'error');
+          });
+      });
+    },
     async fetchMovie() {
       return axios({
         method: 'get',

yarn.lock

@@ -7640,6 +7640,10 @@ vue-router@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.1.tgz#d9b05ad9c7420ba0f626d6500d693e60092cc1e9"
 
+vue-star-rating@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/vue-star-rating/-/vue-star-rating-1.6.0.tgz#8586d9d100555fd367df1e3b769669e837089209"
+
 vue-style-loader@^3.0.0, vue-style-loader@^3.0.1:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-3.1.2.tgz#6b66ad34998fc9520c2f1e4d5fa4091641c1597a"