[GD-11] add a component for displaying categories data

front/src/App.js

@@ -1,19 +1,8 @@
 // @flow
 
 import React, { Component } from 'react';
-import { CategoryChild, Home } from './components/index';
-import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
-
-class NoMatch extends Component {
-  render() {
-    return (
-      <div>
-        <h1>Not Found</h1>
-        <p><Link to="/">Go home</Link></p>
-      </div>
-    )
-  }
-}
+import { CategoryChild, Home, NoMatch } from './components/index';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
 class App extends Component {
   render() {

front/src/components/Category.js

@@ -0,0 +1,5 @@
+import React, { Component } from 'react';
+
+class Category extends Component {
+    
+}

front/src/components/CategoryChild.js

@@ -1,10 +1,28 @@
 import React, { Component } from 'react';
+import * as T from '../types';
+import { fetchData } from '../utils/index';
+
+function extractUid(link : string) {
+    const lastOccur = link.lastIndexOf('-');
+    return link.slice(lastOccur + 1);
+}
 
 class CategoryChild extends Component {
+  state: {
+    cat: T.Cat;
+  };
+  componentWillMount() {
+    this.setState({ cat: [] });
+  }
+  componentDidMount() {
+    var uid = extractUid(this.props.match.params.uid);
+
+    fetchData('http://localhost:8080/haskell/api/category/'+uid)
+      .then(data => this.setState({cat: data}))
+  }
     render() {
       return (
-            <h1>hi</h1>
-        )
+        <h1>{ this.state.cat.title }</h1>)
     }
 }
 

front/src/components/GrandCategory.js

@@ -10,8 +10,8 @@ class GrandCategory extends Component {
   render() {
     const renderBigCatLink = cat => {
       return(
-        <span>
-          <a key={cat.uid} href={cat.link}>{cat.title}</a>
+        <span key={cat.uid}>
+          <a href={cat.link}>{cat.title}</a>
           <style jsx>{`
             a {
               display: block;
@@ -25,8 +25,8 @@ class GrandCategory extends Component {
 
     const renderSmallCatLink = cat => {
       return(
-        <span>
-          <a key={cat.uid} href={cat.link}>{cat.title}</a>
+        <span key={cat.uid}>
+          <a href={cat.link}>{cat.title}</a>
           <style jsx>{`
             a {white-space: nowrap;}
           `}</style>
@@ -37,7 +37,7 @@ class GrandCategory extends Component {
     const grand = this.props.val;
 
     return(
-      <div className="GrandCategory" key={grand.title}>
+      <div className="GrandCategory">
         <h1>{grand.title}</h1>
 
         <div className="finished">

front/src/components/Home.js

@@ -2,18 +2,7 @@ import React, { Component } from 'react';
 import { GrandCategory } from './GrandCategory';
 import { Tiles } from './Tiles';
 import { GrandCategoryT } from '../types';
-
-function checkStatus(response) {
-  if (response.status >= 200 && response.status < 300) {
-    return response;
-  } else {
-    throw new Error(response.statusText);
-  }
-}
-
-function parseJSON(response) {
-  return response.json();
-}
+import { fetchData } from '../utils/index';
 
 class Home extends Component {
   state: {
@@ -23,19 +12,14 @@ class Home extends Component {
     this.setState({ categories: [] });
   }
   componentDidMount() {
-    fetch('http://localhost:8080/haskell/api/all-categories')
-      .then(checkStatus).then(parseJSON)
-      .then(data => {
-        this.setState({ categories: data });
-      }).catch(function(error) {
-        console.log('request failed', error);
-      });
+    fetchData('http://localhost:8080/haskell/api/all-categories')
+      .then(data => this.setState({categories: data}))
   }
     render() {
         return (
             <Tiles space="1em">
                 {this.state.categories.map(grand => {
-                    return <GrandCategory val={grand} />;
+                    return <GrandCategory key={grand.title} val={grand} />;
                   })
                 }
             </Tiles>

front/src/components/NoMatch.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+
+class NoMatch extends Component {
+  render() {
+    return (
+      <div>
+        <h1>Not Found</h1>
+        <p><Link to="/">Go home</Link></p>
+      </div>
+    )
+  }
+}
+
+module.exports = {
+    NoMatch
+}

front/src/components/index.js

@@ -2,10 +2,12 @@ import { GrandCategory } from './GrandCategory';
 import { Tiles } from './Tiles';
 import { CategoryChild } from './CategoryChild';
 import { Home } from './Home';
+import { NoMatch } from './NoMatch';
 
 module.exports = {
     GrandCategory,
     Tiles,
     CategoryChild,
-    Home
+    Home,
+    NoMatch
 }

front/src/types.js

@@ -10,4 +10,43 @@ export type GrandCategoryT = {
   finished : Array<Category>,
   wip      : Array<Category>,
   stubs    : Array<Category>
-  }
+};
+
+export type Description = {
+  text : string, 
+  html : string
+};
+
+export type Valoration = {
+  uid : string,
+  content : Description,
+};
+
+export type Kind = {
+  tag : string,
+  hackageName : string
+};
+
+export type Note = {
+  text : string,
+  pros : Array<Valoration>,
+  cons : Array<Valoration>
+};
+
+export type Item = {
+  ecosystem : Description,
+  group_ : string,
+  kind : Kind,
+  created : string,
+  link : string,
+  uid : string,
+  consDeleted : Array<String>,
+  name : string,
+  prosDeleted : Array<String>,
+  notes : Note,
+};
+
+export type Cat = {
+  title : string,
+  items : Array<Item>
+};

front/src/utils/fetchData.js

@@ -0,0 +1,25 @@
+
+function checkStatus(response) {
+  if (response.status >= 200 && response.status < 300) {
+    return response;
+  } else {
+    throw new Error(response.statusText);
+  }
+}
+
+function parseJSON(response) {
+  return response.json();
+}
+
+function fetchData(url : string) : Promise<any> {
+  return fetch(url)
+            .then(checkStatus)
+            .then(parseJSON)
+            .catch(function(error) {
+                console.log('request failed', error);
+            });
+ }  
+
+ module.exports = {
+     fetchData
+ }

front/src/utils/index.js

@@ -0,0 +1,5 @@
+import { fetchData } from './fetchData';
+
+module.exports = {
+    fetchData
+}