Merge branch 'add-single-article-router' into 'master'

Adds Single Article View/Route

See merge request !2

front-end/renderine/src/common/components/article.tsx

+import * as React from 'react'
+import {Component} from 'react'
+import gql from 'graphql-tag';
+import {getArticleQuery} from '../../../graphql-types'
+import {graphql, QueryProps} from 'react-apollo';
+
+const query = gql`
+    query getArticle ($id:UUID!){
+        articleById(id:$id) {
+            id
+            nodeId
+            title
+            description
+            authorId
+            authorByAuthorId {
+                nodeId
+                id
+                name
+            }
+        }
+    }
+`
+interface RouterParams {
+    match: {
+        params: {
+            articleId: string
+        }
+    }
+};
+
+interface Props {
+    data: QueryProps & getArticleQuery
+    params: any
+}
+
+class Article extends Component<Props> {
+    render() {
+        if (this.props.data.loading){
+            return <div>Loading...</div>
+        } else if (this.props.data.error){
+            return <div>Error: {this.props.data.error.message}</div>
+        }
+        return (
+            <ul>
+                <div key={this.props.data.articleById.nodeId}>
+                    <h4>{this.props.data.articleById.title}</h4>
+                    <p>{this.props.data.articleById.description}</p>
+                    <div>Written by: {this.props.data.articleById.authorByAuthorId.name}</div>
+                </div>
+            </ul>
+        );
+    }
+}
+
+export default  graphql(query, {
+    options: (ownProps: RouterParams) => {
+        return { variables: { id: ownProps.match.params.articleId } };
+    }
+})(Article);
\ No newline at end of file

front-end/renderine/src/common/components/header.tsx

@@ -2,7 +2,15 @@ import * as React from 'react'
 import {Component} from 'react'
 import {Link} from 'react-router-dom'
 
-const navigation: [{url: string,title:string}] = [
+interface NavigationLinkInterface {
+    url: string,
+    title: string
+}
+
+interface NavigationLinksInterface extends Array<NavigationLinkInterface> {
+}
+
+const navigation: NavigationLinksInterface = [
     {
         url: '/',
         title: 'Main'
@@ -11,6 +19,10 @@ const navigation: [{url: string,title:string}] = [
         url: '/authors',
         title: 'Authors'
     },
+    {
+        url: '/article/c5459d70-12f9-11e8-bb57-13f65f55f276',
+        title: 'Article 1'
+    },
     {
         url: '/articles',
         title: 'Articles'

front-end/renderine/src/common/routes.tsx

@@ -5,6 +5,7 @@ import {Route} from 'react-router-dom'
 import Header from './components/header'
 import Main from './components/home'
 import AllAuthors from './components/asyncAuthors'
+import Article from './components/article'
 import AllArticles from './components/allArticles'
 import FatComponent from './components/asyncFatComponent'
 import StatefulComponent from './components/statefulComponent'
@@ -16,6 +17,7 @@ class Routes extends Component {
                 <Header/>
                 <Route exact path="/" component={Main} />
                 <Route exact path="/authors" component={AllAuthors}/>
+                <Route path="/article/:articleId" component={Article} />
                 <Route exact path="/articles" component={AllArticles}/>
                 <Route exact path="/fatComponent" component={FatComponent}/>
                 <Route exact path="/stateful" component={StatefulComponent}/>
@@ -24,4 +26,4 @@ class Routes extends Component {
     }
 }
 
-export default Routes;
\ No newline at end of file
+export default Routes;