[GD-11] split App.js in several files and replace render-if with jsx-control-statements

front/config/webpack.config.dev.js

@@ -127,7 +127,7 @@ module.exports = {
         include: paths.appSrc,
         loader: 'babel',
         query: {
-          plugins: ['styled-jsx/babel'],
+          plugins: ['styled-jsx/babel', 'jsx-control-statements'],
 
           // This is a feature of `babel-loader` for webpack (not Babel itself).
           // It enables caching results in ./node_modules/.cache/babel-loader/

front/package.json

@@ -6,7 +6,7 @@
     "ramda": "^0.23.0",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
-    "render-if": "^0.1.1",
+    "react-router-dom": "^4.1.1",
     "styled-jsx": "^0.5.7"
   },
   "devDependencies": {
@@ -39,6 +39,7 @@
     "http-proxy-middleware": "0.17.3",
     "jest": "18.1.0",
     "json-loader": "0.5.4",
+    "jsx-control-statements": "^3.1.5",
     "object-assign": "4.1.1",
     "postcss-loader": "1.2.2",
     "promise": "7.1.1",

front/src/App.js

@@ -1,8 +1,8 @@
 // @flow
 
 import React, { Component } from 'react';
-import renderIf from 'render-if';
-import R from 'ramda';
+import { GrandCategory, Tiles } from './components/index';
+import { GrandCategoryT } from './types';
 
 function checkStatus(response) {
   if (response.status >= 200 && response.status < 300) {
@@ -16,104 +16,6 @@ function parseJSON(response) {
   return response.json();
 }
 
-type Category = {
-  uid   : string,
-  link  : string,
-  title : string
-  };
-
-type GrandCategoryT = {
-  title    : string,
-  finished : Array<Category>,
-  wip      : Array<Category>,
-  stubs    : Array<Category>
-  }
-
-class GrandCategory extends Component {
-  props: {
-    val: GrandCategoryT
-  };
-  render() {
-    const renderBigCatLink = cat => {
-      return(
-        <span>
-          <a key={cat.uid} href={cat.link}>{cat.title}</a>
-          <style jsx>{`
-            a {
-              display: block;
-              font-size: 21px;
-              line-height: 28px;
-            }
-          `}</style>
-        </span>
-      );
-    };
-
-    const renderSmallCatLink = cat => {
-      return(
-        <span>
-          <a key={cat.uid} href={cat.link}>{cat.title}</a>
-          <style jsx>{`
-            a {white-space: nowrap;}
-          `}</style>
-        </span>
-      );
-    };
-
-    const grand = this.props.val;
-
-    return(
-      <div className="GrandCategory" key={grand.title}>
-        <h1>{grand.title}</h1>
-        
-        <div className="finished">
-          {grand.finished.map(renderBigCatLink)}
-        </div>
-
-        {renderIf(!R.isEmpty(grand.wip))(
-          <div className="wip">
-            <h2>In progress</h2>
-            <p>{R.intersperse(", ")(
-                  grand.wip.map(renderSmallCatLink))}</p>
-          </div>
-        )}
-
-        {renderIf(!R.isEmpty(grand.stubs))(
-          <div className="stubs">
-            <h2>To be written</h2>
-            <p>{R.intersperse(", ")(
-                  grand.stubs.map(renderSmallCatLink))}</p>
-          </div>
-        )}
-
-        <style jsx>{`
-          .GrandCategory :global(*) {
-            font-weight: 600;
-          }
-          .GrandCategory {
-            width: 330px;
-            margin-bottom: 30px;
-          }
-          .GrandCategory > div {
-            margin-left: 2em;
-          }
-          .wip h2, .stubs h2 {
-            font-size: 15px;
-            margin-top: 1em;
-            margin-bottom: 0px;
-          }
-          .wip p, .stubs p {
-            padding-left: 2em;
-            margin: 1px 0px;
-            line-height: 18px;
-            font-size: 15px;
-          }
-        `}</style>
-      </div>
-    );
-  }
-}
-
 class App extends Component {
   state: {
     categories: Array<GrandCategoryT>;
@@ -151,34 +53,3 @@ class App extends Component {
 }
 
 export default App;
-
-//
-// Utils
-//
-
-// Tiles grouped into columns
-class Tiles extends Component {
-  render() {
-    return(
-      <div className="Tiles">
-        {this.props.children}
-        
-        <style jsx>{`
-          .Tiles {
-            display: flex;
-            flex-flow: row wrap;
-            justify-content: space-between;
-            margin-left:  -{this.props.space};
-            margin-right: -{this.props.space};
-          }
-          .Tiles > * {
-            flex-grow: 1;
-            flex-basis: 0;
-            margin-left:  {this.props.space};
-            margin-right: {this.props.space};
-          }
-        `}</style>
-      </div>
-    );
-  }
-}

front/src/components/GrandCategory.js

@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import { If } from 'jsx-control-statements';
+import R from 'ramda';
+import { GrandCategoryT } from '../types';
+
+class GrandCategory extends Component {
+  props: {
+    val: GrandCategoryT
+  };
+  render() {
+    const renderBigCatLink = cat => {
+      return(
+        <span>
+          <a key={cat.uid} href={cat.link}>{cat.title}</a>
+          <style jsx>{`
+            a {
+              display: block;
+              font-size: 21px;
+              line-height: 28px;
+            }
+          `}</style>
+        </span>
+      );
+    };
+
+    const renderSmallCatLink = cat => {
+      return(
+        <span>
+          <a key={cat.uid} href={cat.link}>{cat.title}</a>
+          <style jsx>{`
+            a {white-space: nowrap;}
+          `}</style>
+        </span>
+      );
+    };
+
+    const grand = this.props.val;
+
+    return(
+      <div className="GrandCategory" key={grand.title}>
+        <h1>{grand.title}</h1>
+
+        <div className="finished">
+          {grand.finished.map(renderBigCatLink)}
+        </div>
+
+        <If condition={!R.isEmpty(grand.wip)}>
+          <div className="wip">
+            <h2>In progress</h2>
+            <p>{R.intersperse(", ")(grand.wip.map(renderSmallCatLink))}</p>
+          </div>
+        </If>
+
+        <If condition={!R.isEmpty(grand.stubs)}>
+          <div className="stubs">
+            <h2>To be written</h2>
+            <p>{R.intersperse(", ")(grand.stubs.map(renderSmallCatLink))}</p>
+          </div>
+        </If>
+
+        <style jsx>{`
+          .GrandCategory :global(*) {
+            font-weight: 600;
+          }
+          .GrandCategory {
+            width: 330px;
+            margin-bottom: 30px;
+          }
+          .GrandCategory > div {
+            margin-left: 2em;
+          }
+          .wip h2, .stubs h2 {
+            font-size: 15px;
+            margin-top: 1em;
+            margin-bottom: 0px;
+          }
+          .wip p, .stubs p {
+            padding-left: 2em;
+            margin: 1px 0px;
+            line-height: 18px;
+            font-size: 15px;
+          }
+        `}</style>
+      </div>
+    );
+  }
+}
+
+module.exports = { GrandCategory }

front/src/components/Tiles.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+
+// Tiles grouped into columns
+class Tiles extends Component {
+  render() {
+    return(
+      <div className="Tiles">
+        {this.props.children}
+
+        <style jsx>{`
+          .Tiles {
+            display: flex;
+            flex-flow: row wrap;
+            justify-content: space-between;
+            margin-left:  -{this.props.space};
+            margin-right: -{this.props.space};
+          }
+          .Tiles > * {
+            flex-grow: 1;
+            flex-basis: 0;
+            margin-left:  {this.props.space};
+            margin-right: {this.props.space};
+          }
+        `}</style>
+      </div>
+    );
+  }
+}
+
+module.exports = { Tiles }

front/src/components/index.js

@@ -0,0 +1,7 @@
+import { GrandCategory } from './GrandCategory';
+import { Tiles } from './Tiles';
+
+module.exports = {
+    GrandCategory,
+    Tiles
+}

front/src/types.js

@@ -0,0 +1,13 @@
+
+export type Category = {
+  uid   : string,
+  link  : string,
+  title : string
+  };
+
+export type GrandCategoryT = {
+  title    : string,
+  finished : Array<Category>,
+  wip      : Array<Category>,
+  stubs    : Array<Category>
+  }