feat: refresh component preview after updating OLX

openedx · Sep 29, 2024 · d729d02 · d729d02
1 parent 30b08e6
commit d729d02
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/src/library-authoring/component-info/ComponentPreview.tsx b/src/library-authoring/component-info/ComponentPreview.tsx
@@ -5,6 +5,7 @@ import { OpenInFull } from '@openedx/paragon/icons';
 
 import { LibraryBlock } from '../LibraryBlock';
 import messages from './messages';
+import { useLibraryBlockMetadata } from '../data/apiHooks';
 
 interface ModalComponentPreviewProps {
   isOpen: boolean;
@@ -35,6 +36,7 @@ const ComponentPreview = ({ usageKey }: ComponentPreviewProps) => {
   const intl = useIntl();
 
   const [isModalOpen, openModal, closeModal] = useToggle();
+  const { data: componentMetadata } = useLibraryBlockMetadata(usageKey);
 
   return (
     <>
@@ -48,7 +50,12 @@ const ComponentPreview = ({ usageKey }: ComponentPreviewProps) => {
         >
           {intl.formatMessage(messages.previewExpandButtonTitle)}
         </Button>
-        <LibraryBlock usageKey={usageKey} />
+        {
+          // key=modified below is used to auto-refresh the preview when changes are made, e.g. via OLX editor
+          componentMetadata
+            ? <LibraryBlock usageKey={usageKey} key={componentMetadata.modified} />
+            : null
+        }
       </div>
       <ModalComponentPreview isOpen={isModalOpen} close={closeModal} usageKey={usageKey} />
     </>