Merge pull request #117 from kyungseop/develop

#114 프로필 이미지 수정 에러

package.json

@@ -57,8 +57,8 @@
  "@types/jest": "23.3.1",
  "@types/lodash": "4.14.116",
  "@types/node": "10.9.2",
- "@types/react": "16.4.12",
- "@types/react-dom": "16.0.7",
+ "@types/react": "16.8.3",
+ "@types/react-dom": "16.8.3",
  "@types/react-redux": "6.0.6",
  "@types/react-router-dom": "4.3.0",
  "@types/redux": "3.6.31",

src/main/webapp/app/pages/profile/profile-card.tsx

@@ -8,6 +8,7 @@ import { getSession, updateUser, uploadFile } from 'app/shared/reducers/authenti
 import TextField from '@material-ui/core/TextField';
 import { connect } from 'react-redux';
 import _ from 'lodash';
+import { toast, ToastContainer } from 'react-toastify';
 
 const styles = theme =>
  createStyles({
@@ -84,15 +85,19 @@ export class ProfileCard extends React.Component<IProfileCardProp, IProfileCardS
  };
 
  handleSelectFile = () => {
+ console.log('handleSelectFile => ', this.state);
  this.selectFileRef.current.click();
  };
 
  onClose = () => {
  this.setState({ open: false });
  };
 
- saveCroppedImg = croppedImg => {
- this.props.uploadFile('1', this.props.account._id, croppedImg);
+ saveCroppedImg = async croppedImg => {
+ await this.props.uploadFile('1', this.props.account._id, croppedImg);
+ if (this.props.imageUploadSuccess) {
+ toast('이미지가 등록되었습니다.', { autoClose: 2000 });
+ }
  this.setState({ open: false, img: croppedImg });
  };
 
@@ -119,6 +124,7 @@ export class ProfileCard extends React.Component<IProfileCardProp, IProfileCardS
 
  return (
  <React.Fragment>
+ <ToastContainer/>
  <Card className={ classes.card }>
  <div className={ classes.avatarContainer }>
  <CardContent className={ classes.content }>
@@ -132,10 +138,10 @@ export class ProfileCard extends React.Component<IProfileCardProp, IProfileCardS
  <input type="file" ref={ this.selectFileRef } onChange={ this.onSelectFile }
  style={ { display: 'none' } }/>
  <Button
+ className={ classes.button }
  onClick={ this.handleSelectFile }
  variant="contained"
  color="default"
- className={ classes.button }
  > 이미지 수정
  </Button>
  <ProfileDialog onClose={ this.onClose }
@@ -187,7 +193,8 @@ export class ProfileCard extends React.Component<IProfileCardProp, IProfileCardS
 
 const mapStateToProps = storeState => ({
  account: storeState.authentication.account,
- isAuthenticated: storeState.authentication.isAuthenticated
+ isAuthenticated: storeState.authentication.isAuthenticated,
+ imageUploadSuccess: storeState.authentication.imageUploadSuccess
 });
 
 const mapDispatchToProps = { getSession, updateUser, uploadFile };

src/main/webapp/app/shared/reducers/authentication.ts

@@ -3,7 +3,7 @@ import { Storage } from 'react-jhipster';
 
 import { FAILURE, REQUEST, SUCCESS } from 'app/shared/reducers/action-type.util';
 
-import config, { API_PREFIX, URL_LOGIN, URL_USERS, GROUP_ID } from 'app/config/constants';
+import { API_PREFIX, GROUP_ID, URL_LOGIN, URL_USERS } from 'app/config/constants';
 
 export const ACTION_TYPES = {
  LOGIN: 'authentication/LOGIN',
@@ -29,7 +29,8 @@ const initialState = {
  errorMessage: null as string, // Errors returned from server side
  redirectMessage: null as string,
  sessionHasBeenFetched: false,
- image: null
+ image: null,
+ imageUploadSuccess: false
 };
 
 export type AuthenticationState = Readonly<typeof initialState>;
@@ -96,7 +97,7 @@ export default (state: AuthenticationState = initialState, action): Authenticati
  showModalLogin: true,
  isAuthenticated: false
  };
- case ACTION_TYPES.UPDATE_USER:
+ case SUCCESS(ACTION_TYPES.UPDATE_USER):
  return {
  ...state,
  account: {
@@ -105,12 +106,23 @@ export default (state: AuthenticationState = initialState, action): Authenticati
  email: action.payload.email
  }
  };
- case ACTION_TYPES.UPLOAD_FILE:
+ case REQUEST(ACTION_TYPES.UPLOAD_FILE):
  return {
- ...state
+ ...state,
+ imageUploadSuccess: false
+ };
+ case SUCCESS(ACTION_TYPES.UPLOAD_FILE):
+ return {
+ ...state,
+ imageUploadSuccess: true
+ };
+ case FAILURE(ACTION_TYPES.UPLOAD_FILE):
+ return {
+ ...state,
+ imageUploadSuccess: false
  };
  case SUCCESS(ACTION_TYPES.GET_AVATAR):
- console.log('ACTION_TYPES.GET_AVATAR =>', action.payload.response);
+ //console.log('ACTION_TYPES.GET_AVATAR =>', action.payload.response);
  return {
  ...state,
  image: action.payload.response
@@ -219,7 +231,7 @@ export const uploadFile = (groupId, userId, croppedImg) => async dispatch => {
  await dispatch({
  type: ACTION_TYPES.UPLOAD_FILE,
  payload: axios.put(`${API_PREFIX}/${groupId}${URL_USERS}/${userId}/avatar`, formData)
- // payload: axios.put(`${API_PREFIX}/${groupId}${URL_USERS}/${userId}/avatar`, formData, config)
  });
+
  dispatch(getSession());
 };