feat: refresh iframe on message

Author: navinkarkera

src/course-unit/constants.js

@@ -41,6 +41,7 @@ export const getXBlockSupportMessages = (intl) => ({
 
 export const messageTypes = {
   refreshXBlock: 'refreshXBlock',
+  refreshIframe: 'refreshIframe',
   showMoveXBlockModal: 'showMoveXBlockModal',
   completeXBlockMoving: 'completeXBlockMoving',
   rollbackMovedXBlock: 'rollbackMovedXBlock',

src/course-unit/xblock-container-iframe/hooks/types.ts

@@ -15,6 +15,7 @@ export type UseMessageHandlersTypes = {
   handleOpenManageTagsModal: (id: string) => void;
   handleShowProcessingNotification: (variant: string) => void;
   handleHideProcessingNotification: () => void;
+  handleRefreshIframe: () => void;
 };
 
 export type MessageHandlersTypes = Record<string, (payload: any) => void>;

src/course-unit/xblock-container-iframe/hooks/useMessageHandlers.tsx

@@ -31,6 +31,7 @@ export const useMessageHandlers = ({
   handleShowProcessingNotification,
   handleHideProcessingNotification,
   handleEditXBlock,
+  handleRefreshIframe,
 }: UseMessageHandlersTypes): MessageHandlersTypes => {
   const { copyToClipboard } = useClipboard();
 
@@ -50,6 +51,7 @@ export const useMessageHandlers = ({
     [messageTypes.saveEditedXBlockData]: handleSaveEditedXBlockData,
     [messageTypes.studioAjaxError]: ({ error }) => handleResponseErrors(error, dispatch, updateSavingStatus),
     [messageTypes.refreshPositions]: handleFinishXBlockDragging,
+    [messageTypes.refreshIframe]: handleRefreshIframe,
     [messageTypes.openManageTags]: (payload) => handleOpenManageTagsModal(payload.contentId),
     [messageTypes.addNewComponent]: () => handleShowProcessingNotification(NOTIFICATION_MESSAGES.adding),
     [messageTypes.pasteNewComponent]: () => handleShowProcessingNotification(NOTIFICATION_MESSAGES.pasting),

src/course-unit/xblock-container-iframe/index.tsx

@@ -46,6 +46,8 @@ const XBlockContainerIframe: FC<XBlockContainerIframeProps> = ({
   const intl = useIntl();
   const dispatch = useDispatch();
 
+  // Useful to reload iframe
+  const [iframeKey, setIframeKey] = useState(0);
   const [isDeleteModalOpen, openDeleteModal, closeDeleteModal] = useToggle(false);
   const [isUnlinkModalOpen, openUnlinkModal, closeUnlinkModal] = useToggle(false);
   const [isConfigureModalOpen, openConfigureModal, closeConfigureModal] = useToggle(false);
@@ -182,6 +184,11 @@ const XBlockContainerIframe: FC<XBlockContainerIframeProps> = ({
     dispatch(hideProcessingNotification());
   };
 
+  const handleRefreshIframe = () => {
+    // Updating iframeKey forces the iframe to re-render.
+    setIframeKey((prev) => prev + 1);
+  };
+
   const messageHandlers = useMessageHandlers({
     courseId,
     dispatch,
@@ -199,6 +206,7 @@ const XBlockContainerIframe: FC<XBlockContainerIframeProps> = ({
     handleShowProcessingNotification,
     handleHideProcessingNotification,
     handleEditXBlock,
+    handleRefreshIframe,
   });
 
   useIframeMessages(messageHandlers);
@@ -268,6 +276,7 @@ const XBlockContainerIframe: FC<XBlockContainerIframeProps> = ({
         />
       ) : null}
       <iframe
+        key={iframeKey}
         ref={iframeRef}
         title={intl.formatMessage(messages.xblockIframeTitle)}
         name="xblock-iframe"