Add delete movie button

src/public/js/actions/actionCreators.js

@@ -61,7 +61,9 @@ export function updateUser(config) {
   return request(
     'USER_UPDATE',
     configureAxios().post('/users/edit', config),
-    "User updated",
+    [
+      addAlertOk("User updated"),
+    ],
   )
 }
 
@@ -90,6 +92,13 @@ export function selectMovie(imdbId) {
   }
 }
 
+export function deleteMovieFromStore(imdbId) {
+  return {
+    type: 'DELETE_MOVIE',
+    imdbId
+  }
+}
+
 export function searchMovies(search) {
   return request(
     'SEARCH_MOVIES',
@@ -104,6 +113,17 @@ export function getMovieDetails(imdbId) {
   )
 }
 
+export function deleteMovie(imdbId) {
+  return request(
+    'MOVIE_DELETE',
+    configureAxios().delete(`/movies/${imdbId}`),
+    [
+      addAlertOk("Movie deleted"),
+      deleteMovieFromStore(imdbId),
+    ],
+  )
+}
+
 export function fetchMovies(url) {
   return request(
     'MOVIE_LIST_FETCH',
@@ -153,6 +173,8 @@ export function addTorrent(url) {
     configureAxios().post('/torrents', {
       url: url,
     }),
-    "Torrent added",
+    [
+      addAlertOk("Torrent added"),
+    ],
   )
 }

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

@@ -10,6 +10,13 @@ export default function ActionsButton(props) {
         movieId={props.movieId}
         getDetails={props.getDetails}
       />
+      {(props.isUserAdmin && props.hasMovie) &&
+        <DeleteButton
+          movieId={props.movieId}
+          deleteMovie={props.deleteMovie}
+          isUserAdmin={props.isUserAdmin}
+        />
+      }
     </DropdownButton>
   );
 }
@@ -43,3 +50,23 @@ class RefreshButton extends React.Component {
     );
   }
 }
+
+class DeleteButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick(e) {
+    e.preventDefault();
+    this.props.deleteMovie(this.props.movieId);
+  }
+  render() {
+    return (
+      <MenuItem onClick={this.handleClick}>
+        <span>
+          <i className="fa fa-trash"></i> Delete
+        </span>
+      </MenuItem>
+    );
+  }
+}

src/public/js/components/movies/list.js

@@ -8,9 +8,10 @@ import Loader from '../loader/loader'
 
 function MovieButtons(props) {
   const imdb_link = `http://www.imdb.com/title/${props.movie.imdb_id}`;
+  const hasMovie = (props.movie.polochon_url !== "")
   return (
     <div className="list-details-buttons btn-toolbar">
-      {props.movie.polochon_url !== "" &&
+      {hasMovie &&
         <a type="button" className="btn btn-primary btn-sm" href={props.movie.polochon_url}>
           <i className="fa fa-download"></i> Download
         </a>
@@ -27,6 +28,9 @@ function MovieButtons(props) {
         fetching={props.fetching}
         movieId={props.movie.imdb_id}
         getDetails={props.getMovieDetails}
+        deleteMovie={props.deleteMovie}
+        isUserAdmin={props.isUserAdmin}
+        hasMovie={hasMovie}
       />
 
       <a type="button" className="btn btn-warning btn-sm" href={imdb_link}>
@@ -91,6 +95,8 @@ export default class MovieList extends React.Component {
               fetching={this.props.movieStore.fetchingDetails}
               getMovieDetails={this.props.getMovieDetails}
               addTorrent={this.props.addTorrent}
+              deleteMovie={this.props.deleteMovie}
+              isUserAdmin={this.props.userStore.isAdmin}
             />
           </ListDetails>
         }

src/public/js/reducers/movies.js

@@ -46,6 +46,11 @@ export default function movieStore(state = defaultState, action) {
         movies: movies,
         fetchingDetails: false,
       })
+    case 'DELETE_MOVIE':
+      return Object.assign({}, state, {
+        movies: state.movies.filter((e) => (e.imdb_id !== action.imdbId)),
+        fetchingDetails: false,
+      })
     case 'SELECT_MOVIE':
       // Don't select the movie if we're fetching another movie's details
       if (state.fetchingDetails) {

src/public/js/requests.js

@@ -16,7 +16,7 @@ export function configureAxios(headers = {}) {
 
 // This function takes en event prefix to dispatch evens during the life of the
 // request, it also take a promise (axios request)
-export function request(eventPrefix, promise, successMessage = null) {
+export function request(eventPrefix, promise, callbackEvents = null) {
   // Events
   const pending = `${eventPrefix}_PENDING`;
   const fulfilled = `${eventPrefix}_FULFILLED`;
@@ -40,13 +40,10 @@ export function request(eventPrefix, promise, successMessage = null) {
         type: fulfilled,
         payload: response.data,
       })
-      if (successMessage) {
-        dispatch({
-          type: 'ADD_ALERT_OK',
-          payload: {
-            message: successMessage,
-          },
-        })
+      if (callbackEvents) {
+        for (let event of callbackEvents) {
+          dispatch(event);
+        }
       }
     })
     .catch(error => {