Add a button to add shows to the wishlist

src/public/js/actions/actionCreators.js

@@ -188,6 +188,43 @@ export function fetchShowDetails(imdbId) {
   )
 }
 
+export function addShowToWishlist(imdbId, season = null, episode = null) {
+  return request(
+    'SHOW_ADD_TO_WISHLIST',
+    configureAxios().post(`/wishlist/shows/${imdbId}`, {
+      season: season,
+      episode: episode,
+    }),
+    [
+      addAlertOk("Show added to the wishlist"),
+      updateShowWishlistStore(imdbId, true, season, episode),
+    ],
+  )
+}
+
+export function deleteShowFromWishlist(imdbId) {
+  return request(
+    'SHOW_DELETE_FROM_WISHLIST',
+    configureAxios().delete(`/wishlist/shows/${imdbId}`),
+    [
+      addAlertOk("Show deleted from the wishlist"),
+      updateShowWishlistStore(imdbId, false),
+    ],
+  )
+}
+
+export function updateShowWishlistStore(imdbId, wishlisted, season = null, episode = null) {
+  return {
+    type: 'SHOW_UPDATE_STORE_WISHLIST',
+    payload: {
+      wishlisted: wishlisted,
+      imdbId,
+      season,
+      episode,
+    }
+  }
+}
+
 export function selectShow(imdbId) {
   return {
     type: 'SELECT_SHOW',

src/public/js/components/buttons/actions.js

@@ -10,9 +10,9 @@ export class WishlistButton extends React.Component {
   handleClick(e) {
     e.preventDefault();
     if (this.props.wishlisted) {
-      this.props.deleteFromWishlist(this.props.movieId);
+      this.props.deleteFromWishlist(this.props.resourceId);
     } else {
-      this.props.addToWishlist(this.props.movieId);
+      this.props.addToWishlist(this.props.resourceId);
     }
   }
   render() {

src/public/js/components/movies/actions.js

@@ -19,7 +19,7 @@ export default function ActionsButton(props) {
         />
       }
       <WishlistButton
-        movieId={props.movieId}
+        resourceId={props.movieId}
         wishlisted={props.wishlisted}
         addToWishlist={props.addToWishlist}
         deleteFromWishlist={props.deleteFromWishlist}

src/public/js/components/shows/list.js

@@ -1,23 +1,9 @@
 import React from 'react'
-import { Link } from 'react-router'
 
 import ListDetails from '../list/details'
 import ListPosters from '../list/posters'
 import Loader from '../loader/loader'
-
+import ShowButtons from './listButtons'
-function ShowButtons(props) {
-  const imdbLink = `http://www.imdb.com/title/${props.show.imdb_id}`;
-  return (
-    <div className="list-details-buttons btn-toolbar">
-      <a type="button" className="btn btn-warning btn-sm" href={imdbLink}>
-        <i className="fa fa-external-link"></i> IMDB
-      </a>
-      <Link type="button" className="btn btn-primary btn-sm" to={"/shows/details/" + props.show.imdb_id}>
-        <i className="fa fa-external-link"></i> Details
-      </Link>
-    </div>
-  );
-}
 
 export default class ShowList extends React.Component {
   componentWillMount() {
@@ -68,7 +54,11 @@ export default class ShowList extends React.Component {
         />
         {selectedShow &&
           <ListDetails data={selectedShow} >
-            <ShowButtons show={selectedShow} />
+            <ShowButtons
+              show={selectedShow}
+              deleteFromWishlist={this.props.deleteShowFromWishlist}
+              addToWishlist={this.props.addShowToWishlist}
+            />
           </ListDetails>
         }
       </div>

src/public/js/components/shows/listButtons.js

@@ -0,0 +1,39 @@
+import React from 'react'
+
+import { Link } from 'react-router'
+import { DropdownButton } from 'react-bootstrap'
+
+import { WishlistButton } from '../buttons/actions'
+
+export default function ShowButtons(props) {
+  const imdbLink = `http://www.imdb.com/title/${props.show.imdb_id}`;
+  return (
+    <div className="list-details-buttons btn-toolbar">
+      <ActionsButton
+        show={props.show}
+        addToWishlist={props.addToWishlist}
+        deleteFromWishlist={props.deleteFromWishlist}
+      />
+      <a type="button" className="btn btn-warning btn-sm" href={imdbLink}>
+        <i className="fa fa-external-link"></i> IMDB
+      </a>
+      <Link type="button" className="btn btn-primary btn-sm" to={"/shows/details/" + props.show.imdb_id}>
+        <i className="fa fa-external-link"></i> Details
+      </Link>
+    </div>
+  );
+}
+
+function ActionsButton(props) {
+  let wishlisted = (props.show.tracked_season !== null && props.show.tracked_episode !== null);
+  return (
+    <DropdownButton className="btn btn-default btn-sm" title="Actions" id="actions-button" dropup>
+      <WishlistButton
+        resourceId={props.show.imdb_id}
+        wishlisted={wishlisted}
+        addToWishlist={props.addToWishlist}
+        deleteFromWishlist={props.deleteFromWishlist}
+      />
+    </DropdownButton>
+  );
+}

src/public/js/reducers/movies.js

@@ -46,7 +46,6 @@ export default function movieStore(state = defaultState, action) {
     case 'MOVIE_UPDATE_STORE_WISHLIST':
       return Object.assign({}, state, {
         movies: updateStoreWishlist(state.movies.slice(), action.payload.imdbId, action.payload.wishlisted),
-        fetchingDetails: false,
       })
     case 'DELETE_MOVIE':
       return Object.assign({}, state, {

src/public/js/reducers/shows.js

@@ -45,6 +45,10 @@ export default function showStore(state = defaultState, action) {
         shows: action.payload.data,
         loading: false,
       })
+    case 'SHOW_UPDATE_STORE_WISHLIST':
+      return Object.assign({}, state, {
+        shows: updateStoreWishlist(state.shows.slice(), action.payload),
+      })
     case 'SELECT_SHOW':
       // Don't select the show if we're fetching another show's details
       if (state.fetchingDetails) {
@@ -102,3 +106,20 @@ function sortEpisodes(show) {
 
   return show;
 }
+
+function updateStoreWishlist(shows, payload) {
+  let index = shows.map((el) => el.imdb_id).indexOf(payload.imdbId);
+  let season = payload.season;
+  let episode = payload.episode;
+  if (payload.wishlisted) {
+    if (season === null) {
+      season = 0;
+    }
+    if (episode === null) {
+      episode = 0;
+    }
+  }
+  shows[index].tracked_season = season;
+  shows[index].tracked_episode = episode;
+  return shows
+}