From 17ce6ba7b207e889497e4c1d7de2c11a0515af8c Mon Sep 17 00:00:00 2001 From: Juan Bono Date: Fri, 12 May 2017 04:01:48 -0300 Subject: [PATCH] [GD-11] split Item component --- front/public/arrow-thick-bottom.svg | 3 + front/public/arrow-thick-top.svg | 3 + front/public/cog.svg | 4 + front/public/rss_alt.svg | 3 + front/public/x.svg | 3 + front/src/components/Category.js | 73 +++++++++++++---- front/src/components/Header.js | 4 +- front/src/components/Item.js | 108 ++++++++++++++++++++++++-- front/src/components/Item/ItemBody.js | 0 front/src/components/Item/ItemInfo.js | 102 ++++++++++++++++++++++++ front/src/components/Item/index.js | 6 ++ front/src/components/Search.js | 2 + front/src/index.css | 16 +++- front/src/types.js | 6 +- front/src/utils/fetchData.js | 4 +- front/src/utils/index.js | 6 +- 16 files changed, 315 insertions(+), 28 deletions(-) create mode 100644 front/public/arrow-thick-bottom.svg create mode 100644 front/public/arrow-thick-top.svg create mode 100644 front/public/cog.svg create mode 100644 front/public/rss_alt.svg create mode 100644 front/public/x.svg create mode 100644 front/src/components/Item/ItemBody.js create mode 100644 front/src/components/Item/ItemInfo.js create mode 100644 front/src/components/Item/index.js diff --git a/front/public/arrow-thick-bottom.svg b/front/public/arrow-thick-bottom.svg new file mode 100644 index 0000000..0c05067 --- /dev/null +++ b/front/public/arrow-thick-bottom.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/front/public/arrow-thick-top.svg b/front/public/arrow-thick-top.svg new file mode 100644 index 0000000..78b310c --- /dev/null +++ b/front/public/arrow-thick-top.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/front/public/cog.svg b/front/public/cog.svg new file mode 100644 index 0000000..7bbbce4 --- /dev/null +++ b/front/public/cog.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/front/public/rss_alt.svg b/front/public/rss_alt.svg new file mode 100644 index 0000000..b55d816 --- /dev/null +++ b/front/public/rss_alt.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/front/public/x.svg b/front/public/x.svg new file mode 100644 index 0000000..fc7251c --- /dev/null +++ b/front/public/x.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/front/src/components/Category.js b/front/src/components/Category.js index 95e7643..8454505 100644 --- a/front/src/components/Category.js +++ b/front/src/components/Category.js @@ -25,11 +25,18 @@ class Category extends Component { return (
-
- {this.state.cat.title} - {this.state.cat.group} - edit - delete +
+

+ + + category feed + + + {this.state.cat.title} + {this.state.cat.group} + edit + delete +

@@ -38,20 +45,60 @@ class Category extends Component {
-
- { this.state.cat.items - .map(item => ) - } -
+
{ + this.state.cat.items + .map(item => ) + }
diff --git a/front/src/components/Header.js b/front/src/components/Header.js index b1fc7eb..eb504e5 100644 --- a/front/src/components/Header.js +++ b/front/src/components/Header.js @@ -1,3 +1,5 @@ +// @flow + import React, { Component } from 'react'; class Header extends Component { @@ -15,7 +17,7 @@ class Header extends Component { .subtitle { font-weight: 500; color: #e03; - margin-top: 0.4em; + margin-top: 0.8em; margin-bottom: 2em; } diff --git a/front/src/components/Item.js b/front/src/components/Item.js index 8b19c82..fb5845ab 100644 --- a/front/src/components/Item.js +++ b/front/src/components/Item.js @@ -1,16 +1,112 @@ +// @flow + import React, { Component } from 'react'; import ReactMarkdown from 'react-markdown'; +import * as T from '../types'; +import { mkHackageUrl } from '../utils/index'; +import { ItemInfo } from './Item/index'; class Item extends Component { render() { + const item : T.Item = this.props; + return (
-
-

{this.props.name}

-

{this.props.kind.tag} {this.props.link}

-
- -
+ +
+
+ Summary + +
+
+
+
+
+ Pros +
    + {item.pros.map(p => +
  • + +
    • ) } +
+
+
+ Cons +
    + {item.cons.map(c => +
  • + +
    • ) } +
+
+
+
+
+
+
+
+ Ecosystem +
+
+
+
+
+
+ + Notes + +
+ +
+
+
+
+
+
+
) } diff --git a/front/src/components/Item/ItemBody.js b/front/src/components/Item/ItemBody.js new file mode 100644 index 0000000..e69de29 diff --git a/front/src/components/Item/ItemInfo.js b/front/src/components/Item/ItemInfo.js new file mode 100644 index 0000000..c477573 --- /dev/null +++ b/front/src/components/Item/ItemInfo.js @@ -0,0 +1,102 @@ +// @flow + +import React, { Component } from 'react'; +import * as T from '../../types'; +import { mkHackageUrl } from '../../utils/index'; + +class ItemInfo extends Component { + render() { + const item : T.Item = this.props; + + return ( +
+
+
+ # +
+
+ {item.name + " "} + ( Hackage ) + +
+
+ {item.kind.tag} +
+
+ + + move item up + + + move item down + + + + + edit item info + + + + + delete item + + +
+
+ +
+ ) + } +} + +module.exports = { ItemInfo } \ No newline at end of file diff --git a/front/src/components/Item/index.js b/front/src/components/Item/index.js new file mode 100644 index 0000000..d3d6b87 --- /dev/null +++ b/front/src/components/Item/index.js @@ -0,0 +1,6 @@ +import { ItemInfo } from './ItemInfo'; + + +module.exports = { + ItemInfo +} \ No newline at end of file diff --git a/front/src/components/Search.js b/front/src/components/Search.js index 05d212a..c579a5f 100644 --- a/front/src/components/Search.js +++ b/front/src/components/Search.js @@ -1,3 +1,5 @@ +// @flow + import React, { Component } from 'react'; class Search extends Component { diff --git a/front/src/index.css b/front/src/index.css index 519fba5..1edbd45 100644 --- a/front/src/index.css +++ b/front/src/index.css @@ -1,7 +1,19 @@ + body { - margin: 0; - padding: 0; + padding: 0px 15px; + padding-top: 2em; + margin: auto; + max-width: 800px; font-family: sans-serif; + line-height: 120%; +} + +/* Making the footer stick to the bottom of the screen */ + +body { + display: flex; + min-height: 100vh; + flex-direction: column; } blockquote { diff --git a/front/src/types.js b/front/src/types.js index d6e5598..10fc30e 100644 --- a/front/src/types.js +++ b/front/src/types.js @@ -18,7 +18,7 @@ export type Description = { html : string }; -export type Valoration = { +export type Trait = { uid : string, content : Description, }; @@ -44,8 +44,8 @@ export type Item = { prosDeleted : Array, notes : Note, description: Description, - pros : Array, - cons : Array + pros : Array, + cons : Array }; export type Cat = { diff --git a/front/src/utils/fetchData.js b/front/src/utils/fetchData.js index 4de4614..95919f8 100644 --- a/front/src/utils/fetchData.js +++ b/front/src/utils/fetchData.js @@ -1,6 +1,6 @@ // @flow -function checkStatus(response) { +function checkStatus(response : Response) { if (response.status >= 200 && response.status < 300) { return response; } else { @@ -8,7 +8,7 @@ function checkStatus(response) { } } -function parseJSON(response) { +function parseJSON(response : Response) { return response.json(); } diff --git a/front/src/utils/index.js b/front/src/utils/index.js index d828f89..6a75945 100644 --- a/front/src/utils/index.js +++ b/front/src/utils/index.js @@ -1,3 +1,5 @@ +// @flow + import { fetchData } from './fetchData'; import * as T from '../types'; @@ -8,9 +10,11 @@ function extractUid(link : string) { const mkLink = (cat : T.Cat) => cat.title.toLowerCase() + "-" + cat.uid; +const mkHackageUrl = (item : T.Item) => "https://hackage.haskell.org/package/" + item.kind.hackageName; module.exports = { fetchData, extractUid, - mkLink + mkLink, + mkHackageUrl }