Splice out component

client/views/Students.js

@@ -12,9 +12,10 @@ import * as api from '../api';
 import StudentPanelBlock from './students/StudentPanelBlock.jsx';
 import ProgressBar from './students/ProgressBar.jsx';
 import ExamSelector from './students/ExamSelector.jsx';
+import AddModal from './students/AddModal.jsx';
 
 class CheckStudents extends React.Component {
-    
+
     students = [
         {
             id: 0,
@@ -415,21 +416,7 @@ class CheckStudents extends React.Component {
                                             matched={student.id === this.state.submission.studentID && this.state.submission.validated}
                                             selectStudent={this.selectStudent} />
                                     )}
-
-                                    <div className="panel-block is-hidden-mobile">
-                                        <button className="button is-link is-outlined is-fullwidth">
-                                            <span className="icon is-small">
-                                                <i className="fa fa-user-plus"></i>
-                                            </span>
-                                            <span>add</span>
-                                        </button>
-                                        <button className="button is-link is-outlined is-fullwidth">
-                                            <span className="icon is-small">
-                                                <i className="fa fa-upload"></i>
-                                            </span>
-                                            <span>upload</span>
-                                        </button>
-                                    </div>
+                                    <AddModal />
                                 </nav>
                             </div>
 

client/views/students/AddModal.jsx

+import React from 'react';
+
+class AddModal extends React.Component {
+
+    state = {
+        active: false
+    }
+
+    toggleActive = () => {
+        this.setState({
+            active: !this.state.active
+        })
+    }
+
+    render() {
+
+        return(
+            <div className="panel-block is-hidden-mobile">
+                <button className="button is-link is-outlined is-fullwidth" onClick={this.toggleActive}>
+                    <span className="icon is-small">
+                        <i className="fa fa-user-plus"></i>
+                    </span>
+                    <span>add students</span>
+                </button>
+                <div className={"modal" + (this.state.active ? " is-active" : "")}>
+                    <div className="modal-background"></div>
+                    <div className="modal-card">
+                        <header className="modal-card-head">
+                            <p className="modal-card-title">
+                                <span className="icon is-medium">
+                                    <i className="fa fa-user-plus"></i>
+                                </span>
+                                <span>Add students</span>
+                            </p>
+                            <button className="delete" aria-label="close" onClick={this.toggleActive} ></button>
+                        </header>
+                        <section className="modal-card-body">
+                            Hoihoi
+                        </section>
+                        <footer className="modal-card-foot">
+                            <button className="button is-success">Add student</button>
+                            <button className="button is-success">Upload file</button>
+                            <button className="button" onClick={this.toggleActive}>Done</button>
+                        </footer>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default AddModal;
+