feat(client): handle jsx in multi-file editor

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

@@ -127,6 +127,10 @@ class Editor extends Component {
       indexhtml: {
         model: null,
         state: null
+      },
+      indexjsx: {
+        model: null,
+        state: null
       }
     };
 
@@ -281,6 +285,8 @@ class Editor extends Component {
       this.data.indexcss.state = currentState;
     } else if (currentModel === this.data.indexhtml.model) {
       this.data.indexhtml.state = currentState;
+    } else if (currentModel === this.data.indexjsx.model) {
+      this.data.indexjsx.state = currentState;
     }
 
     editor.setModel(this.data[fileKey].model);
@@ -310,6 +316,14 @@ class Editor extends Component {
       <Suspense fallback={<Loader timeout={600} />}>
         <span className='notranslate'>
           <div className='monaco-editor-tabs'>
+            {challengeFiles['indexjsx'] && (
+              <div
+                className='monaco-editor-tab'
+                onClick={() => this.changeTab('indexjsx')}
+              >
+                script.jsx
+              </div>
+            )}
             {challengeFiles['indexhtml'] && (
               <div
                 className='monaco-editor-tab'

client/src/templates/Challenges/utils/__fixtures__/challenges.js

@@ -34,5 +34,17 @@ export const challengeFiles = {
     path: 'index.js',
     seed: 'some js',
     tail: ''
+  },
+  indexjsx: {
+    contents: 'some jsx',
+    error: null,
+    ext: 'jsx',
+    head: '',
+    history: ['index.jsx'],
+    key: 'indexjsx',
+    name: 'index',
+    path: 'index.jsx',
+    seed: 'some jsx',
+    tail: ''
   }
 };

client/src/templates/Challenges/utils/sort-files.js

@@ -5,6 +5,8 @@ export function sortFiles(challengeFiles) {
   xs.sort((a, b) => {
     if (a.ext === 'html') return -1;
     if (b.ext === 'html') return 1;
+    if (a.ext === 'jsx') return -1;
+    if (b.ext === 'jsx') return 1;
     if (a.ext === 'js') return -1;
     if (b.ext === 'js') return 1;
     return 0;

client/src/templates/Challenges/utils/sort-files.test.js

@@ -19,8 +19,9 @@ describe('sort-files', () => {
     it('should sort the objects into html, js, css order', () => {
       const sorted = sortFiles(challengeFiles);
       const sortedKeys = sorted.map(({ key }) => key);
-      const expected = ['indexhtml', 'indexjs', 'indexcss'];
+      const expected = ['indexhtml', 'indexjsx', 'indexjs', 'indexcss'];
       expect(sortedKeys).toStrictEqual(expected);
     });
+
   });
 });