Clear collection changes on add movie modal close

frontend/src/Collection/AddNewMovieCollectionMovieModal.tsx

@@ -1,6 +1,7 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import Modal from 'Components/Modal/Modal';
+import usePrevious from 'Helpers/Hooks/usePrevious';
 import { clearPendingChanges } from 'Store/Actions/baseActions';
 import AddNewMovieCollectionMovieModalContent, {
   AddNewMovieCollectionMovieModalContentProps,
@@ -18,11 +19,19 @@ function AddNewMovieCollectionMovieModal({
 }: AddNewCollectionMovieModalProps) {
   const dispatch = useDispatch();
 
+  const wasOpen = usePrevious(isOpen);
+
   const handleModalClose = useCallback(() => {
     dispatch(clearPendingChanges({ section: 'movieCollections' }));
     onModalClose();
   }, [dispatch, onModalClose]);
 
+  useEffect(() => {
+    if (wasOpen && !isOpen) {
+      dispatch(clearPendingChanges({ section: 'movieCollections' }));
+    }
+  }, [wasOpen, isOpen, dispatch]);
+
   return (
     <Modal isOpen={isOpen} onModalClose={handleModalClose}>
       <AddNewMovieCollectionMovieModalContent