#97 Added study group form creation

client/modules/User/UserActions.js

@@ -7,6 +7,7 @@ export const UPDATE_USER = 'UPDATE_USER';
 export const LOGIN_USER = 'LOGIN_USER';
 export const AUTHENTICATE_SESSION = 'AUTHENTICATE_SESSION';
 export const FAILED_AUTHENTICATION = 'FAILED_AUTHENTICATION';
+export const CREATE_GROUP = 'CREATE_GROUP'
 
 // Auth Pages
 export const DASHBOARD_PAGE = 'DASHBOARD_PAGE';
@@ -127,3 +128,26 @@ export function logoutUserRequest() {
     return callApi('users/logout').then(res => dispatch(logoutUser(res)));
   };
 }
+
+
+export function createStudyGroup(studyGroup) {
+  console.log(studyGroup);
+  browserHistory.replace('/');
+  return {
+    type: CREATE_GROUP,
+    studyGroup,
+  };
+}
+
+export function createStudyGroupRequest(studyGroup) {
+  return (dispatch) => {
+    return callApi('users', 'post', {
+      studyGroup: {
+        groupName: studyGroup.groupName,
+        course: studyGroup.course,
+        teacher: studyGroup.teacher,
+        description: studyGroup.description,
+      },
+    }).then(res => dispatch(createStudyGroup(res.studyGroup)));
+  };
+}

client/modules/User/components/UserStudyGroupForm/UserStudyGroupForm.css

@@ -0,0 +1,39 @@
+.formContainer{
+  background-color:transparent;
+  text-align: center;
+  padding:30px;
+}
+.cap{
+  padding-top:2%;
+  font-size:6em;
+  margin-bottom:.3em;
+}
+.center {
+  text-align: center;
+}
+a{
+  color: #FFF;
+}
+a:hover {
+  color: rgba(255,255,255, 0.8);
+}
+.btnOutlineSecondary:hover, .btnOutlineSecondary {
+  border-color: #FFF;
+  color: #FFF;
+  cursor: pointer;
+}
+.signInButton{
+  margin-top:.25em;
+}
+.btnOutlineSecondary:hover {
+  background-color: rgba(255,255,255,.5);
+}
+.title{
+  margin-bottom:.5em;
+}
+.formLabel{
+  font-size: 1.6em;
+}
+.mainText{
+  font-size: 0.8em;
+}

client/modules/User/components/UserStudyGroupForm/UserStudyGroupForm.js

@@ -0,0 +1,119 @@
+import React, { Component, PropTypes } from 'react';
+import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import Validation from 'react-validation';
+
+import Valid from '../FormComponents/Validator';
+import styles from './UserRegistrationForm.css';
+
+export class UserStudyGroupForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { groupName: '', course: '', teacher: '', description: ''};
+    this.createStudyGroup = this.createStudyGroup.bind(this);
+    this.updateState = this.updateState.bind(this);
+  }
+
+  updateState(event) {
+    this.setState({
+      [event.target.name]: event.target.value,
+    });
+  }
+
+  notifyUser() {
+    alert('Group successfuly created!');
+  }
+
+  removeApiError = (event) => {
+    const name = event.target.name;
+    this.form.hideError(name);
+  };
+
+  createStudyGroup = (e) => {
+    if (this.state.groupName && this.state.course && this.state.teacher && this.state.description) {
+      this.notifyUser();
+      this.props.createStudyGroup(this.state.groupName, this.state.course, this.state.teacher, this.state.description);
+      console.log(this.state);
+      this.setState({ groupName: '', course: '', teacher: '', description: '' });
+      e.preventDefault();
+    }
+    return false;
+
+  };
+
+  render() {
+    return (
+        <div className={`${styles.formContainer} ${styles.center}`}>
+            <i className={`${styles.cap} fa fa-graduation-cap`} />
+            <h1 className={styles.title}><FormattedMessage id="siteTitle" /></h1>
+
+          <div className={styles.formLabel + ' row'}>
+          <Validation.components.Form method="POST" ref={c => this.form = c} onSubmit={this.createStudyGroup} className="col-lg-4 push-lg-4 col-md-6 push-md-3 col-xs-8 push-xs-2">
+
+                <label className="input-labels"> Group Name* </label>
+                <Validation.components.Input
+                  onFocus={this.removeApiError}
+                  className="form-control"
+                  name="groupName"
+                  type="text"
+                  value={this.state.groupName}
+                  onChange={this.updateState}
+                  errorClassName="is-invalid-input"
+                  placeholder={"Group Name"}
+                  validations={['required']}
+                /><br />
+
+              <label className="input-labels"> Course* </label>
+                <Validation.components.Input
+                  onFocus={this.removeApiError}
+                  className="form-control"
+                  name="course"
+                  type="text"
+                  value={this.state.course}
+                  onChange={this.updateState}
+                  errorClassName="is-invalid-input"
+                  placeholder={"Course"}
+                  validations={['required']}
+                /><br />
+
+              <label className="input-labels"> Teacher* </label>
+                <Validation.components.Input
+                  onFocus={this.removeApiError}
+                  className="form-control"
+                  name="teacher"
+                  type="text"
+                  value={this.state.teacher}
+                  onChange={this.updateState}
+                  errorClassName="is-invalid-input"
+                  placeholder={"Teacher"}
+                  validations={['required']}
+                /><br />
+
+              <label className="input-labels"> Description* </label>
+                <Validation.components.Textarea
+                  onSelect={this.removeApiError}
+                  className="form-control"
+                  name="description"
+                  type="text"
+                  value={this.state.description}
+                  onChange={this.updateState}
+                  errorClassName="is-invalid-input"
+                  placeholder={"Description"}
+                  validations={['required']}
+                /><br />
+
+               <Validation.components.Button className={`${styles.btnOutlineSecondary} btn btn-outline-secondary`}>
+               Create Study Group!
+               </Validation.components.Button><br /><br />
+              </Validation.components.Form>
+          </div>
+      </div>
+    );
+  }
+}
+
+UserStudyGroupForm.propTypes = {
+  createStudyGroup: PropTypes.func.isRequired,
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(UserStudyGroupForm);

client/modules/User/pages/UserStudyGroupPage/UserStudyGroupPage.js

@@ -0,0 +1,55 @@
+import React, { PropTypes, Component } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import callApi from '../../../../util/apiCaller';
+
+// Import Components
+import StudyGroupForm from '../../components/UserStudyGroupForm/UserStudyGroupForm';
+
+// Import Actions
+import { createStudyGroupRequest } from '../../UserActions';
+
+class UserStudyGroupPage extends Component {
+  constructor(props) {
+    super(props);
+    this.createStudyGroup = this.createStudyGroup.bind(this);
+  }
+
+  createStudyGroup = (groupName, course, teacher, description) => {
+    this.props.createStudyGroupRequest({
+      groupName,
+      course,
+      teacher,
+      description,
+    });
+  };
+
+  render() {
+    return (
+      <div>
+        <StudyGroupForm createStudyGroup={this.createStudyGroup} />
+      </div>
+    );
+  }
+}
+
+// Retrieve data from store as props
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators({ createStudyGroupRequest }, dispatch);
+}
+
+UserStudyGroupPage.propTypes = {
+  users: PropTypes.arrayOf(PropTypes.shape({
+    groupName: PropTypes.string.isRequired,
+    course: PropTypes.string.isRequired,
+    teacher: PropTypes.number.isRequired,
+    description: PropTypes.string.isRequired,
+  })),
+  createStudyGroupRequest: PropTypes.func.isRequired,
+};
+
+UserStudyGroupPage.contextTypes = {
+  router: React.PropTypes.object,
+};
+
+export default connect(null, mapDispatchToProps)(UserStudyGroupPage);