diff --git a/package.json b/package.json index 936c705..934ea27 100755 --- a/package.json +++ b/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", diff --git a/src/main/webapp/app/pages/profile/profile-card.tsx b/src/main/webapp/app/pages/profile/profile-card.tsx index 02e6219..46d04ba 100755 --- a/src/main/webapp/app/pages/profile/profile-card.tsx +++ b/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,6 +85,7 @@ export class ProfileCard extends React.Component { + console.log('handleSelectFile => ', this.state); this.selectFileRef.current.click(); }; @@ -91,8 +93,11 @@ export class ProfileCard extends React.Component { - 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 +
@@ -132,10 +138,10 @@ export class ProfileCard extends React.Component ({ account: storeState.authentication.account, - isAuthenticated: storeState.authentication.isAuthenticated + isAuthenticated: storeState.authentication.isAuthenticated, + imageUploadSuccess: storeState.authentication.imageUploadSuccess }); const mapDispatchToProps = { getSession, updateUser, uploadFile }; diff --git a/src/main/webapp/app/shared/reducers/authentication.ts b/src/main/webapp/app/shared/reducers/authentication.ts index 3ff1efa..b30af2c 100755 --- a/src/main/webapp/app/shared/reducers/authentication.ts +++ b/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; @@ -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()); };