From 33c50ece015509a0271509d7025490c3e61ddf83 Mon Sep 17 00:00:00 2001 From: Juan Bono Date: Tue, 2 May 2017 04:11:19 -0300 Subject: [PATCH] [GD-11] split App.js in several files and replace render-if with jsx-control-statements --- front/config/webpack.config.dev.js | 2 +- front/package.json | 3 +- front/src/App.js | 133 +------------------------- front/src/components/GrandCategory.js | 89 +++++++++++++++++ front/src/components/Tiles.js | 30 ++++++ front/src/components/index.js | 7 ++ front/src/types.js | 13 +++ 7 files changed, 144 insertions(+), 133 deletions(-) create mode 100644 front/src/components/GrandCategory.js create mode 100644 front/src/components/Tiles.js create mode 100644 front/src/components/index.js create mode 100644 front/src/types.js diff --git a/front/config/webpack.config.dev.js b/front/config/webpack.config.dev.js index b4df653..97fe7c7 100644 --- a/front/config/webpack.config.dev.js +++ b/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/ diff --git a/front/package.json b/front/package.json index 95574bc..2ac6410 100644 --- a/front/package.json +++ b/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", diff --git a/front/src/App.js b/front/src/App.js index 819f88c..8913171 100644 --- a/front/src/App.js +++ b/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, - wip : Array, - stubs : Array - } - -class GrandCategory extends Component { - props: { - val: GrandCategoryT - }; - render() { - const renderBigCatLink = cat => { - return( - - {cat.title} - - - ); - }; - - const renderSmallCatLink = cat => { - return( - - {cat.title} - - - ); - }; - - const grand = this.props.val; - - return( -
-

{grand.title}

- -
- {grand.finished.map(renderBigCatLink)} -
- - {renderIf(!R.isEmpty(grand.wip))( -
-

In progress

-

{R.intersperse(", ")( - grand.wip.map(renderSmallCatLink))}

-
- )} - - {renderIf(!R.isEmpty(grand.stubs))( -
-

To be written

-

{R.intersperse(", ")( - grand.stubs.map(renderSmallCatLink))}

-
- )} - - -
- ); - } -} - class App extends Component { state: { categories: Array; @@ -151,34 +53,3 @@ class App extends Component { } export default App; - -// -// Utils -// - -// Tiles grouped into columns -class Tiles extends Component { - render() { - return( -
- {this.props.children} - - -
- ); - } -} diff --git a/front/src/components/GrandCategory.js b/front/src/components/GrandCategory.js new file mode 100644 index 0000000..8e15d4f --- /dev/null +++ b/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( + + {cat.title} + + + ); + }; + + const renderSmallCatLink = cat => { + return( + + {cat.title} + + + ); + }; + + const grand = this.props.val; + + return( +
+

{grand.title}

+ +
+ {grand.finished.map(renderBigCatLink)} +
+ + +
+

In progress

+

{R.intersperse(", ")(grand.wip.map(renderSmallCatLink))}

+
+ + + +
+

To be written

+

{R.intersperse(", ")(grand.stubs.map(renderSmallCatLink))}

+
+ + + +
+ ); + } +} + +module.exports = { GrandCategory } diff --git a/front/src/components/Tiles.js b/front/src/components/Tiles.js new file mode 100644 index 0000000..a0f8520 --- /dev/null +++ b/front/src/components/Tiles.js @@ -0,0 +1,30 @@ +import React, { Component } from 'react'; + +// Tiles grouped into columns +class Tiles extends Component { + render() { + return( +
+ {this.props.children} + + +
+ ); + } +} + +module.exports = { Tiles } \ No newline at end of file diff --git a/front/src/components/index.js b/front/src/components/index.js new file mode 100644 index 0000000..8a332f9 --- /dev/null +++ b/front/src/components/index.js @@ -0,0 +1,7 @@ +import { GrandCategory } from './GrandCategory'; +import { Tiles } from './Tiles'; + +module.exports = { + GrandCategory, + Tiles +} \ No newline at end of file diff --git a/front/src/types.js b/front/src/types.js new file mode 100644 index 0000000..fafa3cd --- /dev/null +++ b/front/src/types.js @@ -0,0 +1,13 @@ + +export type Category = { + uid : string, + link : string, + title : string + }; + +export type GrandCategoryT = { + title : string, + finished : Array, + wip : Array, + stubs : Array + }