You can now like

backend/routes/users.js

@@ -9,6 +9,18 @@ router.get("/", function (req, res) {
   });
 });
 
+router.get("/isliked/:movieId/:userId", async function (req, res) {
+  const userId = await req.params["userId"];
+  console.log(userId);
+  const movieId = await req.params["movieId"];
+  const user = await UserModel.findById(userId);
+  const movieOid = await MovieModel.findOne({ id: movieId });
+  const likedMovies = user.liked_movies;
+  const myIndex = likedMovies.indexOf(movieOid._id) + 1;
+  console.log(Boolean(myIndex));
+  res.send(Boolean(myIndex));
+});
+
 router.post("/new", function (req, res) {
   const newUser = new UserModel({
     email: req.body.email,
@@ -39,11 +51,22 @@ router.put("/like", async function (req, res) {
     const movieId = await req.body.movieId;
     const movieOid = await MovieModel.findOne({ id: movieId });
     const user = await UserModel.findById(userId);
-    const likedMovies = user.liked_movies.concat([movieOid._id]);
+    const likedMovies = user.liked_movies;
+    const myIndex = likedMovies.indexOf(movieOid._id);
+    if (myIndex == -1) {
+      likedMovies.splice(myIndex, 1);
       await UserModel.findByIdAndUpdate(userId, {
-      liked_movies: likedMovies,
+        liked_movies: likedMovies.concat([movieOid._id]),
       });
+      console.log(movieOid.title);
+      console.log(movieOid._id);
       res.send("Done");
+    } else {
+      console.log(movieOid.title);
+      console.log(movieOid._id);
+      console.log("This movie is already liked");
+      res.send("This movie is already liked");
+    }
   } catch (error) {
     console.log(error);
     res.send("Internal problem");
@@ -64,8 +87,13 @@ router.put("/unlike", async function (req, res) {
         liked_movies: likedMovies,
       });
       res.send("Done");
+      console.log(movieOid.title);
+      console.log(movieOid._id);
     } else {
       res.send("This movie wasn't liked");
+      console.log(movieOid.title);
+      console.log(movieOid._id);
+      console.log("This movie wasn't liked");
     }
   } catch (error) {
     console.log(error);

frontend/src/components/MovieInfos.vue

@@ -22,7 +22,7 @@ export default {
   data: function () {
     return {
       genreArray: [],
-      liking: "Unlike",
+      liking: true,
       userId: "toto",
     };
   },
@@ -55,11 +55,45 @@ export default {
       }
     },
     handleLike: async function () {
+      if (this.liking == "Unlike") {
+        console.log("clic");
+        await axios.put(backendURL + "/users/unlike/", {
+          userId: this.userId,
+          movieId: this.movieId,
+        });
+        this.getLiking().then((results) => {
+          console.log(results);
+          if (results) {
+            this.liking = "Unlike";
+          } else {
+            this.liking = "Like";
+          }
+        });
+      } else {
         console.log("clic");
         await axios.put(backendURL + "/users/like/", {
           userId: this.userId,
           movieId: this.movieId,
         });
+        this.getLiking().then((results) => {
+          console.log(results);
+          if (results) {
+            this.liking = "Unlike";
+          } else {
+            this.liking = "Like";
+          }
+        });
+      }
+    },
+    getLiking: async function () {
+      try {
+        const likingValue = await axios.get(
+          backendURL + "/users/isliked/" + this.movieId + "/" + this.userId
+        );
+        return likingValue.data;
+      } catch (error) {
+        console.log(error);
+      }
     },
   },
   created() {
@@ -67,6 +101,14 @@ export default {
       this.genreArray = results;
     });
     this.userId = this.$route.query.uid;
+    this.getLiking().then((results) => {
+      console.log(results);
+      if (results) {
+        this.liking = "Unlike";
+      } else {
+        this.liking = "Like";
+      }
+    });
     console.log(this.userId);
   },
 };
@@ -85,11 +127,12 @@ export default {
 .mark {
   text-align: center;
   vertical-align: center;
-  width: 10%;
+  width: 15%;
   height: auto;
   background-color: #912f56;
   border-radius: 25%;
   margin-left: auto;
+  color: #eaf2ef;
 }
 .like_button {
   text-align: center;
@@ -102,5 +145,6 @@ export default {
   margin-right: auto;
   margin-bottom: auto;
   cursor: pointer;
+  color: #eaf2ef;
 }
 </style>