11-Implementing the Issues Feature: Setup

Author: rwieruch

src/Issue/IssueItem/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import Link from '../../Link';
+
+import './style.css';
+
+const IssueItem = ({ issue }) => (
+  <div className="IssueItem">
+    {/* placeholder to add a show/hide comment button later */}
+
+    <div className="IssueItem-content">
+      <h3>
+        <Link href={issue.url}>{issue.title}</Link>
+      </h3>
+      <div dangerouslySetInnerHTML={{ __html: issue.bodyHTML }} />
+
+      {/* placeholder to render a list of comments later */}
+    </div>
+  </div>
+);
+
+export default IssueItem;

src/Issue/IssueList/index.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Query } from 'react-apollo';
+import gql from 'graphql-tag';
+
+import IssueItem from '../IssueItem';
+import Loading from '../../Loading';
+import ErrorMessage from '../../Error';
+
+import './style.css';
+
+const GET_ISSUES_OF_REPOSITORY = gql`
+  query($repositoryOwner: String!, $repositoryName: String!) {
+    repository(name: $repositoryName, owner: $repositoryOwner) {
+      issues(first: 5) {
+        edges {
+          node {
+            id
+            number
+            state
+            title
+            url
+            bodyHTML
+          }
+        }
+      }
+    }
+  }
+`;
+
+const Issues = ({ repositoryOwner, repositoryName }) => (
+  <Query
+    query={GET_ISSUES_OF_REPOSITORY}
+    variables={{
+      repositoryOwner,
+      repositoryName,
+    }}
+  >
+    {({ data, loading, error }) => {
+      if (error) {
+        return <ErrorMessage error={error} />;
+      }
+
+      const { repository } = data;
+
+      if (loading && !repository) {
+        return <Loading />;
+      }
+
+      if (!repository.issues.edges.length) {
+        return <div className="IssueList">No issues ...</div>;
+      }
+
+      return <IssueList issues={repository.issues} />;
+    }}
+  </Query>
+);
+
+const IssueList = ({ issues }) => (
+  <div className="IssueList">
+    {issues.edges.map(({ node }) => (
+      <IssueItem key={node.id} issue={node} />
+    ))}
+  </div>
+);
+
+export default Issues;

src/Issue/index.js

@@ -0,0 +1,3 @@
+import Issues from './IssueList';
+
+export default Issues;

src/Repository/RepositoryList/index.js

@@ -2,6 +2,7 @@ import React, { Fragment } from 'react';
 
 import FetchMore from '../../FetchMore';
 import RepositoryItem from '../RepositoryItem';
+import Issues from '../../Issue';
 
 import '../style.css';
 
@@ -39,6 +40,11 @@ const RepositoryList = ({
     {repositories.edges.map(({ node }) => (
       <div key={node.id} className="RepositoryItem">
         <RepositoryItem {...node} />
+
+        <Issues
+          repositoryName={node.name}
+          repositoryOwner={node.owner.login}
+        />
       </div>
     ))}