<commit_before>import React from 'react';
import { browserHistory } from 'react-router';

export default class Index extends React.Component {
  render() {
    return(
      <div>
        <Nav/>
        <Body/>
      </div>
    );
  }
}


class Nav extends React.Component {
  componentDidMount() {
  }
  render() {
    return(
      <nav className="lime darken-4">
        <div className="nav-wrapper">
          <a href="#" id="brand" className="brand-logo">PostIt</a>
          <a href="#" data-activates="mobile-demo" className="button-collapse"><i className="material-icons">menu</i></a>
          <ul className="right hide-on-med-and-down">
            <li><a href="#">About PostIt</a></li>
          </ul>
          <ul id="mobile-demo" className="side-nav">
            <li><a href="#">About PostIt</a></li>
          </ul>
        </div>
      </nav>
    );
  }
}

class Body extends React.Component {
  constructor(props) {
    super(props);
    this.signUp = this.signUp.bind(this);
  }
  signUp(e) {
    // Stop default button click action

    var details = {
      firstName: this.refs['firstName'].value,
      lastName: this.refs['lastName'].value,
      phone: this.refs['phone'].value,
      email: this.refs['email'].value,
      password: this.refs['password'].value
    };
    console.log(details);
    var formBody = [];
    for (var property in details) {
      var encodedKey = encodeURIComponent(property);
      var encodedValue = encodeURIComponent(details[property]);
      formBody.push(encodedKey + "=" + encodedValue);
    }
    formBody = formBody.join("&");
    fetch('https://postit-api-victor.herokuapp.com/api/user/signup', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: formBody
    }).then((res) => res.json())
    .then((data) => { console.log(data)})
  }
  render() {
    return(
      <div id="body">
      <div id="main">
        <div className="row">
          <div className="col s2 m3 l4">
          </div>
          <div className="col s8 m6 l4 signup-form">
            <div>
              <h3 className="center">Sign Up</h3>
            </div>
            <div>
              <input type="text" ref="firstName" className="white-text" name="fname" placeholder="First Name" />
            </div>
            <div>
              <input type="text" ref="lastName" className="white-text" name="lname" placeholder="Last Name" />
            </div>
            <div>
              <input type="text" ref="phone" className="white-text" name="number" placeholder="Phone Number" />
            </div>
            <div>
              <input type="text" ref="email" className="white-text" name="email" placeholder="Email" />
            </div>
            <div>
              <input type="password" ref="password" name="password" placeholder="Password" />
            </div>
            <button className="btn" onClick={this.signUp}>Sign up</button>
            <div>
              <p>Already have an account? <a href="#">Sign in</a></p>
            </div>
          </div>
        </div>
      </div>
      <Footer/>
      </div>
    );
  }
}

class Footer extends React.Component {
  render() {
      return (
      <footer className="page-footer lime darken-4">
        <div className="container">Built by <NAME></div>
        <div className="footer-copyright">    © Andela, 2017</div>
      </footer>
    );
  }
}
<commit_msg>update Signup page with new template<commit_after>import React from 'react';
import { connect } from 'react-redux';
import NotificationSystem from 'react-notification-system';
import { signUp, resetErrorLog } from '../../actions';

class SignUp extends React.Component {
  render() {
    return(
      <div>
        <Body _that={this}/>
      </div>
    );
  }
}


class Nav extends React.Component {
  componentDidMount() {
  }
  render() {
    return(
      <div className="navbar-fixed">
        <nav className="pink darken-4" role="navigation">
          <div className="nav-wrapper">
            <a href="#" id="brand" className="brand-logo">PostIt</a>
            <a href="#" data-activates="mobile-demo" className="button-collapse"><i className="material-icons">menu</i></a>
            <ul className="right hide-on-med-and-down">
              <li><a href="#">About PostIt</a></li>
            </ul>
            <ul id="mobile-demo" className="side-nav">
              <li>
                <div className="user-details">
                  <div className="background">
                    <img src="images/fire2.png" />
                  </div>
                </div>
              </li>
              <li><a href="#"><i className="large material-icons black-text">info</i>About PostIt</a></li>
            </ul>
          </div>
        </nav>
      </div>
    );
  }
}

class Body extends React.Component {
  constructor(props) {
    super(props);
    this.signUp = this.signUp.bind(this);
    this.showNotification = this.showNotification.bind(this);
    this._notificationSystem = null;
  }
  componentDidMount() {
    this._notificationSystem = this.notificationRef;
  }
  signUp() {
    const firstName = this.firstName.value;
    const lastName = this.lastName.value;
    const email = this.email.value;
    const phone = this.phone.value;
    const password = <PASSWORD>;
    this.props._that.props.signUp(firstName, lastName, email, password, phone);
  }
  showNotification(level, message) {
      this._notificationSystem.addNotification({
      message: message,
      level: level
    });
  }
  componentWillUpdate() {
    const isSignedIn = this.props._that.props.appInfo.authState.signedIn;
    const errorMessage = this.props._that.props.apiError.message;
    console.log(isSignedIn, errorMessage);
    if(isSignedIn) {
      this.props._that.props.history.push('/messageboard');
    } else {
      if(errorMessage) {
        this.showNotification('success', errorMessage);
        this.props._that.props.resetErrorLog();
      }
    }
    
  }
  render() {
    const style = {
      NotificationItem: { 
        DefaultStyle: { 
          margin: '100px 5px 2px 1px',
          position: 'fixed',
          width: '320px'
        },
    
        success: { 
          color: 'red'
        }
      }
    }
    return(
      <div id="body">
      <Nav/>
      <div id="main">
        <div className="row">
          <div className="col s8 m6 l4 offset-s2 offset-m3 offset-l4 signup-form">
            <NotificationSystem className='notification' style={style} ref={(notificationRef) => { this.notificationRef = notificationRef }} />
            <div className="row">
              <div>
                <h3 className="center">Sign Up</h3>
              </div>
              <div className="input-field col s12">
                <input id="firstName" ref={(firstName) => {this.firstName = firstName;}} type="text" name="fname" className="validate" />
                <label htmlFor="firstName">First Name</label>
              </div>
              <div className="input-field col s12">
                <input id="lastName" ref={(lastName) => {this.lastName = lastName;}} type="text" name="lastName" className="validate" />
                <label htmlFor="lastName">Last Name</label>
              </div>
              <div className="input-field col s12">
                <input type="text" ref={(phone) => {this.phone = phone;}}   id="phone" name="number" className="validate" />
                <label htmlFor="phone">Phone</label>
              </div>
              <div className="input-field col s12">
                <input id="email" ref={(email) => {this.email = email;}}  type="email" name="email" className="validate" />
                <label htmlFor="email" data-error="Enter valid email">Email</label>
              </div>
              <div className="input-field col s12">
                <input ref={(password) => {this.password = password;}} id="password" type="password" className="validate" />
                <label htmlFor="password">Password</label>
              </div>
              <div className="center">
                <button onClick={this.signUp} className="btn center green darken-4" autoFocus>Sign up</button>
              </div>
              <div>
                <p>Already have an account? <a href="#">Sign in</a></p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Footer/>
      </div>
    );
  }
}

class Footer extends React.Component {
  render() {
      return (
      <footer className="page-footer pink darken-4">
        <div className="shift-left white-text">Built by <NAME></div>
        <div className="footer-copyright shift-left">    © Andela, 2017</div>
      </footer>
    );
  }
}


function mapStateToProps(state) {
  return {
    apiError: state.apiError,
    dataLoading: state.dataLoading,
    appInfo: {
      userDetails: state.appInfo.userDetails,
      authState: state.appInfo.authState
    }
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    signUp: (firstName, lastName, email, password, phone) => dispatch(signUp(firstName, lastName, email, password, phone)),
    resetErrorLog: () => dispatch(resetErrorLog())
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(SignUp);
{'fraction_non_alphanumeric': 0.1555722568176938, 'fraction_numerical': 0.0052608975735452005, 'mean_word_length': 2.1619144602851326, 'pattern_counts': {'":': 0, '<': 170, '<?xml version=': 0, '>': 181, 'https://': 1, 'lorem ipsum': 0, 'www.': 1, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1191979', 'n_tokens_mistral': 2776, 'n_tokens_neox': 2716, 'n_words': 572}