fix(client): split Editor panes correctly (#41570)

* refactor: clean up MultifileEditor

* fix: show correct splitters

* fix: include splitter for JSX

client/src/templates/Challenges/classic/MultifileEditor.js

@@ -169,7 +169,7 @@ class MultifileEditor extends Component {
       editorRef,
       theme,
       resizeProps,
-      visibleEditors
+      visibleEditors: { indexcss, indexhtml, indexjs, indexjsx }
     } = this.props;
     const editorTheme = theme === 'night' ? 'vs-dark-custom' : 'vs-custom';
     // TODO: the tabs mess up the rendering (scroll doesn't work properly and
@@ -185,11 +185,22 @@ class MultifileEditor extends Component {
       renderOnResizeRate: 20
     };
 
-    // TODO: this approach (||ing the visibleEditors) isn't great.
-    const splitCSS = visibleEditors.indexhtml && visibleEditors.indexcss;
-    const splitJS =
-      visibleEditors.indexcss ||
-      (visibleEditors.indexhtml && visibleEditors.indexjs);
+    let splitterJSXRight, splitterHTMLRight, splitterCSSRight;
+    if (indexjsx) {
+      if (indexhtml || indexcss || indexjs) {
+        splitterJSXRight = true;
+      }
+    }
+    if (indexhtml) {
+      if (indexcss || indexjs) {
+        splitterHTMLRight = true;
+      }
+    }
+    if (indexcss) {
+      if (indexjs) {
+        splitterCSSRight = true;
+      }
+    }
 
     // TODO: tabs should be dynamically created from the challengeFiles
     // TODO: the tabs mess up the rendering (scroll doesn't work properly and
@@ -204,7 +215,23 @@ class MultifileEditor extends Component {
       >
         <ReflexElement flex={10} {...reflexProps} {...resizeProps}>
           <ReflexContainer orientation='vertical'>
-            {visibleEditors.indexhtml && (
+            {indexjsx && (
+              <ReflexElement {...reflexProps} {...resizeProps}>
+                <Editor
+                  challengeFiles={challengeFiles}
+                  containerRef={containerRef}
+                  description={targetEditor === 'indexjsx' ? description : null}
+                  fileKey='indexjsx'
+                  key='indexjsx'
+                  resizeProps={resizeProps}
+                  theme={editorTheme}
+                />
+              </ReflexElement>
+            )}
+            {splitterJSXRight && (
+              <ReflexSplitter propagate={true} {...resizeProps} />
+            )}
+            {indexhtml && (
               <ReflexElement {...reflexProps} {...resizeProps}>
                 <Editor
                   challengeFiles={challengeFiles}
@@ -220,8 +247,10 @@ class MultifileEditor extends Component {
                 />
               </ReflexElement>
             )}
-            {splitCSS && <ReflexSplitter propagate={true} {...resizeProps} />}
-            {visibleEditors.indexcss && (
+            {splitterHTMLRight && (
+              <ReflexSplitter propagate={true} {...resizeProps} />
+            )}
+            {indexcss && (
               <ReflexElement {...reflexProps} {...resizeProps}>
                 <Editor
                   challengeFiles={challengeFiles}
@@ -234,9 +263,11 @@ class MultifileEditor extends Component {
                 />
               </ReflexElement>
             )}
-            {splitJS && <ReflexSplitter propagate={true} {...resizeProps} />}
+            {splitterCSSRight && (
+              <ReflexSplitter propagate={true} {...resizeProps} />
+            )}
 
-            {visibleEditors.indexjs && (
+            {indexjs && (
               <ReflexElement {...reflexProps} {...resizeProps}>
                 <Editor
                   challengeFiles={challengeFiles}
@@ -249,19 +280,6 @@ class MultifileEditor extends Component {
                 />
               </ReflexElement>
             )}
-            {visibleEditors.indexjsx && (
-              <ReflexElement {...reflexProps} {...resizeProps}>
-                <Editor
-                  challengeFiles={challengeFiles}
-                  containerRef={containerRef}
-                  description={targetEditor === 'indexjsx' ? description : null}
-                  fileKey='indexjsx'
-                  key='indexjsx'
-                  resizeProps={resizeProps}
-                  theme={editorTheme}
-                />
-              </ReflexElement>
-            )}
           </ReflexContainer>
         </ReflexElement>
       </ReflexContainer>