Verified Commit 51b03aba authored by Marco Kellershoff's avatar Marco Kellershoff 🤸
Browse files

Adds Single Article View/Route

This commit adds a single article view,
based on the `articleById` graphql function.

It also fixes the missing/wrong interface
for `NavigationLinks` in `header.tsx`.
parent c59d534e
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
......@@ -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'
......
......@@ -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;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment