mobile version

src/App.js

@@ -21,6 +21,90 @@ import Admin from './components/Admin/Admin';
 import Auth from './containers/auth';
 import Footer from "./components/Footer";
 // import Calendar from "./components/Calendar"
+import User from './components/user'
+
+import { PrivateRoute } from "./privateRouter";
+
+const PAGENOTFOUND = () => <div>PAGE 404 NOT FOUND</div>;
+
+const route = [
+	{
+		id: 1,
+		exact: true,
+		path: "/",
+		protected: false,
+		// hasAccess: [],
+		component: Main
+	},
+	{
+		id: 2,
+		exact: true,
+		path: "/doctors",
+		protected: false,
+		component: Doctors
+	},
+	{
+		id: 3,
+		exact: true,
+		path: "/services",
+		protected: false,
+		component: Services
+	},
+	{
+		id: 3,
+		exact: true,
+		path: "/doctors/:doctor",
+		protected: false,
+		component: MoreInfo
+	},
+	{
+        id: 4,
+        exact: true,
+		path: "/services/:service",
+		protected: false,
+		component: MoreInfo
+    },
+    {
+        id: 5,
+        exact: true,
+		path: "/reviews",
+		protected: false,
+		component: Reviews
+    },
+    {
+        id: 6,
+        exact: true,
+		path: "/admin",
+		protected: true,
+		component: Admin
+    },
+    {
+        id: 7,
+        exact: true,
+		path: "/appointment/:doctorId",
+		protected: false,
+		component: Appointment
+    },
+    {
+        id: 8,
+        exact: true,
+		path: "/auth",
+		protected: false,
+		component: Auth
+    },
+    {
+        id: 9,
+        exact: true,
+		path: "/user",
+		protected: false,
+		component: User
+    },
+    {
+		id: 10,
+		component: PAGENOTFOUND
+    },
+    
+];
 
 export class App extends React.Component {
 
@@ -48,15 +132,16 @@ export class App extends React.Component {
               <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>

src/actions/auth.js

@@ -22,8 +22,12 @@ 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)
             dispatch(authRequestSuccess(data));
+
+           
+            
         } catch (error){
             dispatch(authRequestFail(error));
         }

src/components/Admin/Shedule.js

@@ -36,7 +36,8 @@ export default class Shedule extends React.Component {
 
     render() {
         const {doctors, postNewShedule} = this.props;
-        const doctor = doctors.find(el => el._id === postNewShedule.doctor)
+        const doctor = doctors.find(el => el._id === postNewShedule.doctor);
+
         return (
             <div  className = "shedule-container" >
                 <div className = "option" >
@@ -70,5 +71,4 @@ export default class Shedule extends React.Component {
             </div>
         );
     }
-}
-// sheduleMonthArray,
+}

src/components/header/navigation.js

@@ -1,29 +1,66 @@
 import React from "react";
 // import Scrollchor from 'react-scrollchor';
-import {Link} from 'react-router-dom'
+import { Link, withRouter } from "react-router-dom";
+import { connect } from "react-redux";
 
+import Button from "../button";
 
 
-const liArr = [
-	{ path: "/", id: 1, text: "Главная" },
-	{ path: "/doctors",  id: 2,  text: "Специалисты"  },
-	{ path: "/services", id: 3,  text: "Услуги" },
-	{ path: "/reviews", id: 4, text: "Отзывы"  },
-	{ path: "/admin", id: 5, text: "Admin"},
-	{ path: "/auth", id: 6, text: "Войти", hideWhenAuth: true }
-];
 
-export default ( props ) => (
-	<nav className=" nav icon-dehaze" 
+
+
+const header =  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" 
 		// onClick = { ( ) => { document.querySelector('.list').style.display = " block"    }  }
 	>
 		<ul className=" list ">
-			{liArr.map(el => (
-				<li className="item" key={el.id}> 
-					<Link to={el.path}>{el.text}</Link>  
+		{liArr.map(el =>
+			el.hideWhenAuth && props.user.role ? 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 
+		}
 		</ul>
 	</nav>
-);
+};
+
+const mapStateToProps = state => ({
+	user: state.auth.user
+});
+
+export default connect(mapStateToProps)(withRouter(header));
 

src/components/user.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+class User extends React.Component {
+    state = {  }
+    render() { 
+        return ( <div>User Component</div>);
+    }
+}
+ 
+export default User;

src/containers/auth.js

@@ -15,10 +15,20 @@ 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") {
+      return <Redirect to="/user" />
+      }
 
-    if(this.props.user) {
-      return <Redirect to='/' />;
-    }
+      if(Object.keys(user).length !== 0 && user.role === "Doctor") {
+        return <Redirect to="/admin" />
+      }
+      
+      if(Object.keys(user).length !== 0 && user.role === "Admin") {
+        return <Redirect to="/admin" />
+      }
 
     return (
       <div className="main">

src/privateRouter.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { Route, Redirect } from "react-router-dom";
+
+export const PrivateRoute = ({ component: Component, protectedRoute, ...rest }) => {
+	return (
+	<Route
+		{...rest}
+		render={props => {
+			if (protectedRoute) {
+				const token = localStorage.getItem("userId");
+				console.log('token', token)
+				if (!token) {
+					return <Redirect to="/auth" />;
+				}
+
+				return <Component {...props} />;
+			}
+			return <Component {...props} />;
+		}}
+	/>
+
+)}

src/reducers/auth.js

@@ -1,9 +1,8 @@
 import * as types from '../actionsTypes/actionsTypes'
 
 const initialState = {
-    user: null,
+    user: {},
     isFetching: false,
-    token:null,
     error:null,
     successRegister: null
 }
@@ -15,8 +14,10 @@ export default (state = initialState, action) => {
         }
 
         case types.AUTH_REQUEST_SUCCESS: {
-            const { user, token } = action.payload;
-            return {...state, isFetching: false, user, token };
+            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 };
         }
 
         case types.AUTH_REQUEST_FAIL: {