12-Implementing the Issues Feature: Client-Side Filter

Author: rwieruch

src/Issue/IssueList/index.js

@@ -5,6 +5,7 @@ import gql from 'graphql-tag';
 import IssueItem from '../IssueItem';
 import Loading from '../../Loading';
 import ErrorMessage from '../../Error';
+import { ButtonUnobtrusive } from '../../Button';
 
 import './style.css';
 
@@ -27,33 +28,88 @@ const GET_ISSUES_OF_REPOSITORY = gql`
   }
 `;
 
-const Issues = ({ repositoryOwner, repositoryName }) => (
-  <Query
-    query={GET_ISSUES_OF_REPOSITORY}
-    variables={{
-      repositoryOwner,
-      repositoryName,
-    }}
-  >
-    {({ data, loading, error }) => {
-      if (error) {
-        return <ErrorMessage error={error} />;
-      }
+const ISSUE_STATES = {
+  NONE: 'NONE',
+  OPEN: 'OPEN',
+  CLOSED: 'CLOSED',
+};
 
-      const { repository } = data;
+const TRANSITION_LABELS = {
+  [ISSUE_STATES.NONE]: 'Show Open Issues',
+  [ISSUE_STATES.OPEN]: 'Show Closed Issues',
+  [ISSUE_STATES.CLOSED]: 'Hide Issues',
+};
 
-      if (loading && !repository) {
-        return <Loading />;
-      }
+const TRANSITION_STATE = {
+  [ISSUE_STATES.NONE]: ISSUE_STATES.OPEN,
+  [ISSUE_STATES.OPEN]: ISSUE_STATES.CLOSED,
+  [ISSUE_STATES.CLOSED]: ISSUE_STATES.NONE,
+};
 
-      if (!repository.issues.edges.length) {
-        return <div className="IssueList">No issues ...</div>;
-      }
+const isShow = issueState => issueState !== ISSUE_STATES.NONE;
 
-      return <IssueList issues={repository.issues} />;
-    }}
-  </Query>
-);
+class Issues extends React.Component {
+  state = {
+    issueState: ISSUE_STATES.NONE,
+  };
+
+  onChangeIssueState = nextIssueState => {
+    this.setState({ issueState: nextIssueState });
+  };
+
+  render() {
+    const { issueState } = this.state;
+    const { repositoryOwner, repositoryName } = this.props;
+
+    return (
+      <div className="Issues">
+        <ButtonUnobtrusive
+          onClick={() =>
+            this.onChangeIssueState(TRANSITION_STATE[issueState])
+          }
+        >
+          {TRANSITION_LABELS[issueState]}
+        </ButtonUnobtrusive>
+
+        {isShow(issueState) && (
+          <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 />;
+              }
+
+              const filteredRepository = {
+                issues: {
+                  edges: repository.issues.edges.filter(
+                    issue => issue.node.state === issueState,
+                  ),
+                },
+              };
+
+              if (!filteredRepository.issues.edges.length) {
+                return <div className="IssueList">No issues ...</div>;
+              }
+
+              return <IssueList issues={filteredRepository.issues} />;
+            }}
+          </Query>
+        )}
+      </div>
+    );
+  }
+}
 
 const IssueList = ({ issues }) => (
   <div className="IssueList">