Add Radium

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));
   });
-});
+});

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");
-}
+}

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");
-}
+}

src/routers/app.jsx

@@ -0,0 +1,48 @@
+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";
+
+
+// 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} />
+    );
+  }
+}
+
+AppRouter.getRoutes = function() {
+  let routes;
+
+  if (Session.isLoggedIn()) {
+    routes = LoggedInRouter.getRoutes();
+  } else {
+    routes = LoggedOutRouter.getRoutes();
+  }
+
+  return (
+    <Route name="app" path="/" handler={AppRouter}>
+      {routes}
+    </Route>
+  );
+}

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>
   );
-}
+}

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>
   );
-}
+}