move html into components

Author: willrstern

2-react-router/src/js/client.js

@@ -2,8 +2,6 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { Router, Route, IndexRoute, hashHistory } from "react-router";
 
-import Bootstrap from "./vendor/bootstrap-without-jquery";
-
 import Archives from "./pages/Archives";
 import Featured from "./pages/Featured";
 import Layout from "./pages/Layout";

2-react-router/src/js/components/Article.js

@@ -6,7 +6,7 @@ export default class extends React.Component {
 
     return (
       <div class="col-md-4">
-        <h2>{title}</h2>
+        <h4>{title}</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rem nisi accusamus error velit animi non ipsa placeat. Recusandae, suscipit, soluta quibusdam accusamus a veniam quaerat eveniet eligendi dolor consectetur.</p>
         <a class="btn btn-default" href="#">More Info</a>
       </div>

2-react-router/src/js/components/layout/nav.js

@@ -2,33 +2,47 @@ import React from "react";
 import { IndexLink, Link } from "react-router";
 
 export default class Nav extends React.Component {
+  constructor() {
+    super()
+    this.state = {
+      collapsed: true,
+    };
+  }
+
+  toggleCollapse() {
+    const collapsed = !this.state.collapsed;
+    this.setState({collapsed});
+  }
+
   render() {
     const { location } = this.props;
+    const { collapsed } = this.state;
     const featuredClass = location.pathname === "/" ? "active" : "";
     const archivesClass = location.pathname.match(/^\/archives/) ? "active" : "";
     const settingsClass = location.pathname.match(/^\/settings/) ? "active" : "";
+    const navClass = collapsed ? "collapse" : "";
 
     return (
       <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
         <div class="container">
           <div class="navbar-header">
-            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+            <button type="button" class="navbar-toggle" onClick={this.toggleCollapse.bind(this)} >
               <span class="sr-only">Toggle navigation</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
             </button>
           </div>
-          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+          <div class={"navbar-collapse " + navClass} id="bs-example-navbar-collapse-1">
             <ul class="nav navbar-nav">
               <li class={featuredClass}>
-                <IndexLink to="/">Featured</IndexLink>
+                <IndexLink to="/" onClick={this.toggleCollapse.bind(this)}>Featured</IndexLink>
               </li>
               <li class={archivesClass}>
-                <Link to="archives">Archives</Link>
+                <Link to="archives" onClick={this.toggleCollapse.bind(this)}>Archives</Link>
               </li>
               <li class={settingsClass}>
-                <Link to="settings">Settings</Link>
+                <Link to="settings" onClick={this.toggleCollapse.bind(this)}>Settings</Link>
               </li>
             </ul>
           </div>

2-react-router/src/js/pages/Featured.js

@@ -9,6 +9,14 @@ export default class Featured extends React.Component {
       "Some Other Article",
       "Yet Another Article",
       "Still More",
+      "Some Article",
+      "Some Other Article",
+      "Yet Another Article",
+      "Still More",
+      "Some Article",
+      "Some Other Article",
+      "Yet Another Article",
+      "Still More",
     ].map((title, i) => <Article key={i} title={title}/> );
 
     const adText = [
@@ -20,7 +28,7 @@ export default class Featured extends React.Component {
     ];
 
     const randomAd = adText[Math.round( Math.random() * (adText.length-1) )];
-
+    console.log("featured");
     return (
       <div>
         <div class="row">

2-react-router/src/js/pages/Layout.js

@@ -6,15 +6,15 @@ import Nav from "../components/layout/Nav";
 
 export default class Layout extends React.Component {
   render() {
-    const { history, location } = this.props;
+    const { location } = this.props;
     const containerStyle = {
       marginTop: "60px"
     };
-
+    console.log("layout");
     return (
       <div>
 
-        <Nav {...{history, location}} />
+        <Nav location={location} />
 
         <div class="container" style={containerStyle}>
           <div class="row">

2-react-router/src/js/pages/Settings.js

@@ -2,6 +2,7 @@ import React from "react";
 
 export default class Settings extends React.Component {
   render() {
+    console.log("settings");
     return (
       <h1>Settings</h1>
     );