add a navigation component

Author: Sean Bethel

src/assets/src/components/PageNav.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import ReactSync from '../ReactSync';
+import { collect } from 'collect.js';
+
+
+class PageNav extends Component{
+	render(){
+		// nav
+		const links = collect(ReactSync.pages).map(p => (new p).renderNavLink()).values();
+
+		return links;
+	}
+}
+
+export default PageNav;

src/assets/src/components/index.js

@@ -7,5 +7,6 @@ import Notification from './Notification';
 import Page from './Page';
 import Pagination from './Pagination';
 import Shell from './Shell';
+import PageNav from './PageNav';
 
-export { Alert, Field, Form, LegacyModel, Model, Notification, Page, Pagination, Shell };
+export { Alert, Field, Form, LegacyModel, Model, Notification, Page, Pagination, Shell, PageNav };

src/assets/src/main.js

@@ -1,4 +1,4 @@
-import { Pagination, Page, Model, Field, Form, Notification } from './components';
+import { Pagination, Page, Model, Field, Form, Notification, PageNav } from './components';
 
 import * as helpers from './helpers';
 
@@ -22,6 +22,7 @@ const LaravelReactSync = {
 	Field,
 	Form,
 	Notification,
+	PageNav,
 	ReactSync,
 	Reducer,
 };
@@ -36,6 +37,7 @@ export {
 	Field,
 	Form,
 	Notification,
+	PageNav,
 	ReactSync,
 	Reducer,
 };

src/react-sync-stubs/components/App.js

@@ -5,7 +5,7 @@ import ReactDOM from 'react-dom';
 
 import * as _models from 'models';
 
-import LaravelReactSync, { Model, helpers as react_sync_helpers } from 'laravel_react_sync';
+import LaravelReactSync, { Model, PageNav, helpers as react_sync_helpers } from 'laravel_react_sync';
 
 const { app_current } = react_sync_helpers;
 
@@ -21,7 +21,7 @@ class App extends Component {
 		super(props);
 		this.state = this.props.page_props;
 
-		window.app = window.app || function(){
+		typeof window.app !== "function" && window.app = function(){
 			return this;
 		}.bind(this);
 	}
@@ -35,7 +35,7 @@ class App extends Component {
 
 	components(){
 		const { App, ...rest } = require('./');
-		return rest;
+		return { PageNav, ...rest };
 	}
 
 	pages(){
@@ -61,8 +61,9 @@ class App extends Component {
                 throw new Error(`\n\nYou are trying to render a component called: '${renderable.dataset.reactRender}' that doesn't exist, or isn't exported from './Components'\n\nAvailable components are: ${Object.keys(renderables).join(', ')}\n\n`);
             }
             const { defaultProps = {} } = Renderable;
+            const defaultPageProps = this.CurrentPage ? this.CurrentPage.defaultProps : {};
             return ReactDOM.createPortal(
-                <Renderable attributes={{...renderable.dataset}} {...defaultProps} {...this.CurrentPage.defaultProps} {...this.state} />,
+                <Renderable attributes={{...renderable.dataset}} {...defaultProps} {...defaultPageProps} {...this.state} />,
                 renderable
             );
         });

src/views/layout.blade.php

@@ -32,7 +32,7 @@
 
                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
                     <!-- Left Side Of Navbar -->
-                    <ul class="navbar-nav mr-auto" id="navbarPageList">
+                    <ul class="navbar-nav mr-auto" id="navbarPageList" data-react-render="PageNav">
 
                     </ul>