Merge branch 'master' into xingyi

package.json

@@ -36,6 +36,7 @@
     "axios": "^0.16.2",
     "body-parser": "^1.17.2",
     "bulma": "^0.5.0",
+    "classnames": "^2.2.5",
     "connect-mongo": "^1.3.2",
     "cookie-parser": "^1.4.3",
     "draft-js": "^0.10.1",

reactApp/app.js

@@ -3,6 +3,7 @@ var React = require('react');
 import ReactDOM from 'react-dom';
 import { HashRouter, Link } from 'react-router-dom';
 import { Redirect } from 'react-router';
+import Docs from './components/App';
 
 ReactDOM.render(
 
@@ -12,3 +13,4 @@ ReactDOM.render(
 
   document.getElementById('root')
 );
+

reactApp/components/App.js

@@ -4,7 +4,7 @@ import {Editor, EditorState, Modifier, RichUtils} from 'draft-js';
 import Toolbar from './/Toolbar';
 import Register from './Register';
 import Login from './Login';
-
+import Docs from './Docs';
 import { HashRouter, Link, Route, Switch } from 'react-router-dom';
 
 import { Redirect } from 'react-router';
@@ -20,6 +20,8 @@ class App extends React.Component {
         <Switch>
           <Route exact path='/' component={Login}/>
           <Route exact path='/register' component={Register}/>
+          <Route exact path='/docs' component={Docs}/>
+          <Route exact path='/editor' component={MyEditor}/>
       </Switch>
     </div>
 

reactApp/components/Docs.js

@@ -1,9 +1,83 @@
 var React = require('react');
+var classNames = require('classnames');
+import ReactDOM from 'react-dom';
 
-const Docs= ({})=>{
-  return(
-
-  )
+class Docs extends React.Component {
+  constructor(){
+    super();
+    this.state={
+      modalOpen1: false,
+      modalOpen2: false
+    }
+  }
+  modal1Toggle(e){
+    e.preventDefault();
+     this.setState({
+       modalOpen1: !this.state.modalOpen1
+     })
+  }
+  modal2Toggle(e){
+    e.preventDefault();
+    this.setState({
+      modalOpen2: !this.state.modalOpen2
+    })
+  }
+  createDoc(e){
+
+  }
+  render(){
+      var modalClass1 = classNames({
+        'modal': true,
+        'is-active': this.state.modalOpen1
+      });
+      var modalClass2 = classNames({
+        'modal': true,
+        'is-active': this.state.modalOpen2
+      });
+    return(
+      <div>
+        <h1>Document Portal</h1>
+        <div>
+          <button className='is-button' onClick={(e)=>this.modal1Toggle(e)}>New Document
+          </button>
+          <div className={modalClass1}>
+            <div className="modal-background" onClick={(e)=>this.modal1Toggle(e)}></div>
+            <div className="modal-content">
+              <div className='box'>Doc Name input
+                <input type='text' />
+                <input type="submit" value="Create" onClick={(e)=>{
+                  this.modal1Toggle(e)
+                  this.createDoc(e) }}/>
+              </div>
+            </div>
+            <button className="modal-close is-large" onClick={(e)=>this.modal1Toggle(e)}></button>
+          </div>
+        </div>
+        <div>
+          <button className='is-button' onClick={(e)=>this.modal2Toggle(e)}>Add Shared Document
+        </button>
+        <div className={modalClass2}>
+          <div className="modal-background" onClick={(e)=>this.modal2Toggle(e)}></div>
+          <div className="modal-content">
+            <div className="box">Doc Collab input
+            <input type='text'/>
+            <input type="submit" value="Create" onClick={(e)=>this.modal2Toggle(e)}/>
+          </div>
+        </div>
+          <button className="modal-close is-large" onClick={(e)=>this.modal2Toggle(e)}></button>
+        </div>
+        </div>
+        <div>
+          Doc List
+        </div>
+      </div>
+    )
+  }
 }
 
-export default 'Docs';
+ReactDOM.render(
+<Docs/>,
+  document.getElementById('root')
+);
+
+// export default Docs;

reactApp/components/Register.js

@@ -87,11 +87,13 @@ render(){
             </div>
           </div>
 
+
         </form>
 
       <div className={"control"}>
         <button className={"button "} onClick={() => this.props.history.push('/')}>Login</button>
       </div>
+
     </div>
   )
 }