From dea30c139705f52312c0f0509a80d839aba985d0 Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Wed, 27 May 2020 18:14:23 +0200
Subject: [PATCH] feat: simple prototype for dynamic tabs

While this works for html challenges, it should dynamically generate the
tabs in a predetermined order from the available files.
---
 .../templates/Challenges/classic/Editor.js    | 44 +++++++++++--------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/client/src/templates/Challenges/classic/Editor.js b/client/src/templates/Challenges/classic/Editor.js
index d88c9a6f44..29474b0887 100644
--- a/client/src/templates/Challenges/classic/Editor.js
+++ b/client/src/templates/Challenges/classic/Editor.js
@@ -298,7 +298,7 @@ class Editor extends Component {
   }
 
   render() {
-    const { theme } = this.props;
+    const { challengeFiles, theme } = this.props;
     const editorTheme = theme === 'night' ? 'vs-dark-custom' : 'vs-custom';
 
     // TODO: tabs should be dynamically created from the challengeFiles
@@ -307,24 +307,30 @@ class Editor extends Component {
       <Suspense fallback={<Loader timeout={600} />}>
         <span className='notranslate'>
           <div className='monaco-editor-tabs'>
-            <div
-              className='monaco-editor-tab'
-              onClick={() => this.changeTab('indexhtml')}
-            >
-              index.html
-            </div>
-            <div
-              className='monaco-editor-tab'
-              onClick={() => this.changeTab('indexjs')}
-            >
-              script.js
-            </div>
-            <div
-              className='monaco-editor-tab'
-              onClick={() => this.changeTab('indexcss')}
-            >
-              styles.css
-            </div>
+            {challengeFiles['indexhtml'] && (
+              <div
+                className='monaco-editor-tab'
+                onClick={() => this.changeTab('indexhtml')}
+              >
+                index.html
+              </div>
+            )}
+            {challengeFiles['indexjs'] && (
+              <div
+                className='monaco-editor-tab'
+                onClick={() => this.changeTab('indexjs')}
+              >
+                script.js
+              </div>
+            )}
+            {challengeFiles['indexcss'] && (
+              <div
+                className='monaco-editor-tab'
+                onClick={() => this.changeTab('indexcss')}
+              >
+                styles.css
+              </div>
+            )}
           </div>
           <MonacoEditor
             editorDidMount={this.editorDidMount}