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

- 프로필 이미지 업데이트 성공 알림표시 기타 - react 관련 typescript 버전수정 (현재 사용중인 버전과 동기화)
kyungseop · Aug 28, 2019 · 04ba123 · 04ba123
1 parent 12e1c27
commit 04ba123
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 13 deletions.
diff --git 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
@@ -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 };

diff --git 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<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());
 };