'addAuth'

src/App.js

@@ -22,6 +22,7 @@ import Doctors from "./components/Doctors"
 import Services from "./components/Services"
 import Service from "./components/Service"
 import Appointment from "./components/Appointment"
+import Auth from './containers/auth'
 
 
 export class App extends React.Component {
@@ -60,6 +61,7 @@ export class App extends React.Component {
                             clearAppointment={this.props.clearAppointment}
                             putOrders={this.props.putOrders}
                         />} />
+                        <Route exact path="/auth" component={Auth} />
                     </Switch>
                 <Footer/>
             </div>

src/components/Header.js

@@ -1,16 +1,39 @@
-import React from 'react';
-import {Link} from 'react-router-dom'
+import React from "react";
+import { Link, withRouter } from "react-router-dom";
+import { connect } from "react-redux";
 
-const Header = () => {
-    return (
-        <div>
-            <Link to="/">Main Page</Link>
-            <Link to="/doctors">Doctors</Link>
-            <Link to="/services">Services</Link>
-            <Link to="/reviews">Reviews</Link>
-            <button>Sing In</button>
-        </div>
-    );
+const liArr = [
+  { path: "/", id: 1, text: "Main Page", hideWhenAuth: false },
+  { path: "/doctors", id: 2, text: "doctors", hideWhenAuth: false },
+  { path: "/services", id: 3, text: "services", hideWhenAuth: false },
+  { path: "/reviews", id: 4, text: "reviews", hideWhenAuth: false },
+  { path: "/auth", id: 5, text: "Auth", hideWhenAuth: true }
+
+];
+
+const header = props => {
+  return (
+    <header className="header" id="header">
+      <div className="header__left-wrapper">
+        <div className="header__logo-box">logo</div>
+        <nav className="header__nav">
+          <ul className="header__list">
+            {liArr.map(el =>
+              el.hideWhenAuth && props.user ? null : (
+                <li className="header__item" key={el.id}>
+                  <Link to={el.path}>{el.text}</Link>
+                </li>
+              )
+            )}
+          </ul>
+        </nav>
+      </div>
+    </header>
+  );
 };
 
-export default Header;
+const mapStateToProps = state => ({
+  //   user: state.auth.user
+});
+
+export default connect(mapStateToProps)(withRouter(header));

src/components/button.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default ({ text,type = 'button', ...rest }) => (
+    <button type={type} {...rest}>
+        { text }
+    </button>
+);

src/components/input.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default ({ id, label, type = "text", fail, touch, ...rest }) => (
+    <label htmlFor={id} className="input-box">
+        {label}
+        <input 
+            className={fail && touch ? 'input-box__input input-box__input--fail' : 'input-box__input'}
+            id={id}
+            type={type}
+            {...rest}
+        />
+    </label>
+);

src/components/loader.js

@@ -0,0 +1,3 @@
+import React from "react";
+
+export default ({ children, flag }) => (flag ? <div>Loading...</div> : children);

src/containers/auth.js

@@ -2,8 +2,8 @@ import React, { Component } from "react";
 import { connect } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 
-import { auth } from '../actions/auth';
-import { register } from '../actions/signUp'
+// import { auth } from '../actions/auth';
+// import { register } from '../actions/signUp'
 
 import SignUpForm from '../components/signUp';
 import SignInForm from '../components/signIn';
@@ -24,7 +24,7 @@ class Auth extends Component {
     return (
       <div className="auth">
         <div className="auth__content">
-          { auth ? (
+          {/* { auth ? ( */}
               <Loader flag={this.props.isFetching}>
                 <SignInForm error={this.props.errorFromAuth} submitHandler={this.props.auth} />
               </Loader>
@@ -39,7 +39,7 @@ class Auth extends Component {
           )}
 
           <div className="auth__additional-content">
-            {auth ? (
+            {/* {auth ? ( */}
               <p className="auth__text">
                 Do you have account ? {" "}
                 <span className="auth__toggle-span" onClick={this.toggleAuth}>
@@ -62,13 +62,13 @@ class Auth extends Component {
 }
 
 const mapStateToProps = state => ({
-  user: state.auth.user,
-  isFetching: state.auth.isFetching,
-  errorFromAuth: state.auth.error,
-  successRegister: state.auth.successRegister
+//   user: state.auth.user,
+//   isFetching: state.auth.isFetching,
+//   errorFromAuth: state.auth.error,
+//   successRegister: state.auth.successRegister
 })
 
 export default connect(
   mapStateToProps,
-  { auth,register }
+//   { auth,register }
 )(Auth);