Browse Source

add user style

Alex 5 years ago
parent
commit
f710f751b7
6 changed files with 240 additions and 147 deletions
  1. 34 11
      package-lock.json
  2. 30 33
      src/components/userInfo.js
  3. 22 15
      src/components/userOrders.js
  4. 81 64
      src/containers/user.js
  5. 22 24
      src/index.js
  6. 51 0
      src/style/user.scss

+ 34 - 11
package-lock.json

@@ -3012,11 +3012,13 @@
             },
             "balanced-match": {
               "version": "1.0.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -3029,15 +3031,18 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -3140,7 +3145,8 @@
             },
             "inherits": {
               "version": "2.0.3",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -3150,6 +3156,7 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -3162,17 +3169,20 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -3189,6 +3199,7 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -3261,7 +3272,8 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -3271,6 +3283,7 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -3376,6 +3389,7 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -7076,7 +7090,8 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -7085,7 +7100,8 @@
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -7188,7 +7204,8 @@
             },
             "inherits": {
               "version": "2.0.3",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -7198,6 +7215,7 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -7223,6 +7241,7 @@
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -7239,6 +7258,7 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -7311,7 +7331,8 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -7321,6 +7342,7 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -7426,6 +7448,7 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",

+ 30 - 33
src/components/userInfo.js

@@ -1,40 +1,37 @@
-import React from 'react';
-import Input from './Admin/Input'
-
+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
+  changeUser = e => {
+    e.preventDefault();
+    const obj = {};
+    this.props.changeUserUserForm.map(el => {
+      return (obj[el.name] = el.value);
+    });
+    this.props.putUser({ data: obj, path: this.props.user._id });
+  };
+  render() {
+    const { changeUserUserForm, changeInputValueUserUserForm } = this.props;
+    return (
+      <div className="user-info">
+        <div className="admin-item user-item">
+          <form className="form-doctors user-form">
+            {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>
-        );
-    }
+              />
+            ))}
+          </form>
+          <button onClick={this.changeUser} className="btn link admin user-btn">
+            Изменить
+          </button>
+        </div>
+      </div>
+    );
+  }
 }
- 
-export default UserInfo;
+
+export default UserInfo;

+ 22 - 15
src/components/userOrders.js

@@ -1,18 +1,25 @@
-import React, { Component } from 'react';
+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> );
-    }
+  render() {
+    const { data } = this.props;
+    console.log(data);
+    return (
+      <div className="user-orders">
+        {data.map(el => (
+          //   console.log(el)
+          <div key={el._id} className="user-orders__content">
+            <h4 className="user-orders__heading">Процедура: {el.spec.name}</h4>
+            <p className="user-orders__paragraph">
+              Дата записи: {el.date.split("T")[0]}
+            </p>
+            <p className="user-orders__paragraph"> Время записи: {el.time}</p>
+            <p className="user-orders__paragraph">Доктор: {el.doctor.name}</p>
+          </div>
+        ))}
+      </div>
+    );
+  }
 }
- 
-export default UserOrders;
+
+export default UserOrders;

+ 81 - 64
src/containers/user.js

@@ -1,72 +1,89 @@
-import React, { Component } from 'react';
-import {connect} from "react-redux";
-import {Link} from "react-router-dom";
-import {Switch, Route} from "react-router-dom";
+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 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'
+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);
+  }
 
-    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>
-
-              );
-    }
+  render() {
+    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 user-link">
+              Мои заказы
+            </Link>
+            <Link to="/user/info" className="btn link admin  user-link">
+              Редактировать профиль
+            </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);
+  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);

+ 22 - 24
src/index.js

@@ -1,31 +1,29 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App'
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import * as serviceWorker from "./serviceWorker";
 
-import {BrowserRouter} from "react-router-dom";
-import {store} from './store'
-import {Provider} from "react-redux";
-
-
-import "./style/normalize.css"
-import './style/all.scss'
-import "./style/style.css"
-import "./style/select.scss"
-import "./style/calendar.scss"
-import "./style/auth.scss"
-import "./style/modal.scss"
-import "./style/checkBoxWindow.scss"
+import { BrowserRouter } from "react-router-dom";
+import { store } from "./store";
+import { Provider } from "react-redux";
 
+import "./style/normalize.css";
+import "./style/all.scss";
+import "./style/style.css";
+import "./style/select.scss";
+import "./style/calendar.scss";
+import "./style/auth.scss";
+import "./style/modal.scss";
+import "./style/checkBoxWindow.scss";
+import "./style/user.scss";
 
 ReactDOM.render(
-    <Provider store={store}>
-        <BrowserRouter>
-            <App/>
-        </BrowserRouter>
-    </Provider>,
-    document.getElementById('root')
+  <Provider store={store}>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </Provider>,
+  document.getElementById("root")
 );
 
-
 serviceWorker.unregister();

+ 51 - 0
src/style/user.scss

@@ -0,0 +1,51 @@
+.user-link {
+  width: 25% !important;
+  @media (max-width: 768px) {
+    width: 80% !important;
+    margin: 10px 5px;
+  }
+}
+
+.user-info {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-top: 50px;
+  align-content: stretch;
+  align-items: flex-start;
+}
+
+.user-item {
+  width: 60%;
+}
+.user-form {
+  width: 100%;
+}
+.user-btn {
+  cursor: pointer;
+}
+
+.user-orders {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-top: 20px;
+  &__content {
+    color: #789084;
+    box-shadow: 0 1.5rem 4rem rgba(17, 17, 17, 1.5);
+    border-radius: 10px;
+    background-color: rgba(17, 17, 17, 0.5);
+  }
+
+  &__heading {
+    // margin: 2px;
+    text-align: center;
+    border-bottom: 1px solid rgba(17, 17, 17, 0.8);
+  }
+  &__paragraph {
+    text-align: center;
+  }
+  @media (max-width: 769px) {
+    display: block;
+  }
+}