change and logit password

package.json

@@ -11,7 +11,9 @@
     "prop-types": "^15.6.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
+    "react-image": "^2.0.0",
     "react-loader-spinner": "^2.3.0",
+    "react-native": "^0.57.8",
     "react-redux": "^6.0.0",
     "react-router-dom": "^4.3.1",
     "react-scripts": "^2.1.3",

src/components/user-components/profilePage/LoginFild/index.js

@@ -13,7 +13,7 @@ export default class ChangeLogin extends React.Component {
 
     submit = ({ login }) => {
         console.log('handleSubmit->submit', this.props)
-        const { actions: { userChangeRequest }, user: { data: { id } } } = this.props;
+        const { actions: { userChangeRequest },  data: { id }  } = this.props;
 
         console.log('id', id);
 
@@ -38,7 +38,7 @@ export default class ChangeLogin extends React.Component {
                 (
                     <React.Fragment>
                         <div>{children}</div>
-                        <button onClick={handleClick}>Change Email</button>
+                        <button className="link link--btn right"onClick={handleClick}>Change Email</button>
                     </React.Fragment>
                 )
                 : (

src/components/user-components/profilePage/LoginFild/loginChangeForm/index.js

@@ -13,7 +13,7 @@ class ChangeLoginForm extends React.Component {
             <form onSubmit={handleSubmit(submit)} >
                 <Field name="login" type="email" placeholder="Enter new login" component={formInput} />
                 <button
-                    type="button"
+                    type="button" className="link link--btn right"
                     onClick={
                         function() {
                             handleClick();

src/components/user-components/profilePage/PasswordFields/PasswordChangeForm/index.js

@@ -13,7 +13,7 @@ class ChangePasswordForm extends React.Component {
             <form onSubmit={handleSubmit(submit)} >
                 <Field name="passwordConfirmation" type="password" placeholder="Enter password" component={formInput} />
                 <Field name="password" type="password" placeholder="Enter new password" component={formInput} />
-                <button onClick={handleClick}>Change</button>
+                <button className="link link--btn right" onClick={function(){handleSubmit(submit)}}>Change</button>
             </form >
         )
     }

src/components/user-components/profilePage/PasswordFields/index.js

@@ -7,12 +7,12 @@ import ChangePasswordForm from './PasswordChangeForm'
 export default class ChangePassword extends React.Component {
 
     state = {
-        clicked: false,
+        clicked: false
     }
     
     submit = ({ password }) => {
         console.log('handleSubmit->submit', this.props)
-        const { actions: { passwordChangeRequest }, user: { data: { id } } } = this.props;
+        const { actions: { passwordChangeRequest },  data: { id } }  = this.props;
 
         console.log('id', id);
 
@@ -37,7 +37,7 @@ export default class ChangePassword extends React.Component {
                 (
                     <React.Fragment>
                         <div>{children}</div>
-                        <button onClick={handleClick}>Change password</button>
+                        <button className="link link--btn right" onClick={handleClick}>Change password</button>
                     </React.Fragment>
                     
                 )

src/components/user-components/profilePage/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { AppRegistry, View, Image } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux'
 // import {} from './../../../actions'
@@ -48,7 +49,7 @@ class profilePage extends React.Component {
 
 
     render() {
-        const { user, userChangeRequest } = this.props;
+        const { user:{data}, userChangeRequest,passwordChangeRequest } = this.props;
 
         // console.log('User', user);
         // console.log('Props', this.props);
@@ -57,33 +58,32 @@ class profilePage extends React.Component {
         return (
             <div className="page page--bottom-only profile-page">
                 <section className="container section section--about">
-                    <button onClick={this.lol}>adlkasjdakl</button>
-                    <h2 className="section__element section__element--header">{user.login}</h2>
-                    <img className="section__element section__element--image" src={user.avatar} alt="avatar" />
+                    {/* <h2 className="section__element section__element--header">{data.login}</h2> */}
+        
                     <div className="sedtion__element section__element--login">
-                        <h3>Login</h3>
+                        <h3>Email</h3>
                         {/* <p>{user.login}<button className="link link--btn right" >Change login</button></p> */}
-                        <ChangeLogin className="link link--btn right" user={user} actions={{ userChangeRequest }}>{user.login}</ChangeLogin>
+                        <ChangeLogin className="link link--btn right" data={data} actions={{ userChangeRequest }}>{data.login}</ChangeLogin>
                     </div>
                     <div className="section__element section__element--">
                         <h3>Password</h3>
-                        <ChangePassword className="link link--btn right" user={user} actions={{ passwordChangeRequest }}>{user.password}</ChangePassword>
+                        <ChangePassword className="link link--btn right" data={data} actions={{ passwordChangeRequest }}>{data.password}</ChangePassword>
                     </div>
                     <div className="section__element section__element--">
                         <h3>Status</h3>
-                        <p>{user.description}</p>
+                        <p>{data.description}</p>
                     </div>
                 </section>
                 <section className="container section section--stats">
                     <div className="section__element section__element--">
                         <h3>Member Since</h3>
-                        <p>{new Date(user.createdAt).toLocaleString()}</p>
+                        <p>{new Date(data.createdAt).toLocaleString()}</p>
                     </div>
                     <div className="section__element section__element--comments">
                         <h3>Last comments</h3>
                         <p className="comments-block">
                             {
-                                user.comments && user.comments
+                                data.comments && data.comments
                                     .slice(0, 60)
                                     .map(el =>
                                         <p>

src/reducers/initialState/index.js

@@ -3,7 +3,7 @@ export default {
         data: null,
         error: null,
         isFetching: null,
-        isAdmin: null
+
     },
     changeEmail: {
         login: null

src/saga/index.js

@@ -1,13 +1,12 @@
 import { fork } from "redux-saga/effects";
 import auth from './auth'
 import userFields from './userFields/index';
-import changePassworde from './userFields/index'
 
 
 export default function*() {
     yield [
         fork(auth),
         fork(userFields),
-        fork(changePassworde)
+        
     ];
 }

src/saga/userFields/changeEmail/index.js

@@ -10,7 +10,7 @@ export default function* ({payload}) {
             axios.put(`${USERS_CHANGE_URL}${payload.id}`, payload.login)
                 .then(({ data }) => data)
         );
-        yield put(actions.userChangeRequestSucces(payload));
+        yield put(actions.userChangeRequestSucces(payloads));
     }
     catch ({ message }) {
         yield put(actions.userChangeRequestFailure(message))

src/saga/userFields/changePassword/index.js

@@ -3,11 +3,13 @@ import * as actions from './../../../actions/userFields/changePassword'
 import axios from 'axios';
 import { USERS_CHANGE_URL } from '../../../constants/index'
 
-export default function* ({payload}) {
+export default function* ({payload:{id , password}}) {
     try {
-        console.log("payload inside the saga", payload);
+        console.log("payload inside the saga", password);
         const payloads = yield call(() =>
-            axios.put(`${USERS_CHANGE_URL}${payload.id}`, payload.password)
+            axios.put(`${USERS_CHANGE_URL}${id}`, {password:password,
+            },{headers: { "Access-Control-Allow-Origin": "*", } }
+            )
                 .then(({ data }) => data)
         );
         yield put(actions.passwordChangeRequestSucces(payloads));