fixed image upload

app/controllers/client_api/users/users_controller.rb

@@ -51,7 +51,7 @@ module ClientApi
           bypass_sign_in(current_user)
           success_response
         else
-          unsuccess_response(current_user.errors.full_messages)
+          unsuccess_response(current_user.errors.full_messages, :unauthorized)
         end
       rescue CustomUserError => error
         unsuccess_response(error.to_s)
@@ -97,11 +97,11 @@ module ClientApi
         end
       end
 
-      def unsuccess_response(message)
+      def unsuccess_response(message, status = :unprocessable_entity)
         respond_to do |format|
           format.json do
             render json: { message: message },
-            status: :unprocessable_entity
+            status: status
           end
         end
       end

app/javascript/src/components/Navigation/components/UserAccountDropdown.jsx

@@ -5,21 +5,30 @@ import { NavDropdown, MenuItem, Image } from "react-bootstrap";
 import styled from "styled-components";
 import { FormattedMessage } from "react-intl";
 
-import { getCurrentUser } from "../../actions/UsersActions";
+import { getCurrentUser } from "../../../services/api/users_api";
+import { addCurrentUser } from "../../actions/UsersActions";
 
 const StyledNavDropdown = styled(NavDropdown)`
-& #user-account-dropdown {
+  & #user-account-dropdown {
-  padding-top: 10px;
+    padding-top: 10px;
-  padding-bottom: 10px;
+    padding-bottom: 10px;
-}
+  }
+`;
+
+const StyledAvatar = styled(Image)`
+  max-width: 30px;
+  max-height: 30px;
 `;
 
 class UserAccountDropdown extends Component {
   componentDidMount() {
-    this.props.getCurrentUser();
+    getCurrentUser().then(data => {
+      this.props.addCurrentUser(data);
+    });
   }
 
   render() {
+    const { fullName, avatarThumb } = this.props.current_user;
     return (
       <StyledNavDropdown
         id="user-account-dropdown"
@@ -29,11 +38,11 @@ class UserAccountDropdown extends Component {
           <span>
             <FormattedMessage
               id="user_account_dropdown.greeting"
-              values={{ name: this.props.current_user.fullName }}
+              values={{ name: fullName }}
             />&nbsp;
-            <Image
+            <StyledAvatar
-              src={this.props.current_user.avatarPath}
+              src={`${avatarThumb }?${new Date().getTime()}`}
-              alt={this.props.current_user.fullName}
+              alt={fullName}
               circle
             />
           </span>
@@ -52,24 +61,17 @@ class UserAccountDropdown extends Component {
 }
 
 UserAccountDropdown.propTypes = {
-  getCurrentUser: PropTypes.func.isRequired,
+  addCurrentUser: PropTypes.func.isRequired,
   current_user: PropTypes.shape({
     id: PropTypes.number.isRequired,
     fullName: PropTypes.string.isRequired,
-    avatarPath: PropTypes.string.isRequired
+    avatarThumb: PropTypes.string.isRequired
   }).isRequired
 };
 
 // Map the states from store to component
 const mapStateToProps = ({ current_user }) => ({ current_user });
 
-// Map the fetch activity action to component
+export default connect(mapStateToProps, { addCurrentUser })(
-const mapDispatchToProps = dispatch => ({
-  getCurrentUser() {
-    dispatch(getCurrentUser());
-  }
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(
   UserAccountDropdown
 );

app/javascript/src/components/actions/UsersActions.js

@@ -1,7 +1,6 @@
 import axios from "../../config/axios";
 
 import {
-  CURRENT_USER_PATH,
   CHANGE_USER_TIMEZONE_PATH,
   CHANGE_USER_ASSIGNEMENTS_NOTIFICATION_PATH,
   CHANGE_USER_ASSIGNMENTS_NOTIFICATION_EMAIL_PATH,
@@ -20,26 +19,13 @@ import {
   CHANGE_SYSTEM_MESSAGE_NOTIFICATION_EMAIL
 } from "../../config/action_types";
 
-function addCurrentUser(data) {
+export function addCurrentUser(data) {
   return {
     type: SET_CURRENT_USER,
     payload: data
   };
 }
 
-export function getCurrentUser() {
-  return dispatch => {
-    axios
-      .get(CURRENT_USER_PATH, { withCredentials: true })
-      .then(({ data }) => {
-        dispatch(addCurrentUser(data.user));
-      })
-      .catch(error => {
-        console.log("get Current User Error: ", error);
-      });
-  };
-}
-
 export function saveTimezone({ timezone }) {
   return {
     type: CHANGE_CURRENT_USER_TIMEZONE,

app/javascript/src/scenes/SettingsPage/scenes/profile/components/InputEnabled.jsx

@@ -299,7 +299,7 @@ class InputEnabled extends Component {
           <FormControl
             type="password"
             value={this.state.current_password}
-            onChange={this.handlePasswordConfirmation}
+            onChange={this.handleCurrentPassword}
           />
         </div>
       );
@@ -400,7 +400,7 @@ InputEnabled.propTypes = {
 };
 
 InputEnabled.defaultProps = {
-  forceRerender: false
+  forceRerender: () => (false)
 }
 
 export default InputEnabled;

app/javascript/src/scenes/SettingsPage/scenes/profile/components/MyProfile.jsx

@@ -1,8 +1,10 @@
 import React, { Component } from "react";
 import { func } from "prop-types";
+import { connect } from "react-redux";
 import styled from "styled-components";
 import { FormattedMessage } from "react-intl";
 import { getUserProfileInfo } from "../../../../../services/api/users_api";
+import { addCurrentUser } from "../../../../../components/actions/UsersActions";
 
 import AvatarInputField from "./AvatarInputField";
 import ProfileInputField from "./ProfileInputField";
@@ -25,7 +27,7 @@ class MyProfile extends Component {
       timeZone: "",
       newEmail: ""
     };
-    this.loadInfo = this.loadInfo.bind(this)
+    this.loadInfo = this.loadInfo.bind(this);
   }
 
   componentDidMount() {
@@ -37,6 +39,7 @@ class MyProfile extends Component {
       .then(data => {
         const { fullName, initials, email, avatarThumb, timeZone } = data;
         this.setState({ fullName, initials, email, avatarThumb, timeZone });
+        this.props.addCurrentUser(data);
       })
       .catch(error => {
         console.log(error);
@@ -52,8 +55,10 @@ class MyProfile extends Component {
         <AvatarLabel>
           <FormattedMessage id="settings_page.avatar" />
         </AvatarLabel>
-        <AvatarInputField reloadInfo={this.loadInfo}
+        <AvatarInputField
-                          imgSource={this.state.avatarThumb} />
+          reloadInfo={this.loadInfo}
+          imgSource={this.state.avatarThumb}
+        />
 
         <ProfileInputField
           value={this.state.fullName}
@@ -94,4 +99,4 @@ class MyProfile extends Component {
   }
 }
 
-export default MyProfile;
+export default connect(null, { addCurrentUser })(MyProfile);

app/javascript/src/services/api/users_api.js

@@ -1,5 +1,9 @@
 import { axiosInstance } from "./config";
-import { USER_PROFILE_INFO, UPDATE_USER_PATH } from "./endpoints";
+import {
+  USER_PROFILE_INFO,
+  UPDATE_USER_PATH,
+  CURRENT_USER_PATH
+} from "./endpoints";
 
 export const getUserProfileInfo = () => {
   return axiosInstance.get(USER_PROFILE_INFO).then(({ data }) => data.user);
@@ -15,3 +19,6 @@ export const updateUser = (params, formObj = false) => {
     .post(UPDATE_USER_PATH, { user: params })
     .then(({ data }) => data.user);
 };
+
+export const getCurrentUser = () =>
+  axiosInstance.get(CURRENT_USER_PATH).then(({ data }) => data.user);