add user info

src/App.js

@@ -24,19 +24,19 @@ export class App extends React.Component {
 
        if(localStorage.getItem('userId')) this.props.getUser()
 
-        // fetch ("https://api-clinics.herokuapp.com/api/v1/auth/login", {
-        //     method : "POST",
-        //     credentials: "include",
-        //     headers: {
-        //         "Content-Type": "application/json"
-        //     },
-        //     body: JSON.stringify ({
-        //         email: "test@test.com",
-        //         password: "qwerty"
-        //     })
-        // })
-        //     .then (res => res.json ())
-        //     .then (res => console.log (res))
+        fetch ("https://api-clinics.herokuapp.com/api/v1/auth/login", {
+            method : "POST",
+            credentials: "include",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify ({
+                email: "test@test.com",
+                password: "qwerty"
+            })
+        })
+            .then (res => res.json ())
+            .then (res => console.log (res))
     }
 
     render() {

src/actions/auth.js

@@ -95,3 +95,10 @@ export const userLogout = payload => ({
     type: types.USER_LOGOUT,
     payload
 })
+
+export const changeInputValueUserUserForm = payload => (
+    {
+        type:types.CHANGE_INPUT_VALUE_USER_USER_FORM,
+        payload
+    }
+)

src/actions/user.js

@@ -70,22 +70,28 @@ export const deleteUser = (payload) => dispatch => {
 
 
 const putUserRequest = payload => ({
-    type: types.DELETE_DOCTORS_REQUEST,
+    type: types.PUT_USER_REQUEST,
     payload
 });
 
 const putUserRequestSuccess = payload => ({
-    type: types.DELETE_DOCTORS_REQUEST_SUCCESS,
+    type: types.PUT_USER_REQUEST_SUCCESS,
     payload
 });
 
+const changeDataInCurrentUser = payload => ({
+    type: types.CHANGE_DATA_IN_CURRENT_USER,
+    payload
+})
+
 const putUserRequestFail = payload => ({
-    type: types.DELETE_DOCTORS_REQUEST_FAIL,
+    type: types.PUT_USER_REQUEST_FAIL,
     payload
 });
 
 export const putUser = (payload) => dispatch => {
     dispatch(putUserRequest());
+   
     return fetch(`${URL}${payload.path}`, {
         method: "PUT",
         credentials: "include",
@@ -96,5 +102,6 @@ export const putUser = (payload) => dispatch => {
     })
         .then(res => res.json())
         .then(res => dispatch(putUserRequestSuccess(res)))
+        .then(dispatch(changeDataInCurrentUser(payload.data)))
         .catch(err => dispatch(putUserRequestFail(err)));
 };

src/actionsTypes/actionsTypes.js

@@ -3,6 +3,8 @@ export const FIND_USER_REQUEST_SUCCESS = "FIND_USER_REQUEST_SUCCESS";
 export const FIND_USER_REQUEST_FAIL = "FIND_USER_REQUEST_FAIL";
 export const CHANGE_INPUT_VALUE_FIND_USER = "CHANGE_INPUT_VALUE_FIND_USER";
 export const CHANGE_INPUT_VALUE_USER_FORM= "CHANGE_INPUT_VALUE_USER_FORM";
+export const CHANGE_INPUT_VALUE_USER_USER_FORM = "CHANGE_INPUT_VALUE_USER_USER_FORM"
+export const CHANGE_DATA_IN_CURRENT_USER = "CHANGE_DATA_IN_CURRENT_USER"
 
 export const GET_DOCTORS_REQUEST = "GET_DOCTORS_REQUEST";
 export const GET_DOCTORS_REQUEST_SUCCESS = "GET_DOCTORS_REQUEST_SUCCESS";

src/components/user.js

@@ -1,19 +0,0 @@
-import React from 'react';
-
-class User extends React.Component {
-    state = {  }
-    render() { 
-        return ( 
-        <div className = "main">
-            <div className="info-wrap">
-                <h2>User Name</h2>
-                <div classdescription = "reviews-container">
-                    <p>Это страница авторизованого пользователя</p>
-                </div>
-            </div>
-        </div>
-        );
-    }
-}
- 
-export default User;

src/components/userInfo.js

@@ -1,25 +1,36 @@
 import React from 'react';
-// import Input from './Admin/Input'
+import Input from './Admin/Input'
 
 
 class UserInfo extends React.Component {
 
-    changeItem = (e) => {
- 
-    }
+    changeUser = (e) => {
+        e.preventDefault();
+        const obj = {};
+        this.props.changeUserUserForm.map(el => {
+           return  obj[el.name] =  el.value
+        });
+        // console.log(obj)
+        // console.log(this.props.user._id)
+        this.props.putUser({data:obj,path:this.props.user._id})
+    };
     render() { 
-        const { } = this.props
-        // console.log('putItem', putItem)
+        const { changeUserUserForm, changeInputValueUserUserForm} = this.props
+        console.log('user',this.props.user)
+        console.log('form', changeUserUserForm)
         return ( 
             <div>
                 <div className="admin-item">
-                    <form className="form-doctors" onSubmit={this.changeItem}>
-               <div>Change user</div>
-                        <input className="btn link"
-                               type='submit'
-                               value= 'Изменить'
-                        />
+                    <form className="form-doctors" >
+               {changeUserUserForm.map(el =>
+                <Input
+                key={el.id}
+                el={el}
+                changeInputValues={changeInputValueUserUserForm}
+                className={el.className}
+            /> )}
                     </form>
+                    <button onClick={this.changeUser} className="btn link admin">Изменить</button>
                 </div>
             </div>
         );

src/containers/user.js

@@ -7,6 +7,8 @@ import UserInfo from '../components/userInfo'
 import UserOrders from '../components/userOrders'
 
 import { getOrders,getUserOrders } from "../actions/orders"
+import { changeInputValueUserUserForm } from '../actions/auth'
+import {putUser} from '../actions/user'
 
 class UserContainer extends Component {
 
@@ -15,20 +17,14 @@ class UserContainer extends Component {
         this.props.getUserOrders(this.props.currentUser)
        
     }
-   
-    // componentDidUpdate(){
-        
-    //     // orders ? action(currentUser) : null
-    // }
 
     render() { 
         // const {currentUser, dataOrders, getUserOrders} = this.props
-        const { currentUser } = this.props
-        // console.log('user',currentUser)
-        // console.log('Orders',dataOrders)
+        const { currentUser,changeUserUserForm, changeInputValueUserUserForm,putUser } = this.props
         return (
             <div className="main">
                 <div className="info-wrap">
+                <h2>Добро пожаловать в личный кабинет, {currentUser.firstName}!</h2>
                  <div className="btn-box">
                     <Link to='/user/orders' className = "btn link admin" >Мои заказы</Link>
                     <Link to='/user/info' className = "btn link admin">Редактировать профиль</Link>
@@ -37,6 +33,9 @@ class UserContainer extends Component {
                     <Route path='/user/orders' component={ UserOrders } />
                     <Route path='/user/info' render={() => <UserInfo
                             user={currentUser}
+                            changeUserUserForm = {changeUserUserForm}
+                            changeInputValueUserUserForm={changeInputValueUserUserForm}
+                            putUser= {putUser}
                         />} />
                  </Switch>
                 </div>
@@ -50,7 +49,7 @@ const mapStateToProps = state => {
     return {
         currentUser: state.auth.user,
         dataOrders: state.orders,
-        changeUserForm: state.auth.changeUserForm
+        changeUserUserForm: state.auth.changeUserForm
     }
 }
-export default connect(mapStateToProps, { getOrders,getUserOrders })(UserContainer);
+export default connect(mapStateToProps, { getOrders,getUserOrders, changeInputValueUserUserForm, putUser })(UserContainer);

src/reducers/auth.js

@@ -1,8 +1,10 @@
 import * as types from '../actionsTypes/actionsTypes'
+import { changeUserForm } from '../utils/formFields'
 
 const initialState = {
     user:{},
     isFetching: false,
+    changeUserForm:changeUserForm,
     error:null,
     successRegister: null,
 }
@@ -40,12 +42,54 @@ export default (state = initialState, action) => {
         }
 
         case types.GET_USER_REQUEST_SUCCESS: {
-            return {...state,isFetching: false, user: action.payload.user}
+            const data = action.payload.user
+            return {
+                ...state,
+                isFetching: false,
+                user: action.payload.user,
+                changeUserForm: state.changeUserForm.map(el => Object.keys(data).find(item => item === el.name) ? {
+                    ...el,
+                    value: data[`${el.name}`]
+                    } :
+                    el)
+                }
         }
 
         case types.USER_LOGOUT: {
             return { ...state, user: initialState.user}
         }
+
+        case types.CHANGE_INPUT_VALUE_USER_USER_FORM : {
+            const data = action.payload.target;
+            return {
+                ...state,
+                changeUserForm: state.changeUserForm.map(el => el.name === data.name ? 
+                    {
+                        ...el,
+                        value: data.value
+                    }:
+                    el
+                )
+            }
+        }
+
+        case types.CHANGE_DATA_IN_CURRENT_USER: {           
+            Object.keys(state.user).map(el => 
+                Object.keys(action.payload).map(item => {
+                if(item === el){
+                    return {
+                        ...state,
+                        user:{
+                            ...state.user,
+                            [el]:action.payload[el]
+                        }
+                    }   
+                }}
+            ))
+            return {
+                ...state     
+            }
+        }
         
         default:
              return state

src/reducers/orders.js

@@ -13,8 +13,7 @@ export default (state = initialState, action) => {
             return {...state, isFetching: true};
         }
 
-        case types.GET_ORDERS_REQUEST_SUCCESS: {
-            // console.log(action.payload)     
+        case types.GET_ORDERS_REQUEST_SUCCESS: { 
             return {...state, isFetching: false, orders: action.payload.orders};
         }
 
@@ -22,7 +21,7 @@ export default (state = initialState, action) => {
             // console.log(action.payload)
             // console.log(state.orders)
             const userOrdersArray = state.orders.filter(userOrder => userOrder.user === action.payload._id)
-            // console.log('arr',userOrdersArray)
+            console.log('userOrders',userOrdersArray)
             return  {...state, isFetching: false,}
         }
 

src/utils/formFields.js

@@ -232,6 +232,59 @@ export const postNewServiceForm =[
 	}
 ];
 
+export const changeUserForm = [
+	{
+		id:1,
+		type:'email',
+		value:"",
+		name:'email',
+		placeholder:'Введите E-mail',
+		readOnly:true,
+		required:true
+	},
+	{
+		id:2,
+		type:'text',
+		value:"",
+		name:'firstName',
+		placeholder:'Введите Имя',
+		required:true
+	},
+	{
+		id:3,
+		type:'text',
+		value:"",
+		name:'lastName',
+		placeholder:'Введите Фамилию',
+		required:true
+	},
+	{
+		id:4,
+		type:'number',
+		value:"",
+		name:'phone',
+		placeholder:'Введите ваш номер',
+		required:true
+	},
+	{
+		id:5,
+		type:'password',
+		value:"",
+		name:'password',
+		placeholder:'Введите новый пароль',
+		required:true
+	},
+	{
+		id:6,
+		type:'password',
+		value:"",
+		name:'confirmPassword',
+		placeholder:'Повторите пароль',
+		required:true
+	}
+	
+];
+
 export const adminChangeUserForm =[
 	{
 		id:1,