ajout upload

backend/database/schema.sql

@@ -12,12 +12,12 @@ DROP TABLE IF EXISTS `Film`;
 CREATE TABLE
     `Film` (
         `id` INT PRIMARY KEY AUTO_INCREMENT NOT NULL,
-        `miniature_url` VARCHAR(255) NOT NULL,
+        `miniature_url` VARCHAR(255),
         `miniature_filename` VARCHAR(255),
-        `cover_url` VARCHAR(255) NOT NULL,
+        `cover_url` VARCHAR(255),
         `cover_filename` VARCHAR(255),
         `title` VARCHAR(255) NOT NULL,
-        `videoUrl` VARCHAR(255),
+        `videoUrl` VARCHAR(255) NOT NULL,
         `duration` INT NOT NULL,
         `year` VARCHAR(4) NOT NULL,
         `description` VARCHAR(700) NOT NULL,

backend/src/controllers/filmControllers.js

@@ -42,8 +42,8 @@ const add = async (req, res, next) => {
   if (req.body.images.length === 2) {
     const miniature = req.body.images[0];
     const cover = req.body.images[1];
-    req.body.urlImage = miniature;
-    req.body.cover = cover;
+    req.body.miniature_filename = miniature;
+    req.body.cover_filename = cover;
   } else {
     res.status(403).send({ message: "Fichier manquant" });
   }

backend/src/models/CategorieParFilmManager.js

@@ -10,14 +10,15 @@ class CategorieParFilmManager extends AbstractManager {
   // The C of CRUD - Create operation
   async create({ filmId, categoriesIds }) {
     // prepa querySQLString et array de dependances
-    let querySQL = `insert into ${this.table} (filmId, categorieId) values`;
+    let querySQL = `insert into ${this.table} (filmId, categorieId, unique_key) values`;
     const arrDep = [];
 
     categoriesIds.forEach((catId, index) => {
-      if (index === 0) querySQL += " (?, ?)";
-      else querySQL += ", (?, ?)";
+      const unique_key = `${filmId}-${catId}`;
+      if (index === 0) querySQL += " (?, ?, ?)";
+      else querySQL += ", (?, ?, ?)";
 
-      arrDep.push(filmId, catId);
+      arrDep.push(filmId, catId, unique_key);
     });
     // console.log("querySQL =>", querySQL);
     // console.log("arrDep =>", arrDep);

backend/src/models/FilmManager.js

@@ -6,9 +6,7 @@ class FilmManager extends AbstractManager {
   }
 
   async create({
-    miniature_url,
     miniature_filename,
-    cover_url,
     cover_filename,
     title,
     videoUrl,
@@ -18,11 +16,9 @@ class FilmManager extends AbstractManager {
     isAvailable,
   }) {
     const [result] = await this.database.query(
-      `insert into ${this.table} (miniature_url, miniature_filename, cover_url, cover_filename, title, videoUrl, duration, year, description, isAvailable) values (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+      `insert into ${this.table} (miniature_filename, cover_filename, title, videoUrl, duration, year, description, isAvailable) values (?, ?, ?, ?, ?, ?, ?, ?)`,
       [
-        miniature_url,
         miniature_filename,
-        cover_url,
         cover_filename,
         title,
         videoUrl,

frontend/src/components/FreeMovie.jsx

@@ -1,13 +1,12 @@
 import { useState, useEffect } from "react";
-import { useParams, NavLink, useNavigate, useLocation } from "react-router-dom";
+import { NavLink, useNavigate, useLocation } from "react-router-dom";
 import PropTypes from "prop-types";
 import axios from "axios";
 import CommentsSection from "./CommentsSection";
 import { useUser } from "../contexts/UserContext";
 
 function FreeMovie({ movie }) {
   const navigate = useNavigate();
-  const { movieId } = useParams();
   const { user } = useUser();
   const [isFavorited, setIsFavorited] = useState(false);
   const [isWatchlisted, setIsWatchlisted] = useState(false);
@@ -143,105 +142,107 @@ function FreeMovie({ movie }) {
   }, [user, movie.id]);
 
   return (
-    <div className="movie-page-details" key={parseInt(movieId, 10)}>
-      <div
-        className="movie-information-display"
-        style={
-          location.pathname.includes("/movies/")
-            ? {
-                paddingBottom: "9.375vw",
+    movie && (
+      <div className="movie-page-details" key={movie.id}>
+        <div
+          className="movie-information-display"
+          style={
+            location.pathname.includes("/movies/")
+              ? {
+                  paddingBottom: "9.375vw",
+                }
+              : {}
+          }
+        >
+          <div className="thumbnail-container">
+            <img
+              className="movie-cover"
+              src={
+                (movie.cover_filename &&
+                  `${import.meta.env.VITE_BACKEND_URL}/assets/images/${
+                    movie?.cover_filename
+                  }`) ||
+                movie?.cover_url
               }
-            : {}
-        }
-      >
-        <div className="thumbnail-container">
-          <img
-            className="movie-cover"
-            src={
-              (movie.cover_filename &&
-                `${import.meta.env.VITE_BACKEND_URL}/assets/images/${
-                  movie?.cover_filename
-                }`) ||
-              movie?.cover_url
-            }
-            alt={movie.title}
-          />
-          <div className="upper-layer">
-            <NavLink
-              className="play-button-container"
-              to={`/moviePlayer/${movie.id}`}
-            >
-              <img
-                className="play-button"
-                src="/src/assets/icons/play_button_icon.svg"
-                alt="play button"
-              />
-            </NavLink>
-          </div>
-        </div>
-        <div className="details-option-wrapper">
-          <div className="details-container">
-            <p className="movie-info release-year">{movie.year}</p>
-            <p className="separator">•</p>
-            <p className="movie-info duration">{movie.duration}m</p>
-          </div>
-          {user && (
-            <div className="ActionIcons">
-              <button
-                className="ThumbsUpRegular1"
-                type="button"
-                onClick={() => handleFavoriteClick(movie.id)}
+              alt={movie.title}
+            />
+            <div className="upper-layer">
+              <NavLink
+                className="play-button-container"
+                to={`/moviePlayer/${movie.id}`}
               >
                 <img
-                  className="favourite-icon"
-                  src={
-                    !isFavorited
-                      ? "/src/assets/icons/favourite-icon.svg"
-                      : "/src/assets/icons/thumbs-up-solid.svg"
-                  }
-                  alt="favourite icon"
+                  className="play-button"
+                  src="/src/assets/icons/play_button_icon.svg"
+                  alt="play button"
                 />
-              </button>
-              {user && user.IsAdmin === 1 ? (
+              </NavLink>
+            </div>
+          </div>
+          <div className="details-option-wrapper">
+            <div className="details-container">
+              <p className="movie-info release-year">{movie.year}</p>
+              <p className="separator">•</p>
+              <p className="movie-info duration">{movie.duration}m</p>
+            </div>
+            {user && (
+              <div className="ActionIcons">
                 <button
                   className="ThumbsUpRegular1"
                   type="button"
-                  onClick={handleClick}
+                  onClick={() => handleFavoriteClick(movie.id)}
                 >
                   <img
                     className="favourite-icon"
-                    src="/src/assets/icons/edit.png"
-                    alt="edit icon"
+                    src={
+                      !isFavorited
+                        ? "/src/assets/icons/favourite-icon.svg"
+                        : "/src/assets/icons/thumbs-up-solid.svg"
+                    }
+                    alt="favourite icon"
                   />
                 </button>
-              ) : (
-                ""
-              )}
-              <button
-                className="ThumbsUpRegular1"
-                type="button"
-                onClick={() => handleWatchlistClick(movie.id)}
-              >
-                <img
-                  className="favourite-icon"
-                  src={
-                    !isWatchlisted
-                      ? "/src/assets/icons/watchlist-icon.svg"
-                      : "/src/assets/icons/check-solid.svg"
-                  }
-                  alt="watchlist icon"
-                />
-              </button>
-            </div>
-          )}
-        </div>
-        <div className="description-container">
-          <p className="movie-title">{movie.title}</p>
-          <p className="movie-description">{movie.description}</p>
+                {user && user.IsAdmin === 1 ? (
+                  <button
+                    className="ThumbsUpRegular1"
+                    type="button"
+                    onClick={handleClick}
+                  >
+                    <img
+                      className="favourite-icon"
+                      src="/src/assets/icons/edit.png"
+                      alt="edit icon"
+                    />
+                  </button>
+                ) : (
+                  ""
+                )}
+                <button
+                  className="ThumbsUpRegular1"
+                  type="button"
+                  onClick={() => handleWatchlistClick(movie.id)}
+                >
+                  <img
+                    className="favourite-icon"
+                    src={
+                      !isWatchlisted
+                        ? "/src/assets/icons/watchlist-icon.svg"
+                        : "/src/assets/icons/check-solid.svg"
+                    }
+                    alt="watchlist icon"
+                  />
+                </button>
+              </div>
+            )}
+          </div>
+          <div className="description-container">
+            <p className="movie-title">{movie.title}</p>
+            <p className="movie-description">{movie.description}</p>
+          </div>
+          <CommentsSection filmId={movie.id} user={user} />
         </div>
-        <CommentsSection filmId={movie.id} user={user} />
       </div>
-    </div>
+    )
   );
 }
 

frontend/src/contexts/MovieContext.jsx

@@ -7,7 +7,7 @@ const MovieContext = createContext();
 export function MovieProvider({ children }) {
   const [movies, setMovies] = useState([]);
 
-  useEffect(() => {
+  const fetchMovies = () => {
     axios
       .get(`${import.meta.env.VITE_BACKEND_URL}/api/films`)
       .then((response) => {
@@ -16,9 +16,16 @@ export function MovieProvider({ children }) {
       .catch((error) => {
         console.error(error);
       });
+  };
+
+  useEffect(() => {
+    fetchMovies();
   }, []);
 
-  const value = useMemo(() => ({ movies, setMovies }), [movies, setMovies]);
+  const value = useMemo(
+    () => ({ movies, setMovies, fetchMovies }),
+    [movies, setMovies, fetchMovies]
+  );
 
   return (
     <MovieContext.Provider value={value}>{children}</MovieContext.Provider>

frontend/src/pages/AddVideos.jsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import axios from "axios";
 import toast from "react-hot-toast";
+import { useMovies } from "../contexts/MovieContext";
 
 function AddVideos() {
   const [file, setFile] = useState(undefined);
@@ -15,6 +16,9 @@ function AddVideos() {
   const [isAvailable, setIsAvailable] = useState(false);
   const [categories, setCategories] = useState([]);
   const [categoriesPourAssocier, setCategoriesPourAssocier] = useState([]);
+
+  const { fetchMovies } = useMovies();
+
   const handleAjoutCategorie = (e) => {
     const categoriesFiltered = categories.filter((cat) => {
       if (cat.id === parseInt(e.target.value, 10)) {
@@ -73,7 +77,7 @@ function AddVideos() {
     formData.append("category", JSON.stringify(categoriesPourAssocier));
     formData.append("description", description);
     formData.append("title", title);
-    formData.append("video", videoUrl);
+    formData.append("videoUrl", videoUrl);
     formData.append("year", year);
     formData.append("isAvailable", isAvailable);
     formData.append("duration", duration);
@@ -88,6 +92,8 @@ function AddVideos() {
         headers: { "Content-Type": "multipart/form-data" },
       }
     );
+
+    fetchMovies();
   };
 
   const fetchData = async () => {