Merge pull request #11 from cloudhx/iss7

Added new feature: retrieve issues by clicking Refresh button. [Issue 7]

Author: cloudhx

src/components/issues/IssueList.js

@@ -1,58 +1,64 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-const IssueList = ({ issues, onCloseClick }) => (
-  <table className="table">
-    <thead>
-      <tr>
-        <th>Title</th>
-        <th>Labels</th>
-        <th>Assignee</th>
-        <th>State</th>
-        <th />
-      </tr>
-    </thead>
-    <tbody>
-      {issues.map(issue => {
-        return (
-          <tr key={issue.id}>
-            <td>
-              <a
-                href={issue.html_url}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {issue.title}
-              </a>
-            </td>
-            <td>
-              {issue.labels.map(label => (
-                <React.Fragment key={label.id}>
-                  <span className="badge badge-primary">{label.name}</span>
-                  <span> </span>
-                </React.Fragment>
-              ))}
-            </td>
-            <td>{issue.assignee.login}</td>
-            <td>{issue.state}</td>
-            <td>
-              <button
-                className="btn btn-outline-danger"
-                onClick={() => onCloseClick(issue)}
-              >
-                Close
-              </button>
-            </td>
-          </tr>
-        );
-      })}
-    </tbody>
-  </table>
+const IssueList = ({ issues, onCloseClick, onRefreshClick }) => (
+  <>
+    <button className="btn btn-primary my-2" onClick={() => onRefreshClick()}>
+      Refresh
+    </button>
+    <table className="table">
+      <thead>
+        <tr>
+          <th>Title</th>
+          <th>Labels</th>
+          <th>Assignee</th>
+          <th>State</th>
+          <th />
+        </tr>
+      </thead>
+      <tbody>
+        {issues.map(issue => {
+          return (
+            <tr key={issue.id}>
+              <td>
+                <a
+                  href={issue.html_url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {issue.title}
+                </a>
+              </td>
+              <td>
+                {issue.labels.map(label => (
+                  <React.Fragment key={label.id}>
+                    <span className="badge badge-primary">{label.name}</span>
+                    <span> </span>
+                  </React.Fragment>
+                ))}
+              </td>
+              <td>{issue.assignee.login}</td>
+              <td>{issue.state}</td>
+              <td>
+                <button
+                  className="btn btn-outline-danger"
+                  onClick={() => onCloseClick(issue)}
+                >
+                  Close
+                </button>
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  </>
 );
 
 IssueList.propTypes = {
   issues: PropTypes.array.isRequired,
-  onCloseClick: PropTypes.func.isRequired
+  onCloseClick: PropTypes.func.isRequired,
+  onRefreshClick: PropTypes.func.isRequired
 };
 
 export default IssueList;

src/components/issues/IssuesPage.js

@@ -27,6 +27,12 @@ class IssuesPage extends React.Component {
     }
   };
 
+  handleRefresh = () => {
+    this.props.actions.loadIssues().catch(error => {
+      alert("Loading issues failed" + error);
+    });
+  };
+
   render() {
     return (
       <>
@@ -37,6 +43,7 @@ class IssuesPage extends React.Component {
           <IssueList
             issues={this.props.issues}
             onCloseClick={this.handleClose}
+            onRefreshClick={this.handleRefresh}
           />
         )}
       </>

src/components/issues/issueList.test.js

@@ -9,7 +9,8 @@ function renderIssueList(args) {
   let defaultProps = {
     issues: [],
     closing: false,
-    onCloseClick: () => {}
+    onCloseClick: () => {},
+    onRefreshClick: () => {}
   };
   const props = { ...defaultProps, ...args };
   return render(