From 1a45e4cb91fe981368e6d179ec20b4917760ea6d Mon Sep 17 00:00:00 2001
From: MathuraMG <mmg9291@gmail.com>
Date: Wed, 10 Aug 2016 15:49:03 -0400
Subject: [PATCH] change file modal structure

---
 client/modules/IDE/components/NewFileModal.js | 62 ++++++++++---------
 1 file changed, 33 insertions(+), 29 deletions(-)

diff --git a/client/modules/IDE/components/NewFileModal.js b/client/modules/IDE/components/NewFileModal.js
index 91a37740..b070ab9f 100644
--- a/client/modules/IDE/components/NewFileModal.js
+++ b/client/modules/IDE/components/NewFileModal.js
@@ -12,36 +12,40 @@ import FileUploader from './FileUploader';
 // At some point this will probably be generalized to a generic modal
 // in which you can insert different content
 // but for now, let's just make this work
-function NewFileModal(props) {
-  const modalClass = classNames({
-    modal: true,
-    'modal--reduced': !props.canUploadMedia
-  });
-
-  return (
-    <section className={modalClass}>
-      <div className="modal-content">
-        <div className="modal__header">
-          <h2 className="modal__title">Add File</h2>
-          <button className="modal__exit-button" onClick={props.closeModal}>
-            <InlineSVG src={exitUrl} alt="Close New File Modal" />
-          </button>
+class NewFileModal extends React.Component {
+  componentDidMount() {
+    document.getElementById('name').focus();
+  }
+  render() {
+    const modalClass = classNames({
+      modal: true,
+      'modal--reduced': !this.props.canUploadMedia
+    });
+    return (
+      <section className={modalClass}>
+        <div className="modal-content">
+          <div className="modal__header">
+            <h2 className="modal__title">Add File</h2>
+            <button className="modal__exit-button" onClick={this.props.closeModal}>
+              <InlineSVG src={exitUrl} alt="Close New File Modal" />
+            </button>
+          </div>
+          <NewFileForm {...this.props} />
+          {(() => {
+            if (this.props.canUploadMedia) {
+              return (
+                <div>
+                  <p className="modal__divider">OR</p>
+                  <FileUploader />
+                </div>
+              );
+            }
+            return '';
+          })()}
         </div>
-        <NewFileForm {...props} />
-        {(() => {
-          if (props.canUploadMedia) {
-            return (
-              <div>
-                <p className="modal__divider">OR</p>
-                <FileUploader />
-              </div>
-            );
-          }
-          return '';
-        })()}
-      </div>
-    </section>
-  );
+      </section>
+    );
+  }
 }
 
 NewFileModal.propTypes = {