Merge branch 'movie-page' into 'master'

Movie page

See merge request !8

backend/routes/genres.js

+const express = require("express");
+const GenreModel = require("../models/genre");
+const router = express.Router();
+
+module.exports = router;
+
+// router.get("/popular/:number", async function (req, res) {
+//   try {
+//     const filmNumber = await req.params["number"];
+//     const getGenres = await GenreModel.find({})
+//       .sort({ popularity: "desc" })
+//       .limit(filmNumber);
+//     res.send(getGenres);
+//   } catch (error) {
+//     console.log(error);
+//   }
+// });
+
+router.get("/genre/id/:id", async function (req, res) {
+  try {
+    const genreId = await req.params["id"];
+    const getGenres = await GenreModel.findOne({ id: genreId });
+    res.send(getGenres.name);
+  } catch (error) {
+    console.log(error);
+  }
+});
+
+// router.post("/new", async function (req, res) {
+//   try {
+//     const newGenre = new GenreModel({
+//       // Genre attributes
+//       publisher: req.body.publisher,
+//       title: req.body.title,
+//       date: req.body.date,
+//       imageURL: req.body.imageURL,
+//       viewers: req.body.viewers,
+//     });
+
+//     // Create a new genre instance
+//     const createdGenre = await newGenre.save();
+
+//     // What to do after genre has been saved !
+//     console.log("Genre Saved");
+//     res.send(createdGenre);
+//   } catch (error) {
+//     console.log(error);
+//   }
+// });
+
+// router.put("/id/:id", async function (req, res) {
+//   try {
+//     const genreId = await req.params["id"];
+//     await GenreModel.findByIdAndUpdate(genreId, {
+//       publisher: req.body.publisher,
+//       title: req.body.title,
+//       date: req.body.date,
+//       imageURL: req.body.imageURL,
+//       viewers: req.body.viewers,
+//     });
+//     res.send("Done");
+//   } catch (error) {
+//     console.log(error);
+//     res.send("Invalid Id");
+//   }
+// });

backend/routes/movies.js

+const express = require("express");
+const MovieModel = require("../models/movie");
+const router = express.Router();
+
+module.exports = router;
+
+// router.get("/popular/:number", async function (req, res) {
+//   try {
+//     const filmNumber = await req.params["number"];
+//     const getMovies = await MovieModel.find({})
+//       .sort({ popularity: "desc" })
+//       .limit(filmNumber);
+//     res.send(getMovies);
+//   } catch (error) {
+//     console.log(error);
+//   }
+// });
+
+router.get("/movie/id/:id", async function (req, res) {
+  try {
+    const movieId = await req.params["id"];
+    const getMovies = await MovieModel.findOne({ id: movieId });
+    res.send(getMovies);
+  } catch (error) {
+    console.log(error);
+  }
+});
+
+// router.post("/new", async function (req, res) {
+//   try {
+//     const newMovie = new MovieModel({
+//       // Movie attributes
+//       publisher: req.body.publisher,
+//       title: req.body.title,
+//       date: req.body.date,
+//       imageURL: req.body.imageURL,
+//       viewers: req.body.viewers,
+//     });
+
+//     // Create a new movie instance
+//     const createdMovie = await newMovie.save();
+
+//     // What to do after movie has been saved !
+//     console.log("Movie Saved");
+//     res.send(createdMovie);
+//   } catch (error) {
+//     console.log(error);
+//   }
+// });
+
+// router.put("/id/:id", async function (req, res) {
+//   try {
+//     const movieId = await req.params["id"];
+//     await MovieModel.findByIdAndUpdate(movieId, {
+//       publisher: req.body.publisher,
+//       title: req.body.title,
+//       date: req.body.date,
+//       imageURL: req.body.imageURL,
+//       viewers: req.body.viewers,
+//     });
+//     res.send("Done");
+//   } catch (error) {
+//     console.log(error);
+//     res.send("Invalid Id");
+//   }
+// });

backend/server.js

@@ -4,6 +4,8 @@ const cors = require("cors");
 const mongoose = require("mongoose");
 const indexRouter = require("./routes/index");
 const usersRouter = require("./routes/users");
+const moviesRouter = require("./routes/movies");
+const genresRouter = require("./routes/genres");
 const routeNotFoundJsonHandler = require("./services/routeNotFoundJsonHandler");
 const jsonErrorHandler = require("./services/jsonErrorHandler");
 
@@ -20,6 +22,9 @@ app.use(express.urlencoded({ extended: false }));
 app.use("/", indexRouter);
 app.use("/users", usersRouter);
 
+app.use("/movies", moviesRouter);
+app.use("/genres", genresRouter);
+
 // Register 404 middleware and error handler
 app.use(routeNotFoundJsonHandler); // this middleware must be registered after all routes to handle 404 correctly
 app.use(jsonErrorHandler); // this error handler must be registered after all middlewares to catch all errors

frontend/src/components/Movie.vue

 <template>
-  <table>
-    <thead>
-      <th>Titre</th>
-      <th>Date de sortie</th>
-      <th>Image</th>
-    </thead>
-    <tbody>
-      <tr v-for="movie in movies" :key="movie.id">
-        <td>{{ movie.title }}</td>
-        <td>{{ movie.release_date }}</td>
-        <td> <img :src= "'https://image.tmdb.org/t/p/original/' + movie.poster_path" /> </td>
-      </tr>
-    </tbody>
-  </table>
+  <div class="child">
+    <img
+      class="movieImage"
+      :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
+    />
+    <h2>{{ movie.title }}</h2>
+    <h3>{{ movie.release_date }}</h3>
+  </div>
 </template>
 
 <script>
 export default {
   props: {
-    movies: Array,
+    movie: Array,
   },
 };
 </script>
 
 <style scoped>
+.movieImage {
+  width: 50%;
+}
+.child {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+th,
+td {
+  border: 1px solid #000000;
+  padding: 10px;
+}
 </style>

frontend/src/components/MovieInfos.vue

+<template>
+  <div class="parent">
+    <div class="child">
+      <h1>{{ movieTitle }}</h1>
+      <div class="mark">
+        <h2>{{ movieVoteAverage * 0.5 }} ★</h2>
+      </div>
+    </div>
+    <h4>Genres : {{ genreArray.join(", ") }}</h4>
+    <h4>{{ movieOverview }}</h4>
+    <div class="like_button" v-on:click="handleLike">
+      <h2>{{ liking }}</h2>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+const backendURL = process.env.VUE_APP_BACKEND_BASE_URL;
+
+export default {
+  data: function () {
+    return {
+      genreArray: [],
+      liking: "Unlike",
+      userId: "toto",
+    };
+  },
+  props: {
+    movieId: Number,
+    movieTitle: String,
+    movieDate: String,
+    movieGenres: Array,
+    movieOverview: String,
+    movieVoteAverage: Number,
+  },
+  methods: {
+    developGenre: async function (genreId) {
+      try {
+        const response = await axios
+          .get(backendURL + "/genres/genre/id/" + genreId)
+          .then();
+        return response.data;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    developGenres: function (genreIdArray) {
+      try {
+        const genreArray = genreIdArray.map(this.developGenre);
+        return Promise.all(genreArray);
+      } catch (error) {
+        console.log("e");
+        console.log(error);
+      }
+    },
+    handleLike: async function () {
+      console.log("clic");
+      await axios.put(backendURL + "/users/like/", {
+        userId: this.userId,
+        movieId: this.movieId,
+      });
+    },
+  },
+  created() {
+    this.developGenres(this.movieGenres).then((results) => {
+      this.genreArray = results;
+    });
+    this.userId = this.$route.query.uid;
+    console.log(this.userId);
+  },
+};
+</script>
+
+<style scoped>
+.parent {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.child {
+  display: flex;
+  justify-content: flex-start;
+}
+.mark {
+  text-align: center;
+  vertical-align: center;
+  width: 10%;
+  height: auto;
+  background-color: #912f56;
+  border-radius: 25%;
+  margin-left: auto;
+}
+.like_button {
+  text-align: center;
+  vertical-align: center;
+  background-color: #912f56;
+  border-radius: 2%;
+  width: 90%;
+  margin-top: auto;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: auto;
+  cursor: pointer;
+}
+</style>

frontend/src/components/MoviePoster.vue

+<template>
+  <div class="posterParent">
+    <img
+      class="poster"
+      :src="'https://image.tmdb.org/t/p/original/' + posterPath"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    posterPath: String,
+  },
+};
+</script>
+
+<style scoped>
+.poster {
+  height: 100%;
+}
+.posterParent {
+  display: flex;
+  margin-left: auto;
+  margin-right: auto;
+  justify-content: center;
+}
+</style>

frontend/src/global.css

 body {
   margin: 0;
-  background-color: #EAF2EF;
+  background-color: #eaf2ef;
 }
 
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
+  height: 100vh;
+  overflow-y: auto;
 }

frontend/src/router/index.js

@@ -3,6 +3,7 @@ import Home from "../views/Home.vue";
 import Counter from "../views/Counter.vue";
 import Users from "../views/Users.vue";
 import About from "../views/About.vue";
+import MoviePage from "../views/MoviePage";
 
 const routes = [
   {
@@ -25,6 +26,11 @@ const routes = [
     name: "About",
     component: About,
   },
+  {
+    path: "/movie/:id",
+    name: "MoviePage",
+    component: MoviePage,
+  },
 ];
 
 const router = createRouter({

frontend/src/views/MoviePage.vue

+<template>
+  <div class="home">
+    <div class="parent">
+      <MoviePoster class="child" :posterPath="moviesInfos.poster_path" />
+      <MovieInfos
+        class="child"
+        :movieId="moviesInfos.id"
+        :movieTitle="moviesInfos.title"
+        :movieDate="moviesInfos.release_date"
+        :movieGenres="moviesInfos.genre_ids"
+        :movieOverview="moviesInfos.overview"
+        :movieVoteAverage="moviesInfos.vote_average"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import MoviePoster from "@/components/MoviePoster.vue";
+import MovieInfos from "@/components/MovieInfos.vue";
+const backendURL = process.env.VUE_APP_BACKEND_BASE_URL;
+
+export default {
+  name: "Home",
+  components: {
+    MoviePoster,
+    MovieInfos,
+  },
+  data: function () {
+    return {
+      movieId: "",
+      moviesInfos: {},
+    };
+  },
+  methods: {
+    fetchMovie: async function () {
+      try {
+        // Do something if call succeeded
+        const response = await axios.get(
+          backendURL + "/movies/movie/id/" + this.movieId
+        );
+        console.log("ok");
+        console.log(response.data);
+        await (this.moviesInfos = response.data);
+        console.log("yo");
+        console.log(this.moviesInfos);
+      } catch (error) {
+        // Do something if call failed
+        this.usersLoadingError = "An error occured while fetching movies.";
+        console.error(error);
+      }
+    },
+  },
+  created() {
+    console.log("ok");
+    this.movieId = this.$route.params.id;
+    console.log(this.movieId);
+    this.fetchMovie();
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.home {
+  height: 100%;
+  vertical-align: middle;
+  display: inline;
+}
+.parent {
+  vertical-align: middle;
+  display: flex;
+  height: 90%;
+  margin-top: 3%;
+  margin-bottom: 3%;
+}
+.child {
+  width: 45%;
+  margin-left: auto;
+  margin-right: auto;
+}
+</style>