Add icons to issues (#25)

* Add icons to issue

* Added Icon component to show all types of issue

* Added colors to icons, and move styles to different file

* apply icon styles

* move Icon to components

Author: gregorysl

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@githubprimer/octicons-react": "^8.1.0",
     "axios": "^0.18.0",
     "i": "^0.3.6",
     "node-sass": "^4.9.3",

src/features/Issues/Issues.js

@@ -3,13 +3,15 @@ import "./Issues.scss";
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 import { getIssues, filterIssues } from "./actions";
+import Icon from "../Icon/Icon";
 
 const maxLength = 50;
 
-const Card = ({ title, body, labels, issueUrl, owner, repo, number }) => (
+const Card = ({ title, body, labels, issueUrl, owner, repo, number, state,  pull_request }) => (
   <div className="card" onClick={() => issueUrl(owner, repo, number)}>
     <div className="card-title">
-      <h4>{title}</h4>
+		<Icon state={state} pull={pull_request} />
+        <h4 className={"card-title-text"}>{title}</h4>
     </div>
     <div className="card-body">
       <div>
@@ -129,6 +131,8 @@ class Issues extends Component {
               owner={owner}
               repo={repo}
               number={issue.number}
+              state={issue.state}
+              pull_request={issue.pull_request}
             />
           ))}
         </div>

src/features/Issues/Issues.scss

@@ -121,6 +121,9 @@ button#return-button a {
     padding: 20px;
     font-size: 12px;
   }
+  .card-title-text {
+    display: contents;
+  }
   .card-labels > ul {
     list-style-type: none;
     padding: 15px;

src/features/Issues/components/Icon/Icon.js

@@ -0,0 +1,33 @@
+import React from "react";
+import "./Icon.scss";
+import Octicon, { getIconByName } from "@githubprimer/octicons-react";
+
+const Icon = ({ state, pull }) => {
+  let icon = "";
+  let color = "";
+  if (state === "open") {
+    if (pull) {
+      icon = "git-pull-request";
+    } else {
+      icon = "issue-opened";
+    }
+    color = "green";
+  } else {
+    if (pull) {
+      icon = "git-merge";
+      color = "purple";
+    } else {
+      icon = "issue-closed";
+      color = "red";
+    }
+  }
+  return (
+    <Octicon
+      size={"medium"}
+      className={`card-icon ${color}`}
+      icon={getIconByName(icon)}
+    />
+  );
+};
+
+export default Icon;

src/features/Issues/components/Icon/Icon.scss

@@ -0,0 +1,12 @@
+.card-icon {
+  margin: 3px;
+  &.green {
+    color: #28a745;
+  }
+  &.red {
+    color: #cb2431;
+  }
+  &.purple {
+    color: #6f42c1;
+  }
+}