From 80dfc6ba15215b18376f5490fc4005b9254407d7 Mon Sep 17 00:00:00 2001
From: Raymond Zhou <56318341+rayzhou-bit@users.noreply.github.com>
Date: Fri, 22 Jul 2022 07:58:55 -0700
Subject: [PATCH] feat: www gallery raw selection (#88)

* feat: www gallery raw selection
---
 src/editors/Editor.jsx                      |  8 ++--
 src/editors/EditorPage.jsx                  |  8 ++--
 src/editors/containers/TextEditor/index.jsx |  2 +-
 src/editors/data/services/cms/mockApi.js    |  3 +-
 src/editors/hooks.js                        |  2 +-
 src/editors/hooks.test.jsx                  |  2 +-
 www/src/Gallery.jsx                         | 48 +++++++++++++++------
 7 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/src/editors/Editor.jsx b/src/editors/Editor.jsx
index 27c987aa5..d760c72de 100644
--- a/src/editors/Editor.jsx
+++ b/src/editors/Editor.jsx
@@ -44,17 +44,17 @@ export const Editor = ({
   );
 };
 Editor.defaultProps = {
-  learningContextId: null,
   blockId: null,
+  learningContextId: null,
   lmsEndpointUrl: null,
-  studioEndpointUrl: null,
   onClose: null,
+  studioEndpointUrl: null,
 };
 
 Editor.propTypes = {
-  learningContextId: PropTypes.string,
-  blockType: PropTypes.string.isRequired,
   blockId: PropTypes.string,
+  blockType: PropTypes.string.isRequired,
+  learningContextId: PropTypes.string,
   lmsEndpointUrl: PropTypes.string,
   onClose: PropTypes.func,
   studioEndpointUrl: PropTypes.string,
diff --git a/src/editors/EditorPage.jsx b/src/editors/EditorPage.jsx
index 69ad070f7..1ea1533db 100644
--- a/src/editors/EditorPage.jsx
+++ b/src/editors/EditorPage.jsx
@@ -27,17 +27,17 @@ export const EditorPage = ({
   </Provider>
 );
 EditorPage.defaultProps = {
-  onClose: null,
-  courseId: null,
   blockId: null,
+  courseId: null,
   lmsEndpointUrl: null,
+  onClose: null,
   studioEndpointUrl: null,
 };
 
 EditorPage.propTypes = {
-  courseId: PropTypes.string,
-  blockType: PropTypes.string.isRequired,
   blockId: PropTypes.string,
+  blockType: PropTypes.string.isRequired,
+  courseId: PropTypes.string,
   lmsEndpointUrl: PropTypes.string,
   onClose: PropTypes.func,
   studioEndpointUrl: PropTypes.string,
diff --git a/src/editors/containers/TextEditor/index.jsx b/src/editors/containers/TextEditor/index.jsx
index 581f3d7f7..0de15d843 100644
--- a/src/editors/containers/TextEditor/index.jsx
+++ b/src/editors/containers/TextEditor/index.jsx
@@ -113,9 +113,9 @@ export const TextEditor = ({
 };
 TextEditor.defaultProps = {
   blockValue: null,
+  isRaw: null,
   lmsEndpointUrl: null,
   studioEndpointUrl: null,
-  isRaw: null,
 };
 TextEditor.propTypes = {
   onClose: PropTypes.func.isRequired,
diff --git a/src/editors/data/services/cms/mockApi.js b/src/editors/data/services/cms/mockApi.js
index 1e1abad85..a73fa0c45 100644
--- a/src/editors/data/services/cms/mockApi.js
+++ b/src/editors/data/services/cms/mockApi.js
@@ -17,7 +17,8 @@ export const fetchBlockById = ({ blockId, studioEndpointUrl }) => mockPromise({
 // eslint-disable-next-line
 export const fetchStudioView = ({ blockId, studioEndpointUrl }) => mockPromise({
   data: {
-    data_editor: 'raw',
+    // The following is sent for 'raw' editors.
+    html: blockId.includes('mockRaw') ? 'data-editor="raw"' : '',
     data: '<p>Test prompt content</p>',
     display_name: 'My Text Prompt',
   },
diff --git a/src/editors/hooks.js b/src/editors/hooks.js
index f763b9c3e..ceffe7efd 100644
--- a/src/editors/hooks.js
+++ b/src/editors/hooks.js
@@ -8,7 +8,7 @@ import * as module from './hooks';
 
 export const initializeApp = ({ dispatch, data }) => useEffect(
   () => dispatch(thunkActions.app.initialize(data)),
-  [],
+  [data],
 );
 
 export const navigateTo = (destination) => {
diff --git a/src/editors/hooks.test.jsx b/src/editors/hooks.test.jsx
index 3cbb4f1a9..15d64ffb1 100644
--- a/src/editors/hooks.test.jsx
+++ b/src/editors/hooks.test.jsx
@@ -53,7 +53,7 @@ describe('hooks', () => {
       hooks.initializeApp({ dispatch, data: fakeData });
       expect(dispatch).not.toHaveBeenCalledWith(fakeData);
       const [cb, prereqs] = useEffect.mock.calls[0];
-      expect(prereqs).toStrictEqual([]);
+      expect(prereqs).toStrictEqual([fakeData]);
       cb();
       expect(dispatch).toHaveBeenCalledWith(thunkActions.app.initialize(fakeData));
     });
diff --git a/www/src/Gallery.jsx b/www/src/Gallery.jsx
index a529c2e44..ee7cd9be5 100644
--- a/www/src/Gallery.jsx
+++ b/www/src/Gallery.jsx
@@ -10,28 +10,50 @@ import { mockBlockIdByType } from '@edx/frontend-lib-content-components/editors/
 
 export const EditorGallery = () => {
   const [blockType, setBlockType] = React.useState('html');
+  const [mockRaw, setMockRaw] = React.useState(false);
+
   const blockIds = Object.keys(blockTypes).reduce((obj, blockTypeKey) => {
     const type = blockTypes[blockTypeKey];
-    return { ...obj, [type]: mockBlockIdByType(type) };
+    return { ...obj, [type]: [mockBlockIdByType(type), (mockRaw ? '-mockRaw' : '')].join('') };
   }, {});
   const courseId = 'library-v1:EDX+apmjoemaonmeonaoenan';
   const studioEndpointUrl = 'fake-studio-endpoint-url';
   const lmsEndpointUrl = 'https://courses.edx.org'; // this is hardcoded because that is where the image data is from.
-  const handleChange = (e) => setBlockType(e.target.value);
+
+  const handleBlockChange = (e) => setBlockType(e.target.value);
+  const handleRawChange = (e) => setMockRaw(e.target.value === 'true');
+
   return (
     <div className="gallery">
-      <Form.Group>
-        <Form.RadioSet
-          name="blockTypes"
-          onChange={handleChange}
-          value={blockType}
+      <div style={{ display: 'flex' }}>
+        <Form.Group>
+          <Form.RadioSet
+            name="blockTypes"
+            onChange={handleBlockChange}
+            value={blockType}
+          >
+            { Object.values(blockTypes).map((e) => (
+              <Form.Radio value={e}> {e} </Form.Radio>
+            ))}
+          </Form.RadioSet>
+        </Form.Group>
+        <Form.Group
+          style={{
+            display: blockType === 'html' || blockType === 'problem'
+              ? 'block'
+              : 'none',
+          }}
         >
-          { Object.values(blockTypes).map((e) => (
-            <Form.Radio value={e}> {e} </Form.Radio>
-          ))}
-
-        </Form.RadioSet>
-      </Form.Group>
+          <Form.RadioSet
+            name="raw"
+            onChange={handleRawChange}
+            value={mockRaw.toString()}
+          >
+            <Form.Radio value="false">visual</Form.Radio>
+            <Form.Radio value="true">raw</Form.Radio>
+          </Form.RadioSet>
+        </Form.Group>
+      </div>
       <EditorPage
         {...{
           blockId: blockIds[blockType],