wire up duct tape solution for active links

- Gets active links working in nav with a bit of duct tape. TODO: - How can we remotely trigger updates on navigation when clicking links? Current solution is awfully clunky.

wire up duct tape solution for active links
- Gets active links working in nav with a bit of duct tape. TODO: - How can we remotely trigger updates on navigation when clicking links? Current solution is awfully clunky.
tmcdeveloper
1 parent 7df77f0fa8
Showing 4 changed files with 49 additions and 24 deletions Show diff stats
imports/ui/components/app-navigation.js
imports/ui/components/authenticated-navigation.js
imports/ui/components/public-navigation.js
imports/ui/layouts/app.js
@@ -4,8 +4,8 @@ import { PublicNavigation } from &#39;./public-navigation&#39;;
 import { AuthenticatedNavigation } from './authenticated-navigation';
  
 export class AppNavigation extends React.Component {
-  renderNavigation( hasUser, location ) {
-    return hasUser ? <AuthenticatedNavigation /> : <PublicNavigation />;
+  renderNavigation( hasUser, activeRoute ) {
+    return hasUser ? <AuthenticatedNavigation activeRoute={ activeRoute } /> : <PublicNavigation activeRoute={ activeRoute } />;
   }
  
   render() {
@@ -15,7 +15,7 @@ export class AppNavigation extends React.Component {
           <a href="/">Application Name</a>
         </Navbar.Brand>
       </Navbar.Header>
-      { this.renderNavigation( this.props.hasUser ) }
+      { this.renderNavigation( this.props.hasUser, this.props.activeRoute ) }
     </Navbar>;
   }
 }
@@ -15,16 +15,28 @@ const userName = () =&gt; {
   }
 };
  
-export const AuthenticatedNavigation = ( { router, location } ) => (
-  <div>
-    <Nav>
-      <NavItem href="/" eventKey={ 1 }>Index</NavItem>
-      <NavItem href="/dashboard" eventKey={ 2 }>Dashboard</NavItem>
-    </Nav>
-    <Nav pullRight>
-      <NavDropdown eventKey={ 3 } title={ userName() } id="basic-nav-dropdown">
-        <MenuItem eventKey={ 3.3 } onClick={ handleLogout }>Logout</MenuItem>
-      </NavDropdown>
-    </Nav>
-  </div>
-)
+export const AuthenticatedNavigation = React.createClass({
+  isActive( route, indexOnly ) {
+    return this.props.activeRoute( route, indexOnly );
+  },
+  handleRouteChange() {
+   this.forceUpdate();
+  },
+  render() {
+    return <div>
+      <Nav>
+        <li className={ this.isActive( '/', true ) } onClick={ this.handleRouteChange }>
+          <Link to="/">Index</Link>
+        </li>
+        <li className={ this.isActive( '/dashboard' ) } onClick={ this.handleRouteChange }>
+          <Link to="/dashboard">Dashboard</Link>
+        </li>
+      </Nav>
+      <Nav pullRight>
+        <NavDropdown eventKey={ 3 } title={ userName() } id="basic-nav-dropdown">
+          <MenuItem eventKey={ 3.3 } onClick={ handleLogout }>Logout</MenuItem>
+        </NavDropdown>
+      </Nav>
+    </div>;
+  }
+});
 import React from 'react';
-import { LinkContainer } from 'react-router-bootstrap';
+import { Link } from 'react-router';
 import { Nav, NavItem } from 'react-bootstrap';
  
-export const PublicNavigation = ( { router } ) => (
-  <Nav pullRight>
-    <NavItem eventKey={ 1 } href="/signup">Sign Up</NavItem>
-    <NavItem eventKey={ 2 } href="/login">Login</NavItem>
-  </Nav>
-)
+export const PublicNavigation = React.createClass({
+  isActive( route, indexOnly ) {
+    return this.props.activeRoute( route, indexOnly ) ? 'active' : '';
+  },
+  handleRouteChange() {
+   this.forceUpdate();
+  },
+  render() {
+    return <Nav pullRight>
+      <li className={ this.isActive( '/signup' ) } onClick={ this.handleRouteChange }>
+        <Link to="/signup">Sign Up</Link>
+      </li>
+      <li className={ this.isActive( '/login' ) } onClick={ this.handleRouteChange }>
+        <Link to="/login">Log In</Link>
+      </li>
+    </Nav>;
+  }
+});
@@ -9,8 +9,9 @@ export const App = React.createClass({
     }
   },
   render() {
+    const { isActive } = this.context.router;
     return <div>
-      <AppNavigation />
+      <AppNavigation activeRoute={ isActive } />
       <Grid>
         { this.props.children }
       </Grid>
...	...	@@ -4,8 +4,8 @@ import { PublicNavigation } from './public-navigation';
4	4	import { AuthenticatedNavigation } from './authenticated-navigation';
5	5
6	6	export class AppNavigation extends React.Component {
7		- renderNavigation( hasUser, location ) {
8		- return hasUser ? <AuthenticatedNavigation /> : <PublicNavigation />;
	7	+ renderNavigation( hasUser, activeRoute ) {
	8	+ return hasUser ? <AuthenticatedNavigation activeRoute={ activeRoute } /> : <PublicNavigation activeRoute={ activeRoute } />;
9	9	}
10	10
11	11	render() {
...	...	@@ -15,7 +15,7 @@ export class AppNavigation extends React.Component {
15	15	<a href="/">Application Name</a>
16	16	</Navbar.Brand>
17	17	</Navbar.Header>
18		- { this.renderNavigation( this.props.hasUser ) }
	18	+ { this.renderNavigation( this.props.hasUser, this.props.activeRoute ) }
19	19	</Navbar>;
20	20	}
21	21	}
...	...
...	...	@@ -15,16 +15,28 @@ const userName = () => {
15	15	}
16	16	};
17	17
18		-export const AuthenticatedNavigation = ( { router, location } ) => (
19		- <div>
20		- <Nav>
21		- <NavItem href="/" eventKey={ 1 }>Index</NavItem>
22		- <NavItem href="/dashboard" eventKey={ 2 }>Dashboard</NavItem>
23		- </Nav>
24		- <Nav pullRight>
25		- <NavDropdown eventKey={ 3 } title={ userName() } id="basic-nav-dropdown">
26		- <MenuItem eventKey={ 3.3 } onClick={ handleLogout }>Logout</MenuItem>
27		- </NavDropdown>
28		- </Nav>
29		- </div>
30		-)
	18	+export const AuthenticatedNavigation = React.createClass({
	19	+ isActive( route, indexOnly ) {
	20	+ return this.props.activeRoute( route, indexOnly );
	21	+ },
	22	+ handleRouteChange() {
	23	+ this.forceUpdate();
	24	+ },
	25	+ render() {
	26	+ return <div>
	27	+ <Nav>
	28	+ <li className={ this.isActive( '/', true ) } onClick={ this.handleRouteChange }>
	29	+ <Link to="/">Index</Link>
	30	+ </li>
	31	+ <li className={ this.isActive( '/dashboard' ) } onClick={ this.handleRouteChange }>
	32	+ <Link to="/dashboard">Dashboard</Link>
	33	+ </li>
	34	+ </Nav>
	35	+ <Nav pullRight>
	36	+ <NavDropdown eventKey={ 3 } title={ userName() } id="basic-nav-dropdown">
	37	+ <MenuItem eventKey={ 3.3 } onClick={ handleLogout }>Logout</MenuItem>
	38	+ </NavDropdown>
	39	+ </Nav>
	40	+ </div>;
	41	+ }
	42	+});
...	...
1	1	import React from 'react';
2		-import { LinkContainer } from 'react-router-bootstrap';
	2	+import { Link } from 'react-router';
3	3	import { Nav, NavItem } from 'react-bootstrap';
4	4
5		-export const PublicNavigation = ( { router } ) => (
6		- <Nav pullRight>
7		- <NavItem eventKey={ 1 } href="/signup">Sign Up</NavItem>
8		- <NavItem eventKey={ 2 } href="/login">Login</NavItem>
9		- </Nav>
10		-)
	5	+export const PublicNavigation = React.createClass({
	6	+ isActive( route, indexOnly ) {
	7	+ return this.props.activeRoute( route, indexOnly ) ? 'active' : '';
	8	+ },
	9	+ handleRouteChange() {
	10	+ this.forceUpdate();
	11	+ },
	12	+ render() {
	13	+ return <Nav pullRight>
	14	+ <li className={ this.isActive( '/signup' ) } onClick={ this.handleRouteChange }>
	15	+ <Link to="/signup">Sign Up</Link>
	16	+ </li>
	17	+ <li className={ this.isActive( '/login' ) } onClick={ this.handleRouteChange }>
	18	+ <Link to="/login">Log In</Link>
	19	+ </li>
	20	+ </Nav>;
	21	+ }
	22	+});
...	...
...	...	@@ -9,8 +9,9 @@ export const App = React.createClass({
9	9	}
10	10	},
11	11	render() {
	12	+ const { isActive } = this.context.router;
12	13	return <div>
13		- <AppNavigation />
	14	+ <AppNavigation activeRoute={ isActive } />
14	15	<Grid>
15	16	{ this.props.children }
16	17	</Grid>
...	...