adds avatar and editable inputs

app/javascript/packs/src/settings/components/Avatar.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { string } from "prop-types";
+
+const Avatar = props => <img src={props.imgSource} alt="default avatar" />;
+
+Avatar.propTypes = {
+  imgSource: string.isRequired
+};
+
+export default Avatar;

app/javascript/packs/src/settings/components/InputDisabled.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { string, func } from "prop-types";
+import { FormGroup, FormControl, ControlLabel, Button } from "react-bootstrap";
+
+const InputDisabled = props =>
+  <form>
+    <FormGroup>
+      <ControlLabel>
+        {props.labelValue}
+      </ControlLabel>
+      <FormControl type={props.inputType} value={props.inputValue} disabled />
+      <Button bsStyle="default" onClick={props.enableEdit}>
+        Edit
+      </Button>
+    </FormGroup>
+  </form>;
+
+InputDisabled.propTypes = {
+  labelValue: string.isRequired,
+  inputType: string.isRequired,
+  inputValue: string.isRequired,
+  enableEdit: func.isRequired
+};
+
+export default InputDisabled;

app/javascript/packs/src/settings/components/InputEnabled.jsx

@@ -0,0 +1,51 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { FormGroup, FormControl, ControlLabel, Button } from "react-bootstrap";
+
+class InputEnabled extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: this.props.inputValue
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(event) {
+    this.setState({ value: event.target.value });
+  }
+
+  render() {
+    return (
+      <div>
+        <form>
+          <FormGroup>
+            <ControlLabel>
+              {this.props.labelValue}
+            </ControlLabel>
+            <FormControl
+              type={this.props.inputType}
+              value={this.state.value}
+              onChange={this.handleChange}
+            />
+            <Button bsStyle="primary" onClick={this.props.disableEdit}>
+              Cancel
+            </Button>
+            <Button bsStyle="default">Update</Button>
+          </FormGroup>
+        </form>
+      </div>
+    );
+  }
+}
+
+InputEnabled.propTypes = {
+  labelValue: PropTypes.string.isRequired,
+  inputType: PropTypes.string.isRequired,
+  inputValue: PropTypes.string.isRequired,
+  disableEdit: PropTypes.func.isRequired
+};
+
+export default InputEnabled;

app/javascript/packs/src/settings/components/MyProfile.jsx

@@ -0,0 +1,90 @@
+import React, { Component } from "react";
+import axios from "axios";
+import _ from "lodash";
+
+import Avatar from "./Avatar";
+import InputDisabled from "./InputDisabled";
+import InputEnabled from "./InputEnabled";
+
+import { CURRENT_USER_PATH } from "../../../app/routes";
+
+class MyProfile extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      avatar: "",
+      inputs: {
+        fullName: {
+          label: "Full name",
+          value: "",
+          isEditable: false
+        }
+      }
+    };
+
+    this.toggleIsEditable = this.toggleIsEditable.bind(this);
+  }
+
+  componentDidMount() {
+    axios.get(CURRENT_USER_PATH, { withCredentials: true }).then(data => {
+      const userData = data.data.user;
+      this.setState(previousState =>
+        _.merge({}, previousState, {
+          avatar: userData.avatarThumbPath,
+          inputs: {
+            fullName: {
+              value: userData.fullName
+            }
+          }
+        })
+      );
+    });
+  }
+
+  toggleIsEditable(e) {
+    const currEditableState = this.state.inputs.fullName.isEditable;
+    e.preventDefault();
+    this.setState(previousState =>
+      _.merge({}, previousState, {
+        inputs: { fullName: { isEditable: !currEditableState } }
+      })
+    );
+  }
+
+  render() {
+    let fullNameField;
+    const fullNameState = this.state.inputs.fullName;
+
+    if (this.state.inputs.fullName.isEditable) {
+      fullNameField = (
+        <InputEnabled
+          labelValue={fullNameState.label}
+          inputValue={fullNameState.value}
+          inputType="text"
+          disableEdit={this.toggleIsEditable}
+        />
+      );
+    } else {
+      fullNameField = (
+        <InputDisabled
+          labelValue={fullNameState.label}
+          inputValue={fullNameState.value}
+          inputType="text"
+          enableEdit={this.toggleIsEditable}
+        />
+      );
+    }
+
+    return (
+      <div>
+        <h2>My Profile</h2>
+        <h4>Avatar</h4>
+        <Avatar imgSource={this.state.avatar} />
+        {fullNameField}
+      </div>
+    );
+  }
+}
+
+export default MyProfile;

app/views/client_api/users/show.json.jbuilder

@@ -2,4 +2,5 @@ json.user do
   json.id user.id
   json.fullName user.full_name
   json.avatarPath avatar_path(user, :icon_small)
+  json.avatarThumbPath avatar_path(user, :thumb)
 end