From ae2d101be1e0212dc388d248f85348c3286da55f Mon Sep 17 00:00:00 2001
From: Bouzidi Wassini <wassini.bouzidi@epitech.eu>
Date: Sun, 30 Jul 2023 23:51:30 +0200
Subject: [PATCH] add delete movie in playlist

---
 client/src/components/Card.jsx       | 44 ++++++++++++++++++++-
 client/src/pages/private/Account.jsx |  4 +-
 server/controllers/private.js        | 58 ++++++++++++++++++++++++++++
 server/routes/private.js             |  4 ++
 4 files changed, 106 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Card.jsx b/client/src/components/Card.jsx
index 49686c3..18ec056 100644
--- a/client/src/components/Card.jsx
+++ b/client/src/components/Card.jsx
@@ -1,8 +1,36 @@
 import React from "react";
+import axios from "axios";
 
 const API_IMG = "https://image.tmdb.org/t/p/w500/";
 
-const MovieCard = ({ movies }) => {
+const MovieCard = ({ movies, canDelete = false, playlistName = "" }) => {
+  const handleDelete = async (e, movieId, playlistName) => {
+    e.preventDefault();
+
+    const config = {
+      headers: {
+        "Content-Type": "application/json",
+        authorization: `Bearer ${localStorage.getItem("authToken")}`,
+      },
+    };
+
+    const body = {
+      playlistName,
+      movieId,
+    };
+
+    try {
+      const { data } = await axios.put(
+        `${global.API_ENDPOINT}/api/private/playlists/delete-movie`,
+        body,
+        config
+      );
+      window.location.reload();
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
       {movies &&
@@ -12,6 +40,14 @@ const MovieCard = ({ movies }) => {
             key={movie.movieId}
             className="border rounded-lg overflow-hidden shadow-md"
           >
+            {canDelete && (
+              <div
+                className="bg-red-600 text-white text-center p-1 cursor-pointer"
+                onClick={(e) => handleDelete(e, movie.movieId, playlistName)}
+              >
+                Supprimer
+              </div>
+            )}
             <img
               src={API_IMG + movie.poster_path}
               alt={movie.title}
@@ -38,7 +74,11 @@ const PlaylistCard = ({ playlists }) => {
           <h2 className="text-xl font-semibold p-4">{playlist.name}</h2>
           {playlist.movies && playlist.movies.length > 0 ? (
             <div key={playlist.name} className="p-4">
-              <MovieCard movies={playlist.movies} />
+              <MovieCard
+                movies={playlist.movies}
+                canDelete
+                playlistName={playlist.name}
+              />
             </div>
           ) : (
             <div className="col-span-full text-center text-gray-600">
diff --git a/client/src/pages/private/Account.jsx b/client/src/pages/private/Account.jsx
index 0075100..8d8d086 100644
--- a/client/src/pages/private/Account.jsx
+++ b/client/src/pages/private/Account.jsx
@@ -43,7 +43,7 @@ const CreatePlaylist = () => {
           config
         );
         setName("");
-        console.log(data);
+        window.location.reload();
       } catch (error) {
         console.log(error);
       }
@@ -57,7 +57,7 @@ const CreatePlaylist = () => {
         config
       );
       setName("");
-      console.log(data);
+      window.location.reload();
     } catch (error) {
       console.log(error);
     }
diff --git a/server/controllers/private.js b/server/controllers/private.js
index ba33884..672fb6a 100644
--- a/server/controllers/private.js
+++ b/server/controllers/private.js
@@ -259,3 +259,61 @@ exports.addMovieToPlaylist = async (req, res, next) => {
     });
   }
 };
+
+exports.deleteMovieFromPlaylist = async (req, res, next) => {
+  const { playlistName, movieId } = req.body;
+
+  const authToken = getAuthToken(req);
+
+  try {
+    if (!authToken) {
+      return res.status(401).json({
+        message:
+          "Accès non autorisé. Veuillez fournir un jeton d'authentification.",
+      });
+    }
+
+    const decoded = jwt.verify(authToken, process.env.JWT_SECRET);
+    const foundUser = await User.findById(decoded.userId);
+
+    if (!foundUser) {
+      return res.status(404).json({ message: "Utilisateur non trouvé" });
+    }
+
+    const existingPlaylistIndex = foundUser.playlists.findIndex(
+      (playlist) => playlist.name === playlistName
+    );
+
+    if (existingPlaylistIndex === -1) {
+      return res.status(400).json({
+        message: "Une playlist avec ce nom n'existe pas",
+      });
+    }
+
+    const existingMovieIndex = foundUser.playlists[
+      existingPlaylistIndex
+    ].movies.findIndex((movie) => movie.movieId === movieId);
+
+    if (existingMovieIndex === -1) {
+      return res.status(400).json({
+        message: "Ce film n'est pas dans la playlist",
+      });
+    }
+
+    foundUser.playlists[existingPlaylistIndex].movies.splice(
+      existingMovieIndex,
+      1
+    );
+    await foundUser.save();
+
+    return res.status(200).json({
+      message: "ID de film supprimé avec succès de la playlist",
+    });
+  } catch (err) {
+    console.error(err);
+    return res.status(500).json({
+      message:
+        "Une erreur est survenue lors de la suppression du film de la playlist",
+    });
+  }
+};
diff --git a/server/routes/private.js b/server/routes/private.js
index d14dbf4..e71ca6a 100644
--- a/server/routes/private.js
+++ b/server/routes/private.js
@@ -7,6 +7,7 @@ const {
   playlists,
   deletePlaylist,
   addMovieToPlaylist,
+  deleteMovieFromPlaylist,
 } = require("../controllers/private");
 const { protect } = require("../middleware/auth");
 
@@ -16,5 +17,8 @@ router.route("/private/alreadySeen").put(protect, addAlreadySeen);
 router.route("/private/playlists").put(protect, playlists);
 router.route("/private/playlists/:name").delete(protect, deletePlaylist);
 router.route("/private/playlists/add-movie").put(protect, addMovieToPlaylist);
+router
+  .route("/private/playlists/delete-movie")
+  .put(protect, deleteMovieFromPlaylist);
 
 module.exports = router;