Move page/screen components to src/routes along with the routing info

Author: koistya

README.md

@@ -42,6 +42,7 @@ visit our sponsors:
 │   ├── /data/                  # GraphQL server schema
 │   ├── /decorators/            # Higher-order React components
 │   ├── /public/                # Static files which are copied into the /build/public folder
+│   ├── /routes/                # Page/screen components along with the routing information
 │   ├── /stores/                # Stores contain the application state and logic
 │   ├── /views/                 # Express.js views for index and error pages
 │   ├── /client.js              # Client-side startup script

package.json

@@ -64,11 +64,11 @@
     "glob": "^7.0.0",
     "jade-loader": "^0.8.0",
     "jest-cli": "^0.8.2",
-    "jscs": "^2.10.1",
+    "jscs": "^2.11.0",
     "json-loader": "^0.5.4",
     "mkdirp": "^0.5.1",
     "ncp": "^2.0.0",
-    "postcss": "^5.0.18",
+    "postcss": "^5.0.19",
     "postcss-import": "^8.0.2",
     "postcss-loader": "^0.8.1",
     "postcss-scss": "^0.1.6",
@@ -80,8 +80,8 @@
     "replace": "^0.3.0",
     "url-loader": "^0.5.7",
     "webpack": "^1.12.14",
-    "webpack-hot-middleware": "^2.8.1",
-    "webpack-middleware": "^1.4.0"
+    "webpack-hot-middleware": "^2.9.0",
+    "webpack-middleware": "^1.5.1"
   },
   "jest": {
     "rootDir": "./src",

src/components/ContactPage/ContactPage.js

@@ -0,0 +1,39 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+import { GraphQLList as List } from 'graphql';
+import fetch from '../../core/fetch';
+import NewsItemType from '../types/NewsItemType';
+
+// React.js News Feed (RSS)
+const url = 'http://ajax.googleapis.com/ajax/services/feed/load' +
+            '?v=1.0&num=10&q=https://reactjsnews.com/feed.xml';
+
+let items = [];
+let lastFetchTime = new Date(1970, 0, 1);
+
+const news = {
+  type: new List(NewsItemType),
+  resolve() {
+    if ((new Date() - lastFetchTime) > 1000 * 60 * 10 /* 10 mins */) {
+      lastFetchTime = new Date();
+      fetch(url)
+        .then(response => response.json())
+        .then(data => {
+          if (data.responseStatus === 200) {
+            items = data.responseData.feed.entries;
+          }
+        });
+    }
+
+    return items;
+  },
+};
+
+export default news;

src/components/ContactPage/package.json

@@ -14,13 +14,15 @@ import {
 
 import me from './queries/me';
 import content from './queries/content';
+import news from './queries/news';
 
 const schema = new Schema({
   query: new ObjectType({
     name: 'Query',
     fields: {
       me,
       content,
+      news,
     },
   }),
 });

src/components/LoginPage/LoginPage.js

@@ -0,0 +1,27 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+import {
+  GraphQLObjectType as ObjectType,
+  GraphQLString as StringType,
+  GraphQLNonNull as NonNull,
+} from 'graphql';
+
+const NewsItemType = new ObjectType({
+  name: 'NewsItem',
+  fields: {
+    title: { type: new NonNull(StringType) },
+    link: { type: new NonNull(StringType) },
+    author: { type: StringType },
+    publishedDate: { type: new NonNull(StringType) },
+    contentSnippet: { type: StringType },
+  },
+});
+
+export default NewsItemType;

src/components/LoginPage/package.json

@@ -12,23 +12,25 @@ import Router from 'react-routing/src/Router';
 import fetch from './core/fetch';
 import App from './components/App';
 import ContentPage from './components/ContentPage';
-import ContactPage from './components/ContactPage';
-import LoginPage from './components/LoginPage';
-import RegisterPage from './components/RegisterPage';
 import NotFoundPage from './components/NotFoundPage';
 import ErrorPage from './components/ErrorPage';
 
+const routes = [
+  require('./routes/home'),
+  require('./routes/contact'),
+  require('./routes/login'),
+  require('./routes/register'),
+];
+
 const router = new Router(on => {
   on('*', async (state, next) => {
     const component = await next();
     return component && <App context={state.context}>{component}</App>;
   });
 
-  on('/contact', async () => <ContactPage />);
-
-  on('/login', async () => <LoginPage />);
-
-  on('/register', async () => <RegisterPage />);
+  routes.forEach(route => {
+    on(route.path, route.action);
+  });
 
   on('*', async (state) => {
     const query = `/graphql?query={content(path:"${state.path}"){path,title,content,component}}`;

src/components/RegisterPage/RegisterPage.js

@@ -0,0 +1,18 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import Contact from './Contact';
+
+export const path = '/contact';
+export const action = async (state) => {
+  const title = 'Contact Us';
+  state.context.onSetTitle(title);
+  return <Contact title={title} />;
+};

src/components/RegisterPage/package.json

@@ -0,0 +1,43 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+import React, { PropTypes } from 'react';
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import s from './Home.scss';
+
+function Home({ news }) {
+  return (
+    <div className={s.root}>
+      <div className={s.container}>
+        <h1 className={s.title}>React.js News</h1>
+        <ul className={s.news}>
+          {news.map((item, index) => (
+            <li key={index} className={s.newsItem}>
+              <a href={item.link} className={s.newsTitle}>{item.title}</a>
+              <span
+                className={s.newsDesc}
+                dangerouslySetInnerHTML={{ __html: item.contentSnippet }}
+              />
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+Home.propTypes = {
+  news: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    link: PropTypes.string.isRequired,
+    contentSnippet: PropTypes.string,
+  })).isRequired,
+};
+
+export default withStyles(Home, s);

src/data/queries/news.js

@@ -0,0 +1,38 @@
+/**
+ * React Starter Kit (https://www.reactstarterkit.com/)
+ *
+ * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+@import '../../components/variables.scss';
+
+.root {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.container {
+  margin: 0 auto;
+  padding: 0 0 40px;
+  max-width: $max-content-width;
+}
+
+.news {
+  padding: 0;
+}
+
+.newsItem {
+  list-style-type: none;
+  padding-bottom: 6px;
+}
+
+.newsTitle {
+  font-size: 1.125em;
+}
+
+.newsTitle, .newsDesc {
+  display: block;
+}