add candidate profile (modal) #2

Author: Mireia

frontend/src/js/components/CandidateProfile/CandidateProfileModal.js

@@ -0,0 +1,76 @@
+import React from 'react'
+import {Button, Modal} from 'react-bootstrap'
+
+const CandidateProfileModal = React.createClass ({
+  close() {
+    this.props.changeState({ showModal: false });
+  },
+
+  open() {
+    this.props.changeState({ showModal: true });
+  },
+
+  render() {
+
+    return (
+      <div>
+
+        <Button
+          bsStyle='primary'
+          bsSize='large'
+          onClick={this.open}
+        >
+          {this.props.name} profile
+        </Button>
+
+        <Modal show={this.props.showModal} onHide={this.close}>
+
+          <Modal.Header closeButton>
+            <Modal.Title>{this.props.name}</Modal.Title>
+          </Modal.Header>
+
+          <Modal.Body>
+
+            <p>email: {this.props.email} {this.props.telephone}</p>
+            <p>Telephone number: {this.props.telephone}</p>
+            <p>University: {this.props.University}</p>
+            <p>Degree: {this.props.Degree}</p>
+            <p>Click here to see the {this.props.name} CV: {this.props.resumeLink}</p>
+            <p>Description: {this.props.description}</p>
+
+           </Modal.Body>
+
+          <Modal.Footer>
+            <Button onClick={this.close}>Close</Button>
+          </Modal.Footer>
+
+        </Modal>
+
+      </div>
+    )
+  }
+
+})
+
+CandidateProfileModal.propTypes = {
+  name: React.PropTypes.string.isRequired,
+  email: React.PropTypes.string.isRequired,
+  telephone: React.PropTypes.string.isRequired,
+  University: React.PropTypes.string.isRequired,
+  Degree: React.PropTypes.string.isRequired,
+  resumeLink: React.PropTypes.string.isRequired,
+  description: React.PropTypes.string.isRequired
+}
+
+CandidateProfileModal.defaultProps = {
+  name: 'Sam Package',
+  email: 'sam.package@welovepackages.com',
+  telephone: '07483849774',
+  University: 'Bristol',
+  Degree: 'Packages',
+  resumeLink: 'resume.com/resume.doc',
+  description: 'bla bla bla package bla'
+}
+
+export default CandidateProfileModal
+

frontend/src/js/views/Candidate/index.js

@@ -6,7 +6,7 @@ import CandidateProfileModal from '../../components/CandidateProfile/CandidatePr
 export default class CandidateView extends Component {
   constructor () {
     super()
-    this.state = {roles, candidates, showModal: false}
+    this.state = {roles, candidates, showModal: false, currentRole: null}
     this.changeState = this.changeState.bind(this)
   }
   changeState (state) {
@@ -16,7 +16,7 @@ export default class CandidateView extends Component {
     return (
       <div>
         <List candidates={this.state.candidates} roles={this.state.candidates} changeState={this.changeState} />
-        <CandidateProfileModal />
+        <CandidateProfileModal changeState={this.changeState} showModal={this.state.showModal} currentRole={this.state.currentRole}/>
       </div>
     )
   }

frontend/src/js/views/Host/index.js

@@ -16,7 +16,7 @@ export default class HostView extends Component {
     return (
       <div>
         <List candidates={this.state.candidates} changeState={this.changeState} />
-        <CandidateProfileModal />
+        <CandidateProfileModal changeState={this.changeState} showModal={this.state.showModal} currCandidate={this.state.currCandidate}/>
       </div>
     )
   }