feat(edit profile): users can edit their profiles

- enables users to edit their profiles
[Delivers #161820823]

src/actions/actionCreators.js

@@ -24,6 +24,8 @@ import {
   SEND_RESET_LINK_ERROR,
   RESET_PASSWORD_SUCCESS,
   RESET_PASSWORD_ERROR,
+  UPDATE_PROFILE_INITIATED,
+  UPDATE_PROFILE_SUCCESS,
 } from './types';
 
 export const socialLoginInitiated = () => ({
@@ -132,3 +134,9 @@ export const ResetPasswordError = payload => ({
   type: RESET_PASSWORD_ERROR,
   payload,
 });
+export const updateProfileInitiated = () => ({
+  type: UPDATE_PROFILE_INITIATED,
+});
+export const updateProfileSuccess = () => ({
+  type: UPDATE_PROFILE_SUCCESS,
+});

src/actions/types.js

@@ -7,6 +7,8 @@ export const SOCIAL_LOGIN_SUCCESS = 'SOCIAL_LOGIN_SUCCESS';
 export const GET_PROFILE_PAYLOAD = 'GET_PROFILE_PAYLOAD';
 export const GET_PROFILE_INITIATED = 'GET_PROFILE_INITIATED';
 export const LOGOUT_USER = 'LOGOUT_USER';
+export const UPDATE_PROFILE_INITIATED = 'UPDATE_PROFILE_INITIATED';
+export const UPDATE_PROFILE_SUCCESS = 'UPDATE_PROFILE_SUCCESS';
 
 export const CREATE_ARTICLE_SUCCESS = 'CREATE_ARTICLE_SUCCESS';
 export const CREATE_ARTICLE_INITIATED = 'CREATE_ARTICLE_INITIATED';

src/actions/userActions.js

@@ -18,6 +18,8 @@ import {
   sendResetLinkError,
   ResetPasswordSuccess,
   ResetPasswordError,
+  updateProfileInitiated,
+  updateProfileSuccess,
 } from './actionCreators';
 
 import axiosInstance from '../config/axiosInstance';
@@ -173,3 +175,17 @@ export const resetPassword = (passwordDetails) => dispatch => {
       return toast.error('Connection Error', { autoClose: 3500, hideProgressBar: true });
     });
 };
+
+export const updateProfile = profileData => dispatch => {
+  dispatch(updateProfileInitiated());
+  return axiosInstance
+    .put('api/profiles/update/', profileData)
+    .then((response) => {
+      dispatch(updateProfileSuccess());
+      dispatch({ type: GET_PROFILE_PAYLOAD, payload: response.data.profile });
+      localStorage.setItem('username', response.data.profile.username);
+      toast.success('Profile update successful', { autoClose: 3500, hideProgressBar: true });
+    }).catch(() => {
+      toast.error('Profile update failed', { autoClose: 3500, hideProgressBar: true });
+    });
+};

src/components/profiles/EditProfile.js

@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import EditProfileForm from './EditProfileForm';
+import { updateProfile } from '../../actions/userActions';
+
+class EditProfile extends Component {
+  constructor(props) {
+    super(props);
+    const { username, bio } = this.props;
+    this.state = {
+      username,
+      bio,
+    };
+  }
+
+  handleSubmit = event => {
+    event.preventDefault();
+    const { avatar } = this.props;
+    const { username, bio } = this.state;
+    const profileData = {
+      profile: {
+        username,
+        bio,
+        avatar,
+      },
+    };
+    const { updateProfile } = this.props;
+    updateProfile(profileData);
+  };
+
+  handleChange = event => {
+    const { name, value } = event.target;
+    this.setState({ [name]: value });
+  }
+
+  render() {
+    const { username, bio } = this.state;
+    return (
+      <div>
+        <EditProfileForm
+          handleSubmit={this.handleSubmit}
+          handleChange={this.handleChange}
+          username={username}
+          bio={bio}
+        />
+      </div>
+    );
+  }
+}
+
+EditProfile.propTypes = {
+  username: PropTypes.string,
+  bio: PropTypes.string,
+  avatar: PropTypes.string,
+  updateProfile: PropTypes.func.isRequired,
+};
+EditProfile.defaultProps = {
+  username: '',
+  bio: '',
+  avatar: '',
+};
+
+const mapStateToProps = state => ({
+  profileUpdateSuccessful: state.user.profileUpdateSuccessful,
+});
+
+export { EditProfile as EditProfileTest };
+export default connect(mapStateToProps, { updateProfile })(EditProfile);

src/components/profiles/EditProfileForm.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const EditProfileForm = (props) => {
+  const {
+    username, bio, handleChange, handleSubmit,
+  } = props;
+  return (
+    <div className="container">
+      <div className="row">
+        <div className="modal fade" id="editProfileModal" role="dialog" aria-hidden="true" style={{ marginTop: 100 }}>
+          <div className="modal-dialog" role="document">
+            <div className="modal-content">
+              <div className="modal-header">
+                <h5 className="modal-title" id="editProfileModal">
+                  Personal information
+                </h5>
+                <button type="button" className="close" data-dismiss="modal" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+              </div>
+              <div className="modal-body">
+                <form onSubmit={handleSubmit} id="edit-profile-form">
+                  <div className="form-group">
+                    <label className="control-label" htmlFor="username">Username</label>
+                    <div className="input-group mb-2">
+                      <div className="input-group-prepend">
+                        <div className="input-group-text"><i className="fa fa-user" /></div>
+                      </div>
+                      <input type="text" name="username" className="form-control" id="username" value={username} onChange={handleChange} />
+                    </div>
+                  </div>
+                  <div className="form-group">
+                    <label className="control-label" htmlFor="bio">Bio</label>
+                    <div className="input-group mb-2">
+                      <textarea name="bio" className="form-control" id="bio" value={bio} onChange={handleChange} />
+                    </div>
+                  </div>
+                  <div className="modal-footer">
+                    <button type="button" className="btn btn-danger" data-dismiss="modal">Cancel</button>
+                    <button type="submit" className="btn btn-outline-primary">Save changes</button>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+EditProfileForm.propTypes = {
+  username: PropTypes.string.isRequired,
+  bio: PropTypes.string.isRequired,
+  handleChange: PropTypes.func.isRequired,
+  handleSubmit: PropTypes.func.isRequired,
+};
+
+export default EditProfileForm;

src/components/profiles/Profile.js

@@ -7,6 +7,7 @@ import profileImage from '../../assets/images/profileImage.png';
 import { getProfile } from '../../actions/userActions';
 import { fetchUserArticles } from '../../actions/articleActions';
 import ArticlesList from '../Articles/ArticlesList';
+import EditProfile from './EditProfile';
 
 export class Profile extends Component {
   componentDidMount() {
@@ -25,7 +26,7 @@ export class Profile extends Component {
   render() {
     const {
       loading, profilePayload: {
-        followers, following, username, bio,
+        followers, following, username, bio, avatar,
       }, userArticlesPayload,
     } = this.props;
 
@@ -71,7 +72,12 @@ export class Profile extends Component {
                     </div>
                     <div className="row">
                       <div className="col-12">
-                        <button type="button" className="btn ah-btn">Edit</button>
+                        <button type="button" className="btn-edit" data-toggle="modal" data-target="#editProfileModal">Edit</button>
+                        <EditProfile
+                          username={username}
+                          bio={bio}
+                          avatar={avatar}
+                        />
                       </div>
                     </div>
                   </div>

src/reducers/userReducer.js

@@ -7,6 +7,8 @@ import {
   SOCIAL_LOGIN_SUCCESS,
   GET_PROFILE_PAYLOAD,
   GET_PROFILE_INITIATED,
+  UPDATE_PROFILE_INITIATED,
+  UPDATE_PROFILE_SUCCESS,
   LOGOUT_USER,
   SEND_RESET_LINK_INITIATED,
   SEND_RESET_LINK_SUCCESS,
@@ -27,6 +29,7 @@ const initialState = {
   sendLinkError: {},
   resetPasswordSuccess: false,
   resetPasswordError: {},
+  profileUpdateSuccessful: false,
 };
 
 
@@ -76,6 +79,17 @@ const userReducer = (state = initialState, action) => {
         ...state,
         loading: action.payload,
       };
+    case UPDATE_PROFILE_INITIATED:
+      return {
+        ...state,
+        loading: true,
+      };
+    case UPDATE_PROFILE_SUCCESS:
+      return {
+        ...state,
+        loading: false,
+        profileUpdateSuccessful: true,
+      };
     case LOGOUT_USER:
       return {
         ...state,

src/tests/actions/userActions.test.js

@@ -9,6 +9,7 @@ import {
   facebookLoginUser,
   getProfile,
   updateLoginStatus,
+  updateProfile,
 } from '../../actions/userActions';
 import {
   REGISTER_USER_SUCCESS,
@@ -19,6 +20,8 @@ import {
   SOCIAL_LOGIN_SUCCESS,
   GET_PROFILE_PAYLOAD,
   GET_PROFILE_INITIATED,
+  UPDATE_PROFILE_INITIATED,
+  UPDATE_PROFILE_SUCCESS,
 } from '../../actions/types';
 import axiosInstance from '../../config/axiosInstance';
 
@@ -255,4 +258,59 @@ describe('userAction', () => {
       ],
     );
   });
+  it('should update the profile', () => {
+    const profileData = {
+      profile: {
+        username: 'userTwo',
+        bio: 'updated bio',
+        avatar: 'https://pixabay.com/en/user-person-people-profile-account-1633249/',
+        following: ['userOne'],
+        followers: ['userOne'],
+      },
+    };
+    const expectedActions = [
+      { type: UPDATE_PROFILE_INITIATED },
+      { type: UPDATE_PROFILE_SUCCESS },
+      { type: GET_PROFILE_PAYLOAD },
+    ];
+    const response = {
+      profile: {
+        username: 'user1',
+        bio: 'My bio',
+        avatar: 'https://pixabay.com/en/user-person-people-profile-account-1633249/',
+      },
+    };
+    mock.onPut('https://ah-backend-targaryen-staging.herokuapp.com/api/profiles/update/', profileData)
+      .reply(200, response);
+    store.dispatch(updateProfile(profileData))
+      .then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+  });
+  it('should should not update profile if there is an error', () => {
+    const profileData = {
+      profile: {
+        username: 'user1',
+        bio: 'My bio',
+        avatar: 'https://pixabay.com/en/user-person-people-profile-account-1633249/',
+        following: ['user2'],
+        followers: ['user2'],
+      },
+    };
+    const expectedActions = [
+      { type: UPDATE_PROFILE_INITIATED },
+    ];
+    const response = {
+      profile: {
+        username: 'user1',
+        bio: 'My bio',
+      },
+    };
+    mock.onPut('https://ah-backend-targaryen-staging.herokuapp.com/api/profiles/update/', profileData)
+      .reply(400, response);
+    store.dispatch(updateProfile(profileData))
+      .then(() => {
+        expect(store.getActions()).toEqual(expectedActions);
+      });
+  });
 });

src/tests/components/EditProfile.test.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import { EditProfileTest } from '../../components/profiles/EditProfile';
+
+const middlewares = [thunk];
+const mockStore = configureMockStore(middlewares);
+describe('EditProfile component', () => {
+  let wrapper;
+  const props = {
+    username: 'testuser',
+    bio: 'bio',
+    avatar: 'avatar',
+    updateProfile: jest.fn(),
+    handleChange: jest.fn(),
+  };
+
+  const getEvent = (name = '', value = '') => ({
+    preventDefault: jest.fn(),
+    target: {
+      name,
+      value,
+    },
+  });
+
+  beforeEach(() => {
+    const store = mockStore({ intitialState: {} });
+    wrapper = shallow(<EditProfileTest {...props} store={store} />);
+  });
+
+  it('should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+  it('should call updateProfile when handleSubmit is called', () => {
+    wrapper.instance().handleSubmit(getEvent());
+    expect(props.updateProfile).toBeCalled();
+  });
+  it('should set state when handleChange event is called', () => {
+    wrapper.instance().handleChange(getEvent('username', 'testuser'));
+    expect(wrapper.state().username).toEqual('testuser');
+  });
+});