updated API with favorites

Author: mwarger

Diff for: api/src/datasources/movies.ts

@@ -27,6 +27,7 @@ interface Movie {
   cast?: Credit[];
 }
 
+let favoriteMovies: string[] = [];
 class MovieDataSource extends RESTDataSource {
   apiKey: string = '';
   constructor() {
@@ -35,40 +36,73 @@ class MovieDataSource extends RESTDataSource {
     this.apiKey = String(process.env.TMDB_API_KEY);
   }
 
+  // array to save favorite movies
+
   async nowPlaying() {
     const response = await this.get(
       `movie/now_playing?api_key=${this.apiKey}&language=en-US&page=1`,
     );
 
-    return response.results || [];
+    const movies: Movie[] = response.results || [];
+
+    return (
+      movies.map((movie) => ({
+        ...movie,
+        favorite: favoriteMovies.includes(movie.id),
+      })) || []
+    );
   }
 
   async popular() {
     const response = await this.get(
       `movie/popular?api_key=${this.apiKey}&language=en-US&page=1`,
     );
 
-    return response.results || [];
+    const movies: Movie[] = response.results || [];
+
+    return (
+      movies.map((movie) => ({
+        ...movie,
+        favorite: favoriteMovies.includes(movie.id),
+      })) || []
+    );
   }
 
-  async movieById(id: number) {
+  async movieById(id: string) {
     const response = await this.get(
       `movie/${id}?api_key=${this.apiKey}&language=en-US`,
     );
+    const movie: Movie = response;
+
+    movie.favorite = favoriteMovies.includes(id);
 
     return response;
   }
 
-  async getCredits(id: number) {
+  async getCredits(id: string) {
     const response = await this.get(
       `movie/${id}/credits?api_key=${this.apiKey}&language=en-US`,
     );
 
     return response;
   }
 
-  toggleFavorite(id: number) {
-    // implement me
+  async toggleFavorite(id: string) {
+    const movie: Movie = await this.movieById(id);
+    if (favoriteMovies.includes(id)) {
+      console.log('setting favorite to false for id', id);
+      favoriteMovies = favoriteMovies.filter((movieId) => movieId !== id);
+      console.log('this.favorite', favoriteMovies);
+
+      movie.favorite = false;
+    } else {
+      console.log('setting favorite to true for id', id);
+      movie.favorite = true;
+      favoriteMovies.push(id);
+      console.log('this.favorite', favoriteMovies);
+    }
+
+    return movie;
   }
 }
 

Diff for: apollo.config.js

@@ -4,7 +4,7 @@ module.exports = {
       name: 'now playing app',
       url: 'http://localhost:4000/graphql',
     },
-    includes: ['./app/src/**/graphql.ts'], // array of glob patterns
+    includes: ['./app/src/**/graphql.ts', './app/src/**/*.tsx'], // array of glob patterns
     excludes: ['./app/**/src/generated/**'],
   },
 };

Diff for: app/src/components/slider/MoviePoster.tsx

@@ -1,13 +1,13 @@
 import React, { useContext } from 'react';
 import cx from 'classnames';
 import { CarouselContext } from './CarouselContext';
-import { MovieFragmentFragment } from '../../generated/graphql';
+import { MovieFragment } from '../../generated/graphql';
 
 import './MoviePoster.scss';
 import FavoriteIcon from '@material-ui/icons/Favorite';
 
 type MoviePosterProps = {
-  movie: MovieFragmentFragment; // TODO: use the fragment type
+  movie: MovieFragment; // TODO: use the fragment type
 };
 
 export function MoviePoster(props: MoviePosterProps) {

Diff for: app/src/generated/graphql.tsx

@@ -99,7 +99,18 @@ export type ToggleFavoriteMutation = (
   )> }
 );
 
-export type MovieFragmentFragment = (
+export type NowPlayingQueryQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type NowPlayingQueryQuery = (
+  { __typename?: 'Query' }
+  & { nowPlaying?: Maybe<Array<(
+    { __typename?: 'Movie' }
+    & Pick<Movie, 'id' | 'title' | 'overview'>
+  )>> }
+);
+
+export type MovieFragment = (
   { __typename?: 'Movie' }
   & Pick<Movie, 'id' | 'title' | 'overview' | 'poster_path' | 'backdrop_path' | 'favorite' | 'popularity'>
   & { cast?: Maybe<Array<(
@@ -115,7 +126,7 @@ export type NowPlayingQuery = (
   { __typename?: 'Query' }
   & { nowPlaying?: Maybe<Array<(
     { __typename?: 'Movie' }
-    & MovieFragmentFragment
+    & MovieFragment
   )>> }
 );
 
@@ -126,12 +137,12 @@ export type PopularQuery = (
   { __typename?: 'Query' }
   & { popular?: Maybe<Array<(
     { __typename?: 'Movie' }
-    & MovieFragmentFragment
+    & MovieFragment
   )>> }
 );
 
-export const MovieFragmentFragmentDoc = gql`
-    fragment MovieFragment on Movie {
+export const MovieFragmentDoc = gql`
+    fragment Movie on Movie {
   id
   title
   overview
@@ -222,13 +233,49 @@ export function useToggleFavoriteMutation(baseOptions?: Apollo.MutationHookOptio
 export type ToggleFavoriteMutationHookResult = ReturnType<typeof useToggleFavoriteMutation>;
 export type ToggleFavoriteMutationResult = Apollo.MutationResult<ToggleFavoriteMutation>;
 export type ToggleFavoriteMutationOptions = Apollo.BaseMutationOptions<ToggleFavoriteMutation, ToggleFavoriteMutationVariables>;
+export const NowPlayingQueryDocument = gql`
+    query nowPlayingQuery {
+  nowPlaying {
+    id
+    title
+    overview
+  }
+}
+    `;
+
+/**
+ * __useNowPlayingQueryQuery__
+ *
+ * To run a query within a React component, call `useNowPlayingQueryQuery` and pass it any options that fit your needs.
+ * When your component renders, `useNowPlayingQueryQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useNowPlayingQueryQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useNowPlayingQueryQuery(baseOptions?: Apollo.QueryHookOptions<NowPlayingQueryQuery, NowPlayingQueryQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<NowPlayingQueryQuery, NowPlayingQueryQueryVariables>(NowPlayingQueryDocument, options);
+      }
+export function useNowPlayingQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<NowPlayingQueryQuery, NowPlayingQueryQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<NowPlayingQueryQuery, NowPlayingQueryQueryVariables>(NowPlayingQueryDocument, options);
+        }
+export type NowPlayingQueryQueryHookResult = ReturnType<typeof useNowPlayingQueryQuery>;
+export type NowPlayingQueryLazyQueryHookResult = ReturnType<typeof useNowPlayingQueryLazyQuery>;
+export type NowPlayingQueryQueryResult = Apollo.QueryResult<NowPlayingQueryQuery, NowPlayingQueryQueryVariables>;
 export const NowPlayingDocument = gql`
     query nowPlaying {
   nowPlaying {
-    ...MovieFragment
+    ...Movie
   }
 }
-    ${MovieFragmentFragmentDoc}`;
+    ${MovieFragmentDoc}`;
 
 /**
  * __useNowPlayingQuery__
@@ -259,10 +306,10 @@ export type NowPlayingQueryResult = Apollo.QueryResult<NowPlayingQuery, NowPlayi
 export const PopularDocument = gql`
     query popular {
   popular {
-    ...MovieFragment
+    ...Movie
   }
 }
-    ${MovieFragmentFragmentDoc}`;
+    ${MovieFragmentDoc}`;
 
 /**
  * __usePopularQuery__

Diff for: app/src/pages/NowPlaying.tsx

@@ -3,6 +3,17 @@ import React from 'react';
 import { Carousel } from '../components/slider/Carousel';
 import { MoviePoster } from '../components/slider/MoviePoster';
 import { useNowPlayingQuery } from '../generated/graphql';
+import { gql } from '@apollo/client';
+
+export const nowPlayingQuery = gql`
+  query nowPlayingQuery {
+    nowPlaying {
+      id
+      title
+      overview
+    }
+  }
+`;
 
 export const NowPlaying = () => {
   const { loading, error, data } = useNowPlayingQuery();

Diff for: app/src/pages/graphql.ts

@@ -1,7 +1,7 @@
 import { gql } from '@apollo/client';
 
 export const MOVIE_FRAGMENT = gql`
-  fragment MovieFragment on Movie {
+  fragment Movie on Movie {
     id
     title
     overview
@@ -18,7 +18,7 @@ export const MOVIE_FRAGMENT = gql`
 export const NOW_PLAYING = gql`
   query nowPlaying {
     nowPlaying {
-      ...MovieFragment
+      ...Movie
     }
   }
   ${MOVIE_FRAGMENT}
@@ -27,7 +27,7 @@ export const NOW_PLAYING = gql`
 export const POPULAR = gql`
   query popular {
     popular {
-      ...MovieFragment
+      ...Movie
     }
   }
   ${MOVIE_FRAGMENT}