add Private Routing

src/App.js

@@ -6,8 +6,13 @@ import {Switch, Route} from "react-router-dom";
 import {
     getDoctors,
     getServices,
+   
 } from "./actions/actions";
 
+import {
+    getUser,
+} from "./actions/auth"
+
 import Loader from "./components/loader";
 import Header from "./components/header/index";
 import Main from "./components/main/Main";
@@ -96,7 +101,7 @@ const route = [
         id: 9,
         exact: true,
 		path: "/user",
-		protected: false,
+		protected: true,
 		component: User
     },
     {
@@ -112,6 +117,10 @@ export class App extends React.Component {
         this.props.getDoctors();
         this.props.getServices();
 
+       if(localStorage.getItem('userId')){
+       this.props.getUser()
+       }
+
         // fetch ("https://api-clinics.herokuapp.com/api/v1/auth/login", {
         //     method : "POST",
         //     credentials: "include",
@@ -128,20 +137,19 @@ export class App extends React.Component {
     }
 
     render() {
-        console.log(this.props.app)
         return (
               <Loader flag={this.props.app.isFetching}>
                     <Header/>
                     <Switch>
-                        <Route exact path="/" component={Main} />
-                        <Route exact path="/doctors" component={Doctors} />
-                        <Route exact path="/services" component={Services} />
-                        <Route exact path="/doctors/:doctor" component={MoreInfo} />
-                        {/* <Route exact path="/services/:service" component={Categories} /> */}
-                        <Route exact path="/reviews" component={Reviews}/>
-                        <Route path="/admin/" component={Admin} />
-                        <Route exact path="/appointment/:doctorId" component={Appointment}/>
-                        <Route exact path="/auth" component={Auth} />
+                        {route.map(el => (
+					        <PrivateRoute
+                                protectedRoute={el.protected}
+                                key={el.id}
+                                exact={el.exact}
+                                path={el.path}
+                                component={el.component}
+                            />
+				        ))}
                     </Switch>
                 <Footer />
              </Loader>
@@ -152,12 +160,14 @@ export class App extends React.Component {
 const mapStateToProps = state => {
     return {
         app:state.app,
+        user:state.auth.user
     }
 };
 
 const mapDispatchToProps = {
     getDoctors,
     getServices,
+    getUser,
 };
 
 export default connect (mapStateToProps,mapDispatchToProps)(App)

src/actions/actions.js

@@ -99,7 +99,7 @@ const getDoctorsRequestFail = payload => ({
 });
 
 export const getDoctors = () => dispatch => {
-    console.log('get')
+    // console.log('get')
     dispatch(getDoctorsRequest());
     return fetch(`${URL}doctors`,{
         credentials:"include"

src/actions/auth.js

@@ -22,8 +22,7 @@ export const auth = payload => {
         dispatch(authRequest());
         try {
             const { data } = await axios.post("https://api-clinics.herokuapp.com/api/v1/auth/login", payload);
-            localStorage.setItem("userId",JSON.stringify(data.user._id))
-            console.log('data',data)
+            localStorage.setItem("userId",data.user._id)
             dispatch(authRequestSuccess(data));
 
            
@@ -63,4 +62,37 @@ export const register = payload => {
             dispatch(registrRequestFail(error))
         }
     };
-};
+};
+
+
+const getUserRequest = payload => {
+    return {
+    type: types.GET_USER_REQUEST,
+    payload
+}}
+
+const getUserRequestSuccess = payload => ({
+    type: types.GET_USER_REQUEST_SUCCESS,
+    payload
+})
+
+const getUserRequestFail = payload => ({
+    type: types.GET_USER_REQUEST_FAIL,
+    payload
+})
+
+export const getUser = () => dispatch => {
+    dispatch(getUserRequest());
+    return fetch(`https://api-clinics.herokuapp.com/api/v1/users/` + localStorage.getItem('userId'),{
+        credentials:"include"
+    })
+        .then(res => res.json())
+        .then(res => dispatch(getUserRequestSuccess(res)))
+        .catch(err => dispatch(getUserRequestFail(err)));
+};
+
+
+export const userLogout = payload => ({
+    type: types.USER_LOGOUT,
+    payload
+})

src/actionsTypes/actionsTypes.js

@@ -21,6 +21,12 @@ export const REGISTRATION_REQUEST = "REQISTRATION_REQUEST";
 export const REGISTRATION_REQUEST_SUCCESS = "REGISTRATION_REQUEST_SUCCESS";
 export const REGISTRATION_REQUEST_FAIL = "REGISTRATION_REQUEST_FAIL";
 
+export const GET_USER_REQUEST = "GET_USER_REQUEST";
+export const GET_USER_REQUEST_SUCCESS = "GET_USER_REQUEST_SUCESS";
+export const GET_USER_REQUEST_FAIL = "GET_USER_REQUEST_FAIL";
+
+export const USER_LOGOUT = "USER_LOGOUT"
+
 export const POST_DOCTORS_REQUEST = "POST_DOCTORS_REQUEST";
 export const POST_DOCTORS_REQUEST_SUCCESS = "POST_DOCTORS_REQUEST_SUCCESS";
 export const POST_DOCTORS_REQUEST_FAIL = "POST_DOCTORS_REQUEST_FAIL";

src/components/header/navigation.js

@@ -1,65 +1,64 @@
-import React from "react";
+import React, {Component} from "react";
 // import Scrollchor from 'react-scrollchor';
 import { Link, withRouter } from "react-router-dom";
 import { connect } from "react-redux";
 
-import Button from "../button";
+import { userLogout} from "../../actions/auth"
 
+class Header extends Component {
 
+	logoutHandler  = (e) => {
+		localStorage.removeItem('userId')
+		this.props.userLogout()
+		this.props.history.push('/')
+	}
 
-
-
-const header =  props  => {
+	render(){
+	const { user } = this.props
 	const liArr = [
 		{ path: "/", id: 1, text: "Главная", hideWhenAuth:false},
 		{ path: "/doctors",  id: 2,  text: "Специалисты", hideWhenAuth:false },
 		{ path: "/services", id: 3,  text: "Услуги", hideWhenAuth:false},
 		{ path: "/reviews", id: 4, text: "Отзывы", hideWhenAuth:false },
 		{ path: "/auth", id: 5, text: "Войти", hideWhenAuth:true
-		// Object.keys(props.user).length > 0 ? 
-		// 	props.user.role === "Admin" ? "Admin"
-		// 		: props.user.role === "Doctor" 
-		// 		? "Doctor" 		
-		// 				: "Logout" 
-		// 					: "Войти" 
 		}
 	];
 
-	return <nav className=" nav icon-dehaze" 
+	return (<nav className=" nav icon-dehaze" 
 		// onClick = { ( ) => { document.querySelector('.list').style.display = " block"    }  }
 	>
 		<ul className=" list ">
 		{liArr.map(el =>
-			el.hideWhenAuth && props.user.role ? null :
+			el.hideWhenAuth && user ? null :
 							(
 								<li className="item" key={el.id}>
 									<Link to={el.path}>{el.text}</Link>
 								</li>
 							)
 						)}
-		{Object.keys(props.user).length > 0 ? 
-			props.user.role === "Admin" ? (
-				<li className="item" key={6}>
-					<Link to={ "/admin"}>{"Admin"}</Link>
-					<Button text="Logout" />
-				</li>
-					
-			) : props.user.role === "Doctor" ? 
-			(<li className="item" key={6}>
-					<Link to={ "/admin"}>{"Doctor"}</Link>
-					<Button text="Logout" />
-				</li>) : (<li className="item" key={6}>
-					<Link to={ "/user"}>{"User"}</Link>
-					<Button text="Logout" />
-				</li>)
-						: null 
+		{Object.keys(user).length > 0 ? 
+			user.role ? 
+					(<li className="item" key={6}>
+						<Link to={ "/admin"}>{"Admin"} <span  className="icon-exit" onClick={this.logoutHandler}></span></Link>
+					</li>) : 
+			user.doctor ? 
+				(<li className="item" key={6}>
+					<Link to={ "/doctor"}>{"Reviews"}<span  className="icon-exit" onClick={this.logoutHandler}></span></Link>
+				</li>) : 
+				(<li className="item" key={6}>
+					<Link to={ "/user"}>{user.firstName}<span  className="icon-exit" onClick={this.logoutHandler}></span></Link>
+				</li>) :	<li className="item" key={5}>
+									<Link to={"/auth"}>Войти</Link>
+								</li>
 		}
+
 		</ul>
-	</nav>
+	</nav>)
+	}
 };
 
 const mapStateToProps = state => ({
 	user: state.auth.user
 });
 
-export default connect(mapStateToProps)(withRouter(header));
+export default connect(mapStateToProps,{userLogout})(withRouter(Header));

src/components/signIn.js

@@ -39,7 +39,7 @@ export const SignInForm = ({ error, submitHandler }) => {
 				})}
 				{error && <p className="auth__error-auth-text">{error}</p>}
 				<div className="auth__control-box">
-					<Button disabled={!form.validForm} className="auth__submit-btn" type="submit" text="Log In" />
+					<Button disabled={!form.validForm} className="auth__submit-btn" type="submit" text="Войти" />
 				</div>
 			</form>
 		</div>

src/components/signUp.js

@@ -40,7 +40,7 @@ export const SignUpForm = ({ submitHandler, error, successRegister }) => {
 				{successRegister && <p className="auth__success-auth-text">{successRegister}</p>}
 				{error && <p className="auth__error-auth-text">{error}</p>}
 				<div className="auth__control-box">
-					<Button disabled={!form.validForm} className="auth__submit-btn" type="submit" text="Log In" />
+					<Button disabled={!form.validForm} className="auth__submit-btn" type="submit" text="Зарегистрироваться" />
 				</div>
 			</form>
 		</div>

src/containers/auth.js

@@ -16,19 +16,21 @@ class Auth extends Component {
   render() {
     const { auth } = this.state;
     const { user } = this.props
-    console.log('userProps',this.props.user)
+
     
-    if(Object.keys(user).length !== 0 && user.role === "User") {
+    if(user) 
+    {if(Object.keys(user).length !== 0 && !user.role && !user.doctor) {
       return <Redirect to="/user" />
       }
 
-      if(Object.keys(user).length !== 0 && user.role === "Doctor") {
+      if(Object.keys(user).length !== 0 && user.role && !user.doctor) {
         return <Redirect to="/admin" />
       }
       
-      if(Object.keys(user).length !== 0 && user.role === "Admin") {
-        return <Redirect to="/admin" />
+      if(Object.keys(user).length !== 0 && user.doctor && !user.role) {
+        return <Redirect to="/reviews" />
       }
+    }
 
     return (
       <div className="main">
@@ -53,16 +55,16 @@ class Auth extends Component {
                 <div className="auth__additional-content">
                   {auth ? (
                     <p className="auth__text">
-                      Do you have account ? {" "}
+                    У вас есть акаунт ? {" "}
                       <span className="auth__toggle-span" onClick={this.toggleAuth}>
-                        Sing Up
+                        Зарегистрироваться
                       </span>
                     </p>
                   ) : (
                     <p className="auth__text">
-                      I have account{" "}
+                      У меня есть акаунт{" "}
                       <span className="auth__toggle-span" onClick={this.toggleAuth}>
-                        Sign In
+                       Войти
                       </span>
                     </p>
                   )}

src/reducers/auth.js

@@ -15,9 +15,7 @@ export default (state = initialState, action) => {
 
         case types.AUTH_REQUEST_SUCCESS: {
             const { user } = action.payload;
-            const updatedUser = {...user, role: user.doctor ? "Doctor" : user.role ? "Admin" : "User"} 
-            console.log("user", updatedUser)
-            return {...state, isFetching: false, user: updatedUser };
+            return {...state, isFetching: false, user: user };
         }
 
         case types.AUTH_REQUEST_FAIL: {
@@ -36,6 +34,18 @@ export default (state = initialState, action) => {
         case types.REGISTRATION_REQUEST_FAIL: {
             return { ...state, isFetching: false, error: action.payload.response.data.message}
         }
+
+        case types.GET_USER_REQUEST: {
+            return { ...state, isFetching: true}
+        }
+
+        case types.GET_USER_REQUEST_SUCCESS: {
+            return {...state,isFetching: false, user: action.payload.user}
+        }
+        
+        case types.USER_LOGOUT: {
+            return { ...state, user: initialState.user}
+        }
         
         default:
              return state

src/utils/formFields.js

@@ -18,7 +18,7 @@ export const logInForm = {
 			id: 2,
 			name: "password",
 			type: "password",
-			label: "Password",
+			label: "Пароль",
 			validation: {
 				requred: {
 					cb: v => v.trim() === ""
@@ -55,7 +55,7 @@ export const signUpForm = {
 			id: 2,
 			type: "text",
 			name: "firstName",
-			label: "First Name",
+			label: "Имя",
 			validation: {
 				requred: {
 					cb: v => v.trim() === ""
@@ -72,7 +72,7 @@ export const signUpForm = {
 			id: 3,
 			type: "text",
 			name: "lastName",
-			label: "Last Name",
+			label: "Фамилия",
 			validation: {
 				requred: {
 					cb: v => v.trim() === ""
@@ -86,7 +86,7 @@ export const signUpForm = {
 			id: 4,
 			type: "number",
 			name: "phone",
-			label: "Phone",
+			label: "Телефон",
 			validation: {
 				requred: {
 					cb: v => v.trim() === ""
@@ -100,7 +100,7 @@ export const signUpForm = {
 			id: 5,
 			name: "password",
 			type: "password",
-			label: "Password",
+			label: "Пароль",
 			validation: {
 				requred: {
 					cb: v => v.trim() === ""
@@ -117,7 +117,7 @@ export const signUpForm = {
 			id: 6,
 			name: "confirmPassword",
 			type: "password",
-			label: "Confirm Password",
+			label: "Повторите пароль",
 			validation: {
 				requred: {
 					cb: v => v.trim() === ""