Fixed: Handle client state of collection missingMovies

frontend/src/Movie/Delete/DeleteMovieModalContentConnector.js

@@ -31,6 +31,7 @@ function createMapDispatchToProps(dispatch, props) {
       dispatch(
         deleteMovie({
           id: props.movieId,
+          collectionTmdbId: this.collection?.tmdbId,
           deleteFiles,
           addImportExclusion
         })

frontend/src/Store/Actions/addMovieActions.js

@@ -131,8 +131,7 @@ export const actionHandlers = handleThunks({
     promise.done((data) => {
       const updatedItem = _.cloneDeep(data);
       updatedItem.id = updatedItem.tmdbId;
-
-      dispatch(batchActions([
+      const actions = [
         updateItem({ section: 'movies', ...data }),
         updateItem({ section: 'addMovie', ...updatedItem }),
 
@@ -142,7 +141,21 @@ export const actionHandlers = handleThunks({
           isAdded: true,
           addError: null
         })
-      ]));
+      ];
+
+      if (!newMovie.collection) {
+        dispatch(batchActions(actions));
+        return;
+      }
+
+      const collectionToUpdate = getState().movieCollections.items.find((collection) => collection.tmdbId === newMovie.collection.tmdbId);
+
+      if (collectionToUpdate) {
+        const collectionData = { ...collectionToUpdate, missingMovies: Math.max(0, collectionToUpdate.missingMovies - 1 ) };
+        actions.push(updateItem({ section: 'movieCollections', ...collectionData }));
+      }
+
+      dispatch(batchActions(actions));
     });
 
     promise.fail((xhr) => {

frontend/src/Store/Actions/movieActions.js

@@ -347,7 +347,27 @@ export const actionHandlers = handleThunks({
 
   [FETCH_MOVIES]: createFetchHandler(section, '/movie'),
   [SAVE_MOVIE]: createSaveProviderHandler(section, '/movie', { getAjaxOptions: getSaveAjaxOptions }),
-  [DELETE_MOVIE]: createRemoveItemHandler(section, '/movie'),
+  [DELETE_MOVIE]: (getState, payload, dispatch) => {
+    createRemoveItemHandler(section, '/movie')(getState, payload, dispatch);
+
+    if (!payload.collectionTmdbId) {
+      return;
+    }
+
+    const collectionToUpdate = getState().movieCollections.items.find((collection) => collection.tmdbId === payload.collectionTmdbId);
+
+    // Skip updating if the last movie in the collection is being deleted
+    if (collectionToUpdate.movies.length - collectionToUpdate.missingMovies === 1) {
+      return;
+    }
+
+    const collectionData = { ...collectionToUpdate, missingMovies: collectionToUpdate.missingMovies + 1 };
+
+    dispatch(updateItem({
+      section: 'movieCollections',
+      ...collectionData
+    }));
+  },
 
   [TOGGLE_MOVIE_MONITORED]: (getState, payload, dispatch) => {
     const {

frontend/src/Store/Actions/movieCollectionActions.js

@@ -272,6 +272,9 @@ export const actionHandlers = handleThunks({
     }).request;
 
     promise.done((data) => {
+      const collectionToUpdate = getState().movieCollections.items.find((collection) => collection.tmdbId === data.collection.tmdbId);
+      const collectionData = { ...collectionToUpdate, missingMovies: Math.max(0, collectionToUpdate.missingMovies - 1 ) };
+
       dispatch(batchActions([
         updateItem({ section: 'movies', ...data }),
 
@@ -280,7 +283,9 @@ export const actionHandlers = handleThunks({
           isAdding: false,
           isAdded: true,
           addError: null
-        })
+        }),
+
+        updateItem({ section, ...collectionData })
       ]));
     });