WIP: integrate event registration form with mock data.

client/src/containers/CurrentEvent/CurrentEvent.css

@@ -6,6 +6,12 @@
   bottom: 0;
   padding: 5px 30px;
 }
+
+#summary-container .subscribe {
+  justify-content: flex-end;
+  display: flex;
+  width: 100%;
+}
 .row .col #edit-user {
   position: absolute;
   top: 5px;

client/src/containers/CurrentEvent/CurrentEvent.js

@@ -8,6 +8,7 @@ import {
   CardTitle,
   CardSubtitle,
   Col,
+  Button,
   Row,
 } from 'reactstrap';
 import MetaTagsComponent from '../../components/SocialShare/MetaTagsComponent';
@@ -17,16 +18,23 @@ import { fetchCurrentEvent } from '../../actions';
 import ContentHeader from '../../components/ContentHeader/ContentHeader';
 import moment from 'moment';
 import DescriptionContainer from '../../components/DescriptionContainer/DescriptionContainer';
+import FormsModal from '../FormsModal/FormsModal';
 import { Link } from 'react-router-dom';
 import { AttendeeType } from '../../types/attendee-types';
 import './CurrentEvent.css';
 import GoogleMap from '../../components/GoogleMap/GoogleMap';
+import { eventRegisteration } from '../../mocks/mockForms';
 import CommentsBlock from '../../components/Comments/CommentsBlock';
 
 const DATE_FORMAT = 'LLLL';
 
 class CurrentEvent extends Component<Props> {
   eventId;
+
+  constructor(props) {
+    super(props);
+  }
+
   componentDidMount() {
     this.getCurrentEvent();
   }
@@ -38,6 +46,12 @@ class CurrentEvent extends Component<Props> {
     dispatch(fetchCurrentEvent(eventId));
   };
 
+  eventSubscribe = (e, user) => {
+    e.preventDefault();
+    this.registrationModal.toggle();
+    // this.editModal.receiveUserDetails(user)
+  };
+
   getAttendeesProfiles = (attendees: Array<AttendeeType>) => {
     return (
       <Row>
@@ -69,11 +83,14 @@ class CurrentEvent extends Component<Props> {
 
   render() {
     let { event } = this.props.currentEvent;
-
     return (
       <div className="main-container">
         {event ? (
           <Container>
+            <FormsModal
+              registrationForm={eventRegisteration}
+              ref={ref => (this.registrationModal = ref)}
+            />
             <MetaTagsComponent
               title={event.title}
               description={event.description}
@@ -84,7 +101,7 @@ class CurrentEvent extends Component<Props> {
               <CardImg top width="100%" src={event.cover} />
             </Row>
             <ContentHeader heading="Event Summary" />
-            <Row className="block-content">
+            <Row id="summary-container" className="block-content">
               <SummaryContainer
                 iconName="fa fa-clock-o fa-2x"
                 url={null}
@@ -105,6 +122,15 @@ class CurrentEvent extends Component<Props> {
                 iconName="fa fa-users fa-2x"
                 content={event.organisation.name}
               />
+
+              <div className="subscribe">
+                <Button
+                  onClick={e => this.eventSubscribe(e)}
+                  className="btn btn-primary"
+                >
+                  Subscribe
+                </Button>
+              </div>
             </Row>
             <DescriptionContainer description={event.description} />
 

client/src/containers/FormsModal/FormsModal.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import {
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Input,
+  Label,
+} from 'reactstrap';
+import './FormsModal.css';
+
+class FormsModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      modal: false,
+      backdrop: true,
+    };
+    // this.submit = this.submit.bind(this);
+    // this.toggle = this.toggle.bind(this);
+  }
+  toggle = () => {
+    this.setState({
+      modal: !this.state.modal,
+    });
+  };
+
+  submit = e => {
+    //TODO, update user via id;
+    this.toggle();
+  };
+
+  render() {
+    return (
+      <div>
+        <Modal
+          isOpen={this.state.modal}
+          toggle={this.toggle}
+          className={this.props.className}
+          backdrop={this.state.backdrop}
+        >
+          <ModalHeader toggle={this.toggle}>Forms</ModalHeader>
+          <ModalBody>
+            <form id="edit-profile">
+              {this.props.registrationForm.map((field, index) => (
+                <div key={index} className="form-group">
+                  {field.type !== 'dropdown' && (
+                    <div>
+                      <Label htmlFor="name">{field.label}</Label>
+                      <Input
+                        type={field.type}
+                        name={field.name}
+                        className="form-control"
+                        value={field.value}
+                      />
+                    </div>
+                  )}
+
+                  {field.type === 'dropdown' && (
+                    <div>
+                      <Label htmlFor="name">{field.label}</Label>
+                      <select name={field.name} className="form-control">
+                        {field.value.map(option => (
+                          <option value={option}>{option}</option>
+                        ))}
+                      </select>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </form>
+          </ModalBody>
+          <ModalFooter>
+            <Button color="primary" onClick={this.submit}>
+              Submit
+            </Button>{' '}
+            <Button color="secondary" onClick={this.toggle}>
+              Cancel
+            </Button>
+          </ModalFooter>
+        </Modal>
+      </div>
+    );
+  }
+}
+export default FormsModal;

client/src/mocks/mockForms.js

@@ -0,0 +1,38 @@
+export const eventRegisteration = [
+  {
+    name: 'firstName',
+    type: 'text',
+    value: '',
+    label: 'First Name',
+  },
+  {
+    name: 'lastName',
+    type: 'text',
+    value: '',
+    label: 'Last Name',
+  },
+  {
+    name: 'email',
+    type: 'email',
+    value: '',
+    label: 'Email',
+  },
+  {
+    name: 'phone-number',
+    type: 'number',
+    value: '',
+    label: 'Phone Number',
+  },
+  {
+    name: 'organisation',
+    type: 'text',
+    value: '',
+    label: 'Organisation',
+  },
+  {
+    name: 'experience',
+    type: 'dropdown',
+    label: 'Experience',
+    value: ['Fresh', '1 to 2 years', '2 to 3 years', '3 to onward'],
+  },
+];