From e47b9c2c9132ac2575c16b7edbca970828bbf3b3 Mon Sep 17 00:00:00 2001
From: Paul Young <paulyoungonline@gmail.com>
Date: Sun, 22 Mar 2015 00:57:43 -0700
Subject: [PATCH 1/2] Add app router in preparation for media queries.

*
https://github.com/formidablelabs/radium/blob/master/docs/guides/media-q
ueries.md
*
https://github.com/rackt/react-router/blob/master/examples/shared-root/a
pp.js
---
 src/main.jsx               | 16 +++-------------
 src/routers/app.jsx        | 34 ++++++++++++++++++++++++++++++++++
 src/routers/logged_in.jsx  |  4 ++--
 src/routers/logged_out.jsx |  4 ++--
 4 files changed, 41 insertions(+), 17 deletions(-)
 create mode 100644 src/routers/app.jsx

diff --git a/src/main.jsx b/src/main.jsx
index 5cb1d28..18f9811 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -9,26 +9,16 @@ import "babel-core/polyfill";
 import React from "react";
 import Router from "react-router";
 
-// Common utilities
-import Session from "./common/session";
 
 // Routers
-import LoggedOutRouter from "./routers/logged_out";
-import LoggedInRouter from "./routers/logged_in";
+import AppRouter from "./routers/app";
 
 
 // ID of the DOM element to mount app on
 const DOM_APP_EL_ID = "app";
 
 
-// Initialize routes depending on session
-let routes;
-
-if (Session.isLoggedIn()) {
-  routes = LoggedInRouter.getRoutes();
-} else {
-  routes = LoggedOutRouter.getRoutes();
-}
+let routes = AppRouter.getRoutes();
 
 /**
  * Given a set of routes and params associated with the current active state,
@@ -79,4 +69,4 @@ Router.run(routes, function(Handler, state) {
   fetchData(state.routes, state.params).then((data) => {
     React.render(<Handler data={data} />, document.getElementById(DOM_APP_EL_ID));
   });
-});
\ No newline at end of file
+});
diff --git a/src/routers/app.jsx b/src/routers/app.jsx
new file mode 100644
index 0000000..0ec4433
--- /dev/null
+++ b/src/routers/app.jsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { Route, RouteHandler } from "react-router";
+
+// Routers
+import LoggedOutRouter from "./logged_out";
+import LoggedInRouter from "./logged_in";
+
+// Common utilities
+import Session from "../common/session";
+
+
+export default class AppRouter extends React.Component {
+  render() {
+    return (
+      <RouteHandler {...this.props} />
+    );
+  }
+}
+
+AppRouter.getRoutes = function() {
+  let routes;
+
+  if (Session.isLoggedIn()) {
+    routes = LoggedInRouter.getRoutes();
+  } else {
+    routes = LoggedOutRouter.getRoutes();
+  }
+
+  return (
+    <Route name="app" path="/" handler={AppRouter}>
+      {routes}
+    </Route>
+  );
+}
diff --git a/src/routers/logged_in.jsx b/src/routers/logged_in.jsx
index 60e3c54..e36afdb 100644
--- a/src/routers/logged_in.jsx
+++ b/src/routers/logged_in.jsx
@@ -27,8 +27,8 @@ export default class LoggedInRouter extends React.Component {
 
 LoggedInRouter.getRoutes = function() {
   return (
-    <Route name="app" path="/" handler={LoggedInRouter}>
+    <Route handler={LoggedInRouter}>
       <DefaultRoute name="home" handler={HomePage} />
     </Route>
   );
-}
\ No newline at end of file
+}
diff --git a/src/routers/logged_out.jsx b/src/routers/logged_out.jsx
index a9d7b3c..aaa4455 100644
--- a/src/routers/logged_out.jsx
+++ b/src/routers/logged_out.jsx
@@ -19,8 +19,8 @@ export default class LoggedOutRouter extends React.Component {
 
 LoggedOutRouter.getRoutes = function() {
   return (
-    <Route name="app" path="/" handler={LoggedOutRouter}>
+    <Route handler={LoggedOutRouter}>
       <DefaultRoute name="landing" handler={LandingPage} />
     </Route>
   );
-}
\ No newline at end of file
+}

From ff0cad841267a16cacc00c50bc1c7d15dd3a50bf Mon Sep 17 00:00:00 2001
From: Paul Young <paulyoungonline@gmail.com>
Date: Sun, 22 Mar 2015 12:49:32 -0700
Subject: [PATCH 2/2] Outline what media queries with Radium might look like.

---
 src/pages/home/page.jsx    |  7 ++++++-
 src/pages/landing/page.jsx |  7 ++++++-
 src/routers/app.jsx        | 14 ++++++++++++++
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/pages/home/page.jsx b/src/pages/home/page.jsx
index fa7d188..42f75bc 100644
--- a/src/pages/home/page.jsx
+++ b/src/pages/home/page.jsx
@@ -1,8 +1,13 @@
 import React from "react";
 import { getData } from "../../common/request";
+// import { MatchMediaItem } from "radium"
 
 
 export default class HomePage extends React.Component {
+  // constructor() {
+  //   this.mixins = [MatchMediaItem]
+  // }
+
   componentWillMount() {
     console.log("[HomePage] will mount with server response: ", this.props.data.home);
   }
@@ -20,4 +25,4 @@ export default class HomePage extends React.Component {
 
 HomePage.fetchData = function(params) {
   return getData("/home");
-}
\ No newline at end of file
+}
diff --git a/src/pages/landing/page.jsx b/src/pages/landing/page.jsx
index 83b3447..5039361 100644
--- a/src/pages/landing/page.jsx
+++ b/src/pages/landing/page.jsx
@@ -1,8 +1,13 @@
 import React from "react";
 import { getData } from "../../common/request";
+// import { MatchMediaItem } from "radium"
 
 
 export default class LandingPage extends React.Component {
+  // constructor() {
+  //   this.mixins = [MatchMediaItem]
+  // }
+
   componentWillMount() {
     console.log("[LandingPage] will mount with server response: ", this.props.data.landing);
   }
@@ -20,4 +25,4 @@ export default class LandingPage extends React.Component {
 
 LandingPage.fetchData = function(params) {
   return getData("/landing");
-}
\ No newline at end of file
+}
diff --git a/src/routers/app.jsx b/src/routers/app.jsx
index 0ec4433..03a7e4d 100644
--- a/src/routers/app.jsx
+++ b/src/routers/app.jsx
@@ -9,7 +9,21 @@ import LoggedInRouter from "./logged_in";
 import Session from "../common/session";
 
 
+// Media queries
+// import { MatchMediaBase } from "radium"
+
+
+// MatchMediaBase.init({
+//   sm: "(min-width: 768px)",
+//   md: "(min-width: 992px)",
+//   lg: "(min-width: 1200px)"
+// });
+
 export default class AppRouter extends React.Component {
+  constructor() {
+    // this.mixins = [MatchMediaBase]
+  }
+
   render() {
     return (
       <RouteHandler {...this.props} />