[GD-11] add more components

front/package.json

@@ -6,6 +6,7 @@
     "ramda": "^0.23.0",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
+    "react-markdown": "^2.5.0",
     "react-router-dom": "^4.1.1",
     "styled-jsx": "^0.5.7"
   },

front/src/App.js

@@ -1,16 +1,18 @@
 // @flow
 
 import React, { Component } from 'react';
-import { Category, Home, NoMatch } from './components/index';
+import { Category, Home, NoMatch, Search, Header } from './components/index';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
+        <Header />
+        <Search />
         <Router>
           <Switch>
-            <Route exact path="/" component={ Home } />
+            <Route exact path="/haskell" component={ Home } />
             <Route path="/haskell/:uid" component={ Category } />
             <Route component={ NoMatch } />
           </Switch>

front/src/components/Category.js

@@ -2,46 +2,61 @@
 
 import React, { Component } from 'react';
 import * as T from '../types';
-import { fetchData } from '../utils/index';
+import { fetchData, extractUid, mkLink } from '../utils/index';
 import { If } from 'jsx-control-statements';
-
-function extractUid(link : string) {
-    const lastOccur = link.lastIndexOf('-');
-    return link.slice(lastOccur + 1);
-}
+import { Item } from './Item';
+import ReactMarkdown from 'react-markdown';
 
 class Category extends Component {
   state: {
-    cat: T.Cat;
+    cat : T.Cat
   };
   componentWillMount() {
-    this.setState({ cat: [] });
+    this.setState({ cat: undefined});
   }
   componentDidMount() {
     const uid = extractUid(this.props.match.params.uid);
 
     fetchData('http://localhost:8080/haskell/api/category/'+uid)
-      .then(data => this.setState({cat: data}))
+      .then((data : T.Cat) => this.setState({cat: data}))
   }
-    render() {
+  render() {
 
-      const item = (uid, name) => {
-        return ( <li key={uid}>{name}</li> )
-      }
-
-      return (
-        <div>
-          <h1>{ this.state.cat.title }</h1>
-          <If condition={this.state.cat.description !== undefined}>
-             <div dangerouslySetInnerHTML={{__html:
-                    this.state.cat.description.html}} />
-          </If>
-          <If condition={this.state.cat.items !== undefined}>
-              { this.state.cat.items.map(i => item(i.uid, i.name)) }
-          </If>
+    return (
+      <div>
+        <If condition={this.state.cat !== undefined}>
+          <div className="cat-header">
+          <a href={mkLink(this.state.cat)} className="category-title">{this.state.cat.title}</a>
+          <span className="group">{this.state.cat.group}</span>
+          <span className="text-button"><a href="#">edit</a></span>
+          <span className="text-button"><a href="#">delete</a></span>
+          </div>
+          <div id={"category-notes-"+this.state.cat.uid} className="category-notes">
+          <div className="noscript-shown shown normal section">
+            <div className="notes-like">
+              <ReactMarkdown source={this.state.cat.description.text}/>
+            </div>
+          </div>
+          </div>
+          <div>
+              { this.state.cat.items
+                  .map(item => <Item key={item.uid} {...item}/>)
+              }
+          </div>
+        </If>
+        <style jsx>{`
+          .cat-header {
+            display:flex;
+            justify-content: flex-start;    
+          }
+          .cat-header span {
+            margin-left: 1em;
+          } 
+          `}
+        </style>
         </div>
-        )
-    }
+      )
+  }
 }
 
 module.exports = { Category }

front/src/components/GrandCategory.js

@@ -3,7 +3,7 @@
 import React, { Component } from 'react';
 import { If } from 'jsx-control-statements';
 import R from 'ramda';
-import { GrandCategoryT } from '../types';
+import type { GrandCategoryT } from '../types';
 
 class GrandCategory extends Component {
   props: {

front/src/components/Header.js

@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+
+class Header extends Component {
+    
+    render() {
+        return (
+          <div>
+            <h1 className="header">
+              <a href="/haskell">
+                Aelve Guide <span>| Haskell</span>
+              </a>
+            </h1>
+            <div className="subtitle">alpha version • don &#39;t post on Reddit yet</div>
+            <style jsx>{`
+              .subtitle {
+                font-weight: 500;
+                color: #e03;
+                margin-top: 0.4em;
+                margin-bottom: 2em;
+              }
+              
+              .subtitle a {
+                color: inherit;
+                border-bottom: 1.5px solid;
+                text-decoration: none;
+              }
+
+              .subtitle a:hover {
+                color: #f35;
+              }
+
+              .header {
+                font-size: 250%;
+                font-weight: 600;
+                margin-bottom: 0px;
+              }
+
+              .header > span {
+                font-weight: 200;
+              }
+
+              .header a span {
+                color: black;
+                text-decoration: none;
+              }
+
+              .header a:visited {
+                  color: inherit;
+              }
+            `}</style>
+          </div>
+        );
+    }
+}
+
+module.exports = { Header }

front/src/components/Home.js

@@ -3,7 +3,7 @@
 import React, { Component } from 'react';
 import { GrandCategory } from './GrandCategory';
 import { Tiles } from './Tiles';
-import { GrandCategoryT } from '../types';
+import type { GrandCategoryT } from '../types';
 import { fetchData } from '../utils/index';
 
 class Home extends Component {

front/src/components/Item.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import ReactMarkdown from 'react-markdown';
+
+class Item extends Component {
+    render() {
+        return (
+          <div>
+            <section>
+              <h1>{this.props.name}</h1>
+              <p>{this.props.kind.tag} {this.props.link}</p>
+              <div dangerouslySetInnerHTML={{__html: this.props.ecosystem.html}}/>
+              <ReactMarkdown source={this.props.notes.text}/>
+            </section>
+          </div>
+        )
+    }
+}
+
+module.exports = { Item }

front/src/components/NoMatch.js

@@ -8,7 +8,7 @@ class NoMatch extends Component {
     return (
       <div>
         <h1>Not Found</h1>
-        <p><Link to="/">Go home</Link></p>
+        <p><Link to="/haskell">Go home</Link></p>
       </div>
     )
   }

front/src/components/Search.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+
+class Search extends Component {
+
+    render() {
+
+        return (
+            <div>
+            <form action="/haskell">
+                <input type="text" name="q" id="search" placeholder="search" value=""></input>
+            </form>
+            <style jsx>{`
+              #search {
+                font-size: 200%;
+                font-weight: 200;
+                border: 1px solid #aaa;
+                border-radius: 3px;
+                padding: 3px 10px;
+                width: 100%;
+              }
+            `}</style>
+            </div>
+        )
+    }
+}
+
+module.exports = { Search }

front/src/components/index.js

@@ -3,11 +3,17 @@ import { Tiles } from './Tiles';
 import { Category } from './Category';
 import { Home } from './Home';
 import { NoMatch } from './NoMatch';
+import { Item } from './Item';
+import { Search } from './Search';
+import { Header } from './Header'; 
 
 module.exports = {
     GrandCategory,
     Tiles,
     Category,
     Home,
-    NoMatch
+    NoMatch,
+    Item,
+    Search,
+    Header
 }

front/src/types.js

@@ -29,9 +29,7 @@ export type Kind = {
 };
 
 export type Note = {
-  text : string,
-  pros : Array<Valoration>,
-  cons : Array<Valoration>
+  text : string
 };
 
 export type Item = {
@@ -45,10 +43,15 @@ export type Item = {
   name : string,
   prosDeleted : Array<String>,
   notes : Note,
+  description: Description,
+  pros : Array<Valoration>,
+  cons : Array<Valoration>
 };
 
 export type Cat = {
+  uid: string,
   title : string,
+  group: string,
   description : Description,
   items : Array<Item>
 };

front/src/utils/index.js

@@ -1,5 +1,16 @@
 import { fetchData } from './fetchData';
+import * as T from '../types';
+
+function extractUid(link : string) {
+    const lastOccur = link.lastIndexOf('-');
+    return link.slice(lastOccur + 1);
+};
+
+const mkLink = (cat : T.Cat) => cat.title.toLowerCase() + "-" + cat.uid;
+
 
 module.exports = {
-    fetchData
+    fetchData,
+    extractUid,
+    mkLink
 }