transfer route array from App.js to utils-formFields

src/App.js

@@ -1,115 +1,17 @@
 import React from 'react';
 import {connect} from 'react-redux';
-import {Switch, Route} from "react-router-dom";
-// import { BrowserHistory } from 'react-history'
+import {Switch} from "react-router-dom";
 
-import {
-    getDoctors,
-    getServices,
-   
-} from "./actions/actions";
-
-import {
-    getUser,
-} from "./actions/auth"
+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";
-import Doctors from "./components/specialists/Doctors";
-import Services from "./components/services/Services";
-// import Categories from "./components/services/categories"
-import MoreInfo from "./components/specialists/MoreInfo";
-import Appointment from "./components/appointment/Appointment";
-import Reviews from "./components/Reviews";
-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 {route} from './utils/formFields'
 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: true,
-		component: User
-    },
-    {
-		id: 10,
-		component: PAGENOTFOUND
-    },
-    
-];
 
 export class App extends React.Component {
 
@@ -117,9 +19,7 @@ export class App extends React.Component {
         this.props.getDoctors();
         this.props.getServices();
 
-       if(localStorage.getItem('userId')){
-       this.props.getUser()
-       }
+       if(localStorage.getItem('userId')) this.props.getUser()
 
         // fetch ("https://api-clinics.herokuapp.com/api/v1/auth/login", {
         //     method : "POST",
@@ -139,7 +39,7 @@ export class App extends React.Component {
     render() {
         return (
               <Loader flag={this.props.app.isFetching}>
-                    <Header/>
+                  <Header/>
                     <Switch>
                         {route.map(el => (
 					        <PrivateRoute
@@ -159,15 +59,14 @@ export class App extends React.Component {
 
 const mapStateToProps = state => {
     return {
-        app:state.app,
-        user:state.auth.user
+        app:state.app
     }
 };
 
 const mapDispatchToProps = {
     getDoctors,
     getServices,
-    getUser,
+    getUser
 };
 
 export default connect (mapStateToProps,mapDispatchToProps)(App)

src/components/header/navigation.js

@@ -9,12 +9,12 @@ class Header extends Component {
 
 	logoutHandler  = (e) => {
 		localStorage.removeItem('userId')
-		this.props.userLogout()
+		this.props.userLogout();
 		this.props.history.push('/')
-	}
+	};
 
 	render(){
-	const { user } = this.props
+	const { user } = this.props;
 	const liArr = [
 		{ path: "/", id: 1, text: "Главная", hideWhenAuth:false},
 		{ path: "/doctors",  id: 2,  text: "Специалисты", hideWhenAuth:false },
@@ -24,38 +24,39 @@ class Header extends Component {
 		}
 	];
 
-	return (<nav className=" nav icon-dehaze" 
-		// onClick = { ( ) => { document.querySelector('.list').style.display = " block"    }  }
-	>
-		<ul className=" list ">
-		{liArr.map(el =>
-			el.hideWhenAuth && user ? null :
-							(
-								<li className="item" key={el.id}>
-									<Link to={el.path}>{el.text}</Link>
-								</li>
-							)
-						)}
-		{Object.keys(user).length > 0 ? 
-			user.role ? 
+	return (
+		<nav className=" nav icon-dehaze"
+			// onClick = { ( ) => { document.querySelector('.list').style.display = " block"    }  }
+		>
+			<ul className=" list ">
+			{liArr.map(el =>
+				el.hideWhenAuth && user ? null :
+					(
+						<li className="item" key={el.id}>
+							<Link to={el.path}>{el.text}</Link>
+						</li>
+					)
+			)}
+			{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={ "/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>)
+						<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>
+	)
 	}
-};
+}
 
 const mapStateToProps = state => ({
 	user: state.auth.user

src/utils/formFields.js

@@ -1,3 +1,18 @@
+import React from 'react';
+
+import Main from "../components/main/Main";
+import Doctors from "../components/specialists/Doctors";
+import Services from "../components/services/Services";
+import MoreInfo from "../components/specialists/MoreInfo";
+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";
+const PAGENOTFOUND = () => <div>PAGE 404 NOT FOUND</div>;
+
+
+
 export const logInForm = {
 	form: {
 		email: {
@@ -222,4 +237,83 @@ export const postNewServiceForm =[
 		placeholder:'Введите стоимость сервиса',
 		required:true
 	}
-];
+];
+
+export 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: false,
+		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: true,
+		component: User
+	},
+	{
+		id: 10,
+		component: PAGENOTFOUND
+	},
+
+];