feat: Option on item's page to add/remove from watchlist (#781)

* feat: adds button on the page of a media item to add or remove it from a user's watchlist

re #730

* fix: whitespace and i18n key

* style: fix code format to the required standards

* refactor: change axios for the fetch api

---------

Co-authored-by: JoaquinOlivero <joaquin.olivero@hotmail.com>

server/models/Movie.ts

@@ -85,6 +85,7 @@ export interface MovieDetails {
   mediaUrl?: string;
   watchProviders?: WatchProviders[];
   keywords: Keyword[];
+  onUserWatchlist?: boolean;
 }
 
 export const mapProductionCompany = (
@@ -101,7 +102,8 @@ export const mapProductionCompany = (
 
 export const mapMovieDetails = (
   movie: TmdbMovieDetails,
-  media?: Media
+  media?: Media,
+  userWatchlist?: boolean
 ): MovieDetails => ({
   id: movie.id,
   adult: movie.adult,
@@ -148,4 +150,5 @@ export const mapMovieDetails = (
     id: keyword.id,
     name: keyword.name,
   })),
+  onUserWatchlist: userWatchlist,
 });

server/models/Tv.ts

@@ -111,6 +111,7 @@ export interface TvDetails {
   keywords: Keyword[];
   mediaInfo?: Media;
   watchProviders?: WatchProviders[];
+  onUserWatchlist?: boolean;
 }
 
 const mapEpisodeResult = (episode: TmdbTvEpisodeResult): Episode => ({
@@ -161,7 +162,8 @@ export const mapNetwork = (network: TmdbNetwork): TvNetwork => ({
 
 export const mapTvDetails = (
   show: TmdbTvDetails,
-  media?: Media
+  media?: Media,
+  userWatchlist?: boolean
 ): TvDetails => ({
   createdBy: show.created_by,
   episodeRunTime: show.episode_run_time,
@@ -223,4 +225,5 @@ export const mapTvDetails = (
   })),
   mediaInfo: media,
   watchProviders: mapWatchProviders(show['watch/providers']?.results ?? {}),
+  onUserWatchlist: userWatchlist,
 });

server/routes/movie.ts

@@ -3,7 +3,9 @@ import RottenTomatoes from '@server/api/rating/rottentomatoes';
 import { type RatingResponse } from '@server/api/ratings';
 import TheMovieDb from '@server/api/themoviedb';
 import { MediaType } from '@server/constants/media';
+import { getRepository } from '@server/datasource';
 import Media from '@server/entity/Media';
+import { Watchlist } from '@server/entity/Watchlist';
 import logger from '@server/logger';
 import { mapMovieDetails } from '@server/models/Movie';
 import { mapMovieResult } from '@server/models/Search';
@@ -22,7 +24,18 @@ movieRoutes.get('/:id', async (req, res, next) => {
 
     const media = await Media.getMedia(tmdbMovie.id, MediaType.MOVIE);
 
-    return res.status(200).json(mapMovieDetails(tmdbMovie, media));
+    const onUserWatchlist = await getRepository(Watchlist).exist({
+      where: {
+        tmdbId: Number(req.params.id),
+        requestedBy: {
+          id: req.user?.id,
+        },
+      },
+    });
+
+    return res
+      .status(200)
+      .json(mapMovieDetails(tmdbMovie, media, onUserWatchlist));
   } catch (e) {
     logger.debug('Something went wrong retrieving movie', {
       label: 'API',

server/routes/tv.ts

@@ -1,7 +1,9 @@
 import RottenTomatoes from '@server/api/rating/rottentomatoes';
 import TheMovieDb from '@server/api/themoviedb';
 import { MediaType } from '@server/constants/media';
+import { getRepository } from '@server/datasource';
 import Media from '@server/entity/Media';
+import { Watchlist } from '@server/entity/Watchlist';
 import logger from '@server/logger';
 import { mapTvResult } from '@server/models/Search';
 import { mapSeasonWithEpisodes, mapTvDetails } from '@server/models/Tv';
@@ -19,7 +21,16 @@ tvRoutes.get('/:id', async (req, res, next) => {
 
     const media = await Media.getMedia(tv.id, MediaType.TV);
 
-    return res.status(200).json(mapTvDetails(tv, media));
+    const onUserWatchlist = await getRepository(Watchlist).exist({
+      where: {
+        tmdbId: Number(req.params.id),
+        requestedBy: {
+          id: req.user?.id,
+        },
+      },
+    });
+
+    return res.status(200).json(mapTvDetails(tv, media, onUserWatchlist));
   } catch (e) {
     logger.debug('Something went wrong retrieving series', {
       label: 'API',