import React, { Component } from 'react';

class PersonalInformationSettingContent extends Component {
    isActive = () => {
        return 'modal-tab-content ' + ((this.props.active === this.props.option) ? 'active' : '');
    }

    render() {
        return (
            <div className={this.isActive()}>
                <div className="user-setting">
                    <h4>Personal information</h4><hr/>
                </div>
            </div>
        );
    }
}

export default PersonalInformationSettingContent;

@@ -39,376 +39,2925 @@
 t';%0A
-%0Aclass PersonalInformationSettingContent extends Component %7B%0A    isActive = () =%3E %7B%0A        return 'modal-tab-content ' + ((this.props.active === this.props.option) ? 'active' : '');%0A    %7D%0A%0A    render() %7B%0A        return (%0A            %3Cdiv className=%7Bthis.isActive()%7D%3E%0A                %3Cdiv className=%22user-setting%22%3E%0A                    %3Ch4%3EPersonal information%3C/h4%3E%3Chr/
+import %7BCol, Form, FormControl, FormGroup, Button%7D from 'react-bootstrap';%0A%0Aclass PersonalInformationSettingContent extends Component %7B%0A    constructor(props) %7B%0A        super(props);%0A        this.state = %7B%0A            selectedSex: 'undefined',%0A            isApplyButtonLoading: false,%0A            displayChangesSavedMessage: false%0A        %7D;%0A    %7D%0A%0A    isActive = () =%3E %7B%0A        return 'modal-tab-content ' + ((this.props.active === this.props.option) ? 'active' : '');%0A    %7D%0A%0A    handleSexChange = (event) =%3E %7B%0A        this.setState(%7BselectedSex: event.target.value%7D);%0A    %7D%0A%0A    handleSettingChange = (event) =%3E %7B%0A        event.preventDefault();%0A        this.setState(%7BisApplyButtonLoading: true, displayChangesSavedMessage: false%7D);%0A        setTimeout(() =%3E %7B%0A            this.setState(%7B%0A                isApplyButtonLoading: false,%0A                displayChangesSavedMessage: true%0A            %7D);%0A        %7D, 2000);%0A        //TODO: Setting change request to backend IF NECESSARY%0A        setTimeout(() =%3E %7B%0A            this.setState(%7B%0A                displayChangesSavedMessage: false%0A            %7D);%0A        %7D, 5000);%0A    %7D%0A%0A    render() %7B%0A        return (%0A            %3Cdiv className=%7Bthis.isActive()%7D%3E%0A                %3Cdiv className=%22user-setting%22%3E%0A                    %3Ch4%3EPersonal information%3C/h4%3E%3Chr/%3E%0A                    %3CForm horizontal onSubmit=%7Bthis.handleSettingChange%7D%3E%0A                        %3Cb%3EI am a:%3C/b%3E%0A                        %3CFormGroup className=%22interested-sex%22%3E%0A                            %3CCol sm=%7B4%7D%3E%0A                                %3CFormControl%0A                                    componentClass=%22select%22%0A                                    placeholder=%22select%22%0A                                    name=%22sex%22%0A                                    id=%22user-sex%22%0A                                    defaultValue=%7Bthis.state.selectedSex%7D%0A                                    onChange=%7Bthis.handleSexChange%7D%0A                                %3E%0A                                    %3Coption value=%22undefined%22%3EUndefined%3C/option%3E%0A                                    %3Coption value=%22man%22%3EMan%3C/option%3E%0A                                    %3Coption value=%22woman%22%3EWoman%3C/option%3E%0A                                %3C/FormControl%3E%0A                            %3C/Col%3E%0A                        %3C/FormGroup%3E%0A%0A                        %3CButton%0A                            type=%22submit%22%0A                            bsStyle=%22primary%22%0A                            disabled=%7Bthis.state.isApplyButtonLoading%7D%0A                            onClick=%7B!this.state.isApplyButtonLoading? this.handleSettingChange: null%7D%0A                        %3E%0A                            %7Bthis.state.isApplyButtonLoading? 'Applying changes...' : 'Apply'%7D%0A                        %3C/Button%3E%0A                        %7Bthis.state.displayChangesSavedMessage? %3Cb className=%22changes-saved-message%22%3EYour changes were saved.%3C/b%3E : null%7D%0A                    %3C/Form
 %3E%0A  

Add personal info form with sex option