clean code

FreakDev · Oct 26, 2017 · 8078105 · 8078105
1 parent 09d9587
commit 8078105
Showing 1 changed file with 28 additions and 29 deletions.
diff --git a/src/PageManager.js b/src/PageManager.js
@@ -43,43 +43,42 @@ export class PageManager extends Component {
 		const pages = routes.filter(r => !r.props.noNavbar).map(r => ({ name: r.props.name, path: r.props.path }))
 		const navbars = children.filter(child => child.type === NavigationBar)
 
+		const renderPages = (pages) => pages.map((page, i) => {
+			const { exact, path, ...props } = page.props
+			return (
+				<Route key={i} exact={exact} path={path} render={() => React.cloneElement(page, { ...props })} />											
+			)
+		})
+
 		return (
-			<TransitionGroup component="div" className={"page-container " + (this.state.direction >= 0 ? "right" : "left")}>
-				<CSSTransition
-					key={currentKey}
-					timeout={timeout}
-					classNames="page"
-					appear
-				>
-					<section className={"page-inner"}>
-						<Switch location={location}>
-						{
-							animatedPages.map(page => {
-								const { exact, path, ...props } = page.props
-								return (
-									<Route exact={exact} path={path} render={() => React.cloneElement(page, { ...props })} />											
-								)
-							})
-						}
-						</Switch>
-					</section>
-				</CSSTransition>
+			<div className="page-container">
+				<TransitionGroup component="div" className={(this.state.direction >= 0 ? "right" : "left")}>
+					<CSSTransition
+						key={currentKey}
+						timeout={timeout}
+						classNames="page"
+						appear
+					>
+						<section className={"page-inner"}>
+							<Switch location={location}>
+							{
+								renderPages(animatedPages)
+							}
+							</Switch>
+						</section>
+					</CSSTransition>
+				</TransitionGroup>								
 				<section className={"page-inner"}>
 					<Switch location={location}>
 					{
-						notAnimatedPages.map(page => {
-							const { exact, path, ...props } = page.props
-							return (
-								<Route exact={exact} path={path} render={() => React.cloneElement(page, { ...props })} />											
-							)
-						})
+						renderPages(notAnimatedPages)
 					}
 					</Switch>
 				</section>
-				{ navbars.map((navbar) => {
-					return React.cloneElement(navbar, { pages })
+				{ navbars.map((navbar, k) => {
+					return React.cloneElement(navbar, { pages, key: k })
 				}) }
-			</TransitionGroup>								
+			</div>
 		);
 	}
 }