src/App.js

@@ -25,19 +25,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

@@ -91,8 +91,14 @@ export const getUser = () => dispatch => {
         .catch(err => dispatch(getUserRequestFail(err)));
 };
 
-
 export const userLogout = payload => ({
     type: types.USER_LOGOUT,
     payload
 })
+
+export const changeInputValueUserUserForm = payload => (
+    {
+        type:types.CHANGE_INPUT_VALUE_USER_USER_FORM,
+        payload
+    }
+)

src/actions/orders.js

@@ -34,6 +34,11 @@ const getOrdersFail = payload => ({
     payload
 });
 
+export const getUserOrders = payload => ({
+    type: types.USER_ORDERS,
+    payload
+})
+
 export const getOrders = (payload) => dispatch => {
     dispatch(getOrdersRequest());
     return fetch(`${URL}`,{

src/actions/user.js

@@ -106,6 +106,11 @@ const putUserRequestSuccess = payload => ({
     payload
 });
 
+const changeDataInCurrentUser = payload => ({
+    type: types.CHANGE_DATA_IN_CURRENT_USER,
+    payload
+})
+
 const putUserRequestFail = payload => ({
     type: types.PUT_USER_REQUEST_FAIL,
     payload
@@ -113,6 +118,7 @@ const putUserRequestFail = payload => ({
 
 export const putUser = (payload) => dispatch => {
     dispatch(putUserRequest());
+   
     return fetch(`${URL}${payload.path}`, {
         method: "PUT",
         credentials: "include",
@@ -123,5 +129,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,13 +3,12 @@ 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 FIND_ORDERS_ARRAY = "FIND_ORDERS_ARRAY";
 export const CHANGE_INPUT_VALUE_FIND_ORDER = "CHANGE_INPUT_VALUE_FIND_ORDER";
 export const CHANGE_INPUT_VALUE_ORDER_FORM= "CHANGE_INPUT_VALUE_ORDER_FORM";
-export const GET_ORDERS_REQUEST = "GET_ORDERS_REQUEST";
-export const GET_ORDERS_REQUEST_SUCCESS = "GET_ORDERS_REQUEST_SUCCESS";
-export const GET_ORDERS_REQUEST_FAIL = "GET_ORDERS_REQUEST_FAIL";
 
 export const GET_USERS_REQUEST = "GET_USERS_REQUEST";
 export const GET_USERS_REQUEST_SUCCESS = "GET_USERS_REQUEST_SUCCESS";
@@ -100,6 +99,12 @@ export const CREATE_CALENDAR_MONTH_ARRAY= "CREATE_CALENDAR_MONTH_ARRAY";
 export const CHANGE_CALENDAR_MONTH= "CHANGE_CALENDAR_MONTH";
 export const RESET_CALENDAR_CURRENT= "RESET_CALENDAR_CURRENT";
 
+export const GET_ORDERS_REQUEST = "GET_ORDERS_REQUEST";
+export const GET_ORDERS_REQUEST_SUCCESS = "GET_ORDERS_REQUEST_SUCCESS";
+export const GET_ORDERS_REQUEST_FAIL = "GET_ORDERS_REQUEST_FAIL";
+export const USER_ORDERS = "USER_ORDERS"
+
+
 
 
 

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import Input from './Admin/Input'
+
+
+class UserInfo extends React.Component {
+
+    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 { changeUserUserForm, changeInputValueUserUserForm} = this.props
+        console.log('user',this.props.user)
+        console.log('form', changeUserUserForm)
+        return ( 
+            <div>
+                <div className="admin-item">
+                    <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>
+        );
+    }
+}
+ 
+export default UserInfo;

src/components/userOrders.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+
+class UserOrders extends Component {
+    render() { 
+        const { data } = this.props
+        console.log(data)
+        return ( <div>
+            {data.map(el =>  
+                     <div key={el._id}>
+                        <p>Номер заказа: {el.orderNumber}</p>
+                        <p>Дата заказа: {el.date.split('T')[0]}</p>
+                        <p>Время заказа: {el.time}</p>
+                        </div>)}
+        </div> );
+    }
+}
+ 
+export default UserOrders;

src/containers/user.js

@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+import {connect} from "react-redux";
+import {Link} from "react-router-dom";
+import {Switch, Route} from "react-router-dom";
+
+import UserInfo from '../components/userInfo'
+import UserOrders from '../components/userOrders'
+
+import { getUserOrders,getOrders } from "../actions/orders"
+import { changeInputValueUserUserForm } from '../actions/auth'
+import {putUser} from '../actions/user'
+
+class UserContainer extends Component {
+
+    componentDidMount() {
+        this.props.getOrders({
+            doctors: this.props.doctors,
+            services: this.props.services,
+            users: this.props.users})
+    }
+    // componentDidUpdate(){
+    //     if(this.props.orders.length > 0 &&) 
+    //     // console.log('did update', this.props.orders)
+    //      this.props.getUserOrders(this.props.currentUser)
+    // }
+    componentDidUpdate(prevProps) {
+        if(this.props.orders.length > 0 ) 
+            if(prevProps.orders !==  this.props.orders)
+            this.props.getUserOrders(this.props.currentUser)
+    }
+
+    render() { 
+        console.log(this.props.userOrdersArray)
+        const { currentUser,changeUserUserForm, changeInputValueUserUserForm,putUser,userOrdersArray } = 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>
+                 </div>
+                 <Switch>
+                    <Route path='/user/orders'  render={() => <UserOrders
+                           data={ userOrdersArray}
+                        />} />
+                    <Route path='/user/info' render={() => <UserInfo
+                            user={currentUser}
+                            changeUserUserForm = {changeUserUserForm}
+                            changeInputValueUserUserForm={changeInputValueUserUserForm}
+                            putUser= {putUser}
+                        />} />
+                 </Switch>
+                </div>
+            </div>
+
+              );
+    }
+}
+
+const mapStateToProps = state => {
+    return {
+        currentUser: state.auth.user,
+        changeUserUserForm: state.auth.changeUserForm,
+        orders: state.orders.orders,
+        users:state.user.users,
+        services: state.services.services,
+        doctors:state.app.doctors,
+        userOrdersArray: state.orders.userOrdersArray
+    }
+}
+export default connect(mapStateToProps, { changeInputValueUserUserForm, putUser, getOrders,getUserOrders })(UserContainer);

src/reducers/auth.js

@@ -1,10 +1,12 @@
 import * as types from '../actionsTypes/actionsTypes'
+import { changeUserForm } from '../utils/formFields'
 
 const initialState = {
     user:{},
     isFetching: false,
+    changeUserForm:changeUserForm,
     error:null,
-    successRegister: null
+    successRegister: null,
 }
 
 export default (state = initialState, action) => {
@@ -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

@@ -4,6 +4,7 @@ const defaultState = {
     orders:[],
     ordersArray:[],
     findOrderInput:'',
+    userOrdersArray:[],
     error:null,
     isFetching:false,
     searching:false,
@@ -79,10 +80,20 @@ export const ordersReducer = (state = defaultState, action) => {
             }
         }
 
-
+        case types.USER_ORDERS: {
+            //  console.log(action.payload)
+            // console.log(state.orders)
+             const userOrderArray = state.orders.filter(userOrder => userOrder.user === action.payload._id)
+            //  console.log('userOrders',userOrderArray)
+             return  {
+                 ...state,
+                 userOrdersArray:userOrderArray,
+                isFetching: false,}
+        }
+                  
 
 
         default:
             return state
     }
-};
+};

src/utils/formFields.js

@@ -8,7 +8,7 @@ import Reviews from "../components/Reviews";
 import Admin from "../components/Admin/Admin";
 import Appointment from "../components/appointment/Appointment";
 import Auth from "../containers/auth";
-import User from "../components/user";
+import User from "../containers/user";
 const PAGENOTFOUND = () => <div>PAGE 404 NOT FOUND</div>;
 
 
@@ -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,
@@ -372,7 +425,7 @@ export const route = [
 	},
 	{
 		id: 9,
-		exact: true,
+		exact: false,
 		path: "/user",
 		protected: true,
 		component: User