profile->login

package-lock.json

@@ -2734,7 +2734,7 @@
     },
     "camelcase-keys": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
       "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
       "requires": {
         "camelcase": "^2.0.0",
@@ -5731,8 +5731,7 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -6084,8 +6083,7 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -6132,7 +6130,6 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6171,13 +6168,11 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "yallist": {
           "version": "3.0.2",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         }
       }
     },
@@ -6232,7 +6227,7 @@
         },
         "string-width": {
           "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "resolved": "http://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "requires": {
             "code-point-at": "^1.0.0",
@@ -8851,7 +8846,7 @@
     },
     "meow": {
       "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+      "resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
       "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
       "requires": {
         "camelcase-keys": "^2.0.0",
@@ -9187,7 +9182,7 @@
       "dependencies": {
         "semver": {
           "version": "5.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
           "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8="
         }
       }
@@ -9291,7 +9286,7 @@
         },
         "chalk": {
           "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
           "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
           "requires": {
             "ansi-styles": "^2.2.1",
@@ -15022,7 +15017,7 @@
         },
         "os-locale": {
           "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+          "resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
           "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
           "requires": {
             "lcid": "^1.0.0"
@@ -15030,7 +15025,7 @@
         },
         "string-width": {
           "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "resolved": "http://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "requires": {
             "code-point-at": "^1.0.0",
@@ -15185,7 +15180,7 @@
       "dependencies": {
         "source-map": {
           "version": "0.4.4",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "resolved": "http://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
           "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
           "requires": {
             "amdefine": ">=0.0.4"
@@ -16035,7 +16030,7 @@
     },
     "tar": {
       "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
+      "resolved": "http://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
       "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
       "requires": {
         "block-stream": "*",

src/actions/user/changelogin.js

@@ -0,0 +1,17 @@
+import * as actionTypes from './../../constants/user';
+
+export const changeLoginRequest = payload => {
+    console.log('Inside the changeLogin action', payload);
+    return {
+        type: actionTypes.CHANGE_LOGIN_REQUEST,
+        payload
+    };
+}
+export const changeLoginSuccess = payload => ({
+    type: actionTypes.CHANGE_LOGIN_REQUEST_SUCCESS,
+    payload
+});
+export const changeLoginFailure = error => ({
+    type: actionTypes.CHANGE_LOGIN_REQUEST_FAILURE,
+    error
+});

src/components/user/ProfilePage/ChangeLoginForm/index.js

@@ -6,13 +6,33 @@ import formInput from '../../../common/formInput';
 
 class ChangeLoginForm extends React.Component {
 
+    submit = ({ name}) => {
+        const {actions:{changeLoginRequest},data:{_id},token } = this.props
+        console.log(_id, name,token);
+
+        changeLoginRequest({
+            token,
+           _id,
+            name
+        })
+        
+    }
+
     render() {
-        // const { children, handleSubmit, handlers: { handleClick, submit } } = this.props;
+        const { children, handleSubmit, actions:{changeLoginRequest}, handlers: {  handleClick }, data, token } = this.props;
+        const { submit}=this
+        console.log( data)
         return (
-            <form  >
-                <Field name="login" type="email" placeholder="Enter new login" component={formInput} />
+            <form onSubmit={handleSubmit(submit)} >
+                <Field name="name" type="email" placeholder="Enter new login" component={formInput} />
                 <button
-                    type="button" className="link link--btn right" >
+                    type="button" className="link link--btn right"  onClick={
+                        function() {
+                        handleClick();
+                            handleSubmit(submit)();
+                        }    
+                    
+                    }>
                     Change
                 </button>
             </form >

src/components/user/ProfilePage/index.js

@@ -1,19 +1,10 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux'
- import ChangeLoginForm from './ChangeLoginForm/index';
+import ChangeLoginForm from './ChangeLoginForm/index';
+import {changeLoginRequest} from '../../../actions/user/changelogin'
+
 
-const user = {
-    "data": {
-        "_id": "5c48461c40ca670017ba5974",
-        "name": "Debil",
-        "email": "superus@lol.com",
-        "password": "$2a$10$qoxrQ2Sp3BDTLa9Xdc0ZPuLVHamipMQRWxeWxw1RwthICnbPoFLvC",
-        "profilePhoto": "",
-        "role": 0
-    },
-    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVjNDg0NjFjNDBjYTY3MDAxN2JhNTk3NCIsInJvbGUiOjAsImlhdCI6MTU0ODI1NTczMiwiZXhwIjoxNTQ4MzQyMTMyfQ.RAIiCLjBJ2u1VEQWy1oUgPjHj0dZRG27l0J3c8FDss0"
-}
 
 class ProfilePage extends React.Component {
     state={
@@ -25,43 +16,54 @@ class ProfilePage extends React.Component {
     }
 
     render() {
-        const { users, userChangeRequest, passwordChangeRequest } = this.props;
-        const { data } = user;
+        const { signIn:{data, token}, changeLoginRequest, changeLogin} = this.props;
+        console.log(changeLogin)
         const {clicked} =this.state;
+        const {handleClick} = this;
 
         return (
             <div className="page page--bottom-only profile-page">
-                <section className="border bg-autumn-foliage m-5 rounded d-flex">
+                <div className="border bg-autumn-foliage m-5 rounded d-flex">
+                    <div>
+                <h5 className="p-2 font-po-bold flex-fill bd-highlight align-self-end">{data.name}</h5>
+                <div className="d-flex"  >
+                <p className="p-2 flex-fill font-po-bold bd-highlight align-self-end">Email</p><p className="p-2 flex-fill font-po-bold bd-highlight align-self-end">{data.email}</p>
+                </div>
+                <div className="d-flex"  >
+                <p className="p-2 flex-fill font-po-bold bd-highlight align-self-end">Role</p><p className="p-2 flex-fill font-po-bold bd-highlight align-self-end">{data.role}</p>
+                </div>
+                
                     <div>
                         <img className="m-4 " src=" https://cdn.iconscout.com/icon/free/png-256/avatar-373-456325.png" ></img>
                     </div>
+                    </div>
                     <div className="border-left bg-autumn-foliage m-5 rounded w-75 ">
                             {!clicked
                             ?
                         <div  className ="d-flex mb-3" >
                             <h3 className = " p-2 flex-fill bd-highlight">Name</h3>
                             <h5 className="p-2 font-po-bold flex-fill bd-highlight align-self-end">{data.name}</h5>
-                            <button type="button" onClick ={this.handleClick} className=" flex-fill bg-shadow btn btn-outline-light col-3">Change</button>
+                            <button type="button" onClick ={handleClick}  className=" flex-fill bg-shadow btn btn-outline-primary col-3">Change</button>
                         </div>
                         :
                         <div>
                         <h3 className = " p-2 flex-fill bd-highlight">Name</h3>
                         <h5 className="p-2 font-po-bold flex-fill bd-highlight align-self-end">{data.name}</h5>
-                        <ChangeLoginForm> </ChangeLoginForm>
+                        <ChangeLoginForm data ={data} token={token} actions ={{changeLoginRequest}} handlers={{ handleClick}}> </ChangeLoginForm>
                         </div>
                             }
                         <div  className ="d-flex mb-3" >
                             <h3 className = "p-2 flex-fill bd-highlight">Email</h3>
                             <h5 className="p-2 flex-fill font-po-bold bd-highlight align-self-end">{data.email}</h5>
-                            <button type="button" className=" flex-fill bg-shadow btn btn-outline-light col-3">Change</button>
+                            <button type="button" className=" flex-fill bg-shadow btn btn-outline-primary col-3">Change</button>
                         </div>
                         <div  className ="d-flex mb-3" >
                             <h3 className = "p-2 flex-fill bd-highlight">Password</h3>
-                            <button type="button" className=" flex-fill bg-shadow btn btn-outline-light col-3">Change</button>
+                            <button type="button" className=" flex-fill bg-shadow btn btn-outline-primary col-3">Change</button>
                         </div>
                  
                     </div>
-                </section>
+                </div>
                 <section className="container section section--stats">
                     <div className="section__element section__element--">
                         <h3>Member Since</h3>
@@ -82,7 +84,8 @@ class ProfilePage extends React.Component {
                         </p>
                     </div>
                 </section>
-            </div>
+                </div>
+            
         )
     }
 
@@ -90,10 +93,10 @@ class ProfilePage extends React.Component {
 
 const
     mapStateToProps = state => ({
-        user: state.user,
-        users: state.users
+        signIn: state.signIn,
+        changeLogin: state.changeLogin
     });
 
-const mapDispatchToProps = dispatch => bindActionCreators({}, dispatch);
+const mapDispatchToProps = dispatch => bindActionCreators({changeLoginRequest}, dispatch);
 
 export default connect(mapStateToProps, mapDispatchToProps)(ProfilePage);

src/constants/user.js

@@ -0,0 +1,4 @@
+export const USER_URL = 'https://test-app-a-level.herokuapp.com/users/'; 
+export const CHANGE_LOGIN_REQUEST = 'CHANGE_LOGIN_REQEST';
+export const CHANGE_LOGIN_REQUEST_SUCCESS = 'CHANGE_LOGIN_REQUEST_SUCCESS';
+export const CHANGE_LOGIN_REQUEST_FAILURE = 'CHANGE_LOGIN_REQUEST_FAILURE';

src/reducers/index.js

@@ -1,9 +1,12 @@
 import { combineReducers } from 'redux';
 import { reducer as form } from 'redux-form';
 
-import signIn from './auth/signIn'
+import signIn from './auth/signIn';
+import chageLoginReducer from './user/chageLogin';
 
 export default combineReducers({
+
     signIn,
+    chageLoginReducer,
     form
 })

src/reducers/initialState.js

@@ -9,5 +9,10 @@ export default {
         isFetching: false,
         data: null,
         error: null
+    },
+    changeLogin:{
+        isFetching: false,
+        data: null,
+        error: null
     }
 }

src/reducers/user/chageLogin.js

@@ -0,0 +1,36 @@
+import * as actionTypes from './../../constants/user';
+import initialState from './../initialState';
+
+export default function chageLoginReducer(state = initialState.changeLogin, {  type, payload }) {
+    switch (type) {
+        case actionTypes.CHANGE_LOGIN_REQUEST: {
+            console.log(payload)
+            return {
+                ...state,
+                isFetching: true,
+                payload
+            }
+        }
+        case actionTypes.CHANGE_LOGIN_REQUEST_SUCCESS: {
+            const { name } = payload;
+
+            return {
+                ...state,
+                isFetching: false,
+                data:name
+            }
+        }
+        case actionTypes.CHANGE_LOGIN_REQUEST_FAILURE: {
+            const { error } = payload;
+
+            return {
+                ...state,
+                isFetching: false,
+                error
+            }
+        }
+        default: {
+            return state;
+        }
+    }
+}

src/sagas/index.js

@@ -1,6 +1,8 @@
 import { fork } from "redux-saga/effects";
 import auth from './auth'
+import user from './user/index'
 
 export default function*() {
-    yield fork(auth)
+    yield fork(user);
+    yield fork(auth);
 }

src/sagas/user/changeLogin.js

@@ -0,0 +1,27 @@
+import { put, call } from 'redux-saga/effects';
+import axios from 'axios';
+
+import { USER_URL } from './../../constants/user';
+import { changeLoginSuccess, changeLoginFailure } from './../../actions/user/changelogin'
+
+export default function* ({payload:{_id,name,token}}) {
+    console.log('User inside the worker-saga', _id,name,token);
+    try {
+        const config = {
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": `Bearer ${token}`
+            }
+        }
+
+        const user = yield call(() =>
+            axios.put(`${USER_URL}${_id}`,{name:name}, config)
+                .then(({ data }) => data)
+        )
+
+        yield put(changeLoginSuccess(user));
+    }
+    catch ({ message }) {
+        yield put(changeLoginFailure(message));
+    }
+}

src/sagas/user/index.js

@@ -0,0 +1,9 @@
+import changeLogin from './changeLogin';
+import * as actionTypes from './../../constants/user'
+
+import { takeEvery } from 'redux-saga/effects';
+
+export default function* () {
+    yield takeEvery(actionTypes.CHANGE_LOGIN_REQUEST, changeLogin)
+
+}