change file modal structure

client/modules/IDE/components/NewFileModal.js

@@ -12,24 +12,27 @@ 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) {
+class NewFileModal extends React.Component {
+  componentDidMount() {
+    document.getElementById('name').focus();
+  }
+  render() {
     const modalClass = classNames({
       modal: true,
-    'modal--reduced': !props.canUploadMedia
+      '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={props.closeModal}>
+            <button className="modal__exit-button" onClick={this.props.closeModal}>
               <InlineSVG src={exitUrl} alt="Close New File Modal" />
             </button>
           </div>
-        <NewFileForm {...props} />
+          <NewFileForm {...this.props} />
           {(() => {
-          if (props.canUploadMedia) {
+            if (this.props.canUploadMedia) {
               return (
                 <div>
                   <p className="modal__divider">OR</p>
@@ -43,6 +46,7 @@ function NewFileModal(props) {
       </section>
     );
   }
+}
 
 NewFileModal.propTypes = {
   closeModal: PropTypes.func.isRequired,