From 720b41193fe0ae59f5be523462fcafbed6586a46 Mon Sep 17 00:00:00 2001
From: connorhaugh <49422820+connorhaugh@users.noreply.github.com>
Date: Thu, 1 Sep 2022 14:35:44 -0400
Subject: [PATCH] fix: intermittent raw loading error (#109)

As sometimes the html components are rendered downstream before the block is loaded, we need to handle the case of no block value being provided to the raw editor at the time of first render. Subsequent thunk actions will trigger re-renders to display the block.
---
 .../TextEditor/__snapshots__/index.test.jsx.snap | 13 ++++++++++---
 .../RawEditor/__snapshots__/index.test.jsx.snap  |  2 +-
 .../TextEditor/components/RawEditor/index.jsx    | 16 +++++++++++-----
 .../components/RawEditor/index.test.jsx          |  2 +-
 src/editors/containers/TextEditor/index.jsx      |  2 +-
 src/editors/containers/TextEditor/index.test.jsx |  2 +-
 6 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/editors/containers/TextEditor/__snapshots__/index.test.jsx.snap b/src/editors/containers/TextEditor/__snapshots__/index.test.jsx.snap
index df4497eb1..9ce88eff3 100644
--- a/src/editors/containers/TextEditor/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/TextEditor/__snapshots__/index.test.jsx.snap
@@ -45,7 +45,7 @@ exports[`TextEditor snapshots ImageUploadModal is not rendered 1`] = `
         Object {
           "blockValue": Object {
             "data": Object {
-              "some": "eDiTablE Text",
+              "data": "eDiTablE Text",
             },
           },
           "clearSelection": [MockFunction hooks.selectedImage.clearSelection],
@@ -135,7 +135,7 @@ exports[`TextEditor snapshots block failed to load, Toast is shown 1`] = `
         Object {
           "blockValue": Object {
             "data": Object {
-              "some": "eDiTablE Text",
+              "data": "eDiTablE Text",
             },
           },
           "clearSelection": [MockFunction hooks.selectedImage.clearSelection],
@@ -228,6 +228,13 @@ exports[`TextEditor snapshots loaded, raw editor 1`] = `
           },
         }
       }
+      text={
+        Object {
+          "data": Object {
+            "data": "eDiTablE Text",
+          },
+        }
+      }
     />
   </div>
 </EditorContainer>
@@ -373,7 +380,7 @@ exports[`TextEditor snapshots renders as expected with default behavior 1`] = `
         Object {
           "blockValue": Object {
             "data": Object {
-              "some": "eDiTablE Text",
+              "data": "eDiTablE Text",
             },
           },
           "clearSelection": [MockFunction hooks.selectedImage.clearSelection],
diff --git a/src/editors/containers/TextEditor/components/RawEditor/__snapshots__/index.test.jsx.snap b/src/editors/containers/TextEditor/components/RawEditor/__snapshots__/index.test.jsx.snap
index 920825292..d049d36f1 100644
--- a/src/editors/containers/TextEditor/components/RawEditor/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/TextEditor/components/RawEditor/__snapshots__/index.test.jsx.snap
@@ -22,7 +22,7 @@ exports[`RawEditor renders as expected with default behavior 1`] = `
         },
       }
     }
-    value="sOmErAwHtml"
+    value="eDiTablE Text"
   />
 </div>
 `;
diff --git a/src/editors/containers/TextEditor/components/RawEditor/index.jsx b/src/editors/containers/TextEditor/components/RawEditor/index.jsx
index c058fb9ae..57a3f7515 100644
--- a/src/editors/containers/TextEditor/components/RawEditor/index.jsx
+++ b/src/editors/containers/TextEditor/components/RawEditor/index.jsx
@@ -12,21 +12,27 @@ export const RawEditor = ({
     <Alert variant="danger">
       You are using the raw HTML editor.
     </Alert>
-    <CodeEditor
-      innerRef={editorRef}
-      value={text}
-    />
+    { text && text.data.data ? (
+      <CodeEditor
+        innerRef={editorRef}
+        value={text.data.data}
+      />
+    ) : null}
+
   </div>
 );
 RawEditor.defaultProps = {
   editorRef: null,
+  text: null,
 };
 RawEditor.propTypes = {
   editorRef: PropTypes.oneOfType([
     PropTypes.func,
     PropTypes.shape({ current: PropTypes.any }),
   ]),
-  text: PropTypes.string.isRequired,
+  text: PropTypes.shape({
+    data: PropTypes.shape({ data: PropTypes.string }),
+  }),
 };
 
 export default RawEditor;
diff --git a/src/editors/containers/TextEditor/components/RawEditor/index.test.jsx b/src/editors/containers/TextEditor/components/RawEditor/index.test.jsx
index 96387b0ba..7c403ed07 100644
--- a/src/editors/containers/TextEditor/components/RawEditor/index.test.jsx
+++ b/src/editors/containers/TextEditor/components/RawEditor/index.test.jsx
@@ -10,7 +10,7 @@ describe('RawEditor', () => {
         value: 'Ref Value',
       },
     },
-    text: 'sOmErAwHtml',
+    text: { data: { data: 'eDiTablE Text' } },
   };
   test('renders as expected with default behavior', () => {
     expect(shallow(<RawEditor {...props} />)).toMatchSnapshot();
diff --git a/src/editors/containers/TextEditor/index.jsx b/src/editors/containers/TextEditor/index.jsx
index 524b0b0e4..6063c7d74 100644
--- a/src/editors/containers/TextEditor/index.jsx
+++ b/src/editors/containers/TextEditor/index.jsx
@@ -63,7 +63,7 @@ export const TextEditor = ({
       return (
         <RawEditor
           editorRef={editorRef}
-          text={blockValue.data.data}
+          text={blockValue}
         />
       );
     }
diff --git a/src/editors/containers/TextEditor/index.test.jsx b/src/editors/containers/TextEditor/index.test.jsx
index 718f2de1b..6a857c250 100644
--- a/src/editors/containers/TextEditor/index.test.jsx
+++ b/src/editors/containers/TextEditor/index.test.jsx
@@ -84,7 +84,7 @@ describe('TextEditor', () => {
   const props = {
     onClose: jest.fn().mockName('props.onClose'),
     // redux
-    blockValue: { data: { some: 'eDiTablE Text' } },
+    blockValue: { data: { data: 'eDiTablE Text' } },
     lmsEndpointUrl: 'sOmEvaLue.cOm',
     studioEndpointUrl: 'sOmEoThERvaLue.cOm',
     blockFailed: false,