feat: enhance contributions rendering (open-sauced#1139)

src/components/CommitType.js

@@ -0,0 +1,44 @@
+import React from "react";
+import {GitPullRequestDraftIcon, GitPullRequestIcon, IssueOpenedIcon,
+  IssueClosedIcon, GitPullRequestClosedIcon, GitMergeIcon} from "@primer/octicons-react";
+
+function CommitType({status, isDraft, mergeable, merged}) {
+  switch (status) { // Check the status variable for OPEN/CLOSED/MERGED ISSUES
+    case "OPEN":
+    {
+      if (isDraft) { //check wether if its a draft
+        return (
+          <GitPullRequestDraftIcon className="gitGrey" />
+        );
+      }
+      if (mergeable === "MERGEABLE") {//check if its a pull request
+        return (
+          <GitPullRequestIcon verticalAlign="middle" className="gitGreen" />
+        );
+      }
+      return (
+        <IssueOpenedIcon verticalAlign="middle" className="gitGreen"/>
+      );
+    }
+    case "CLOSED": // check for closed PR or Closed issue
+    {
+      if (mergeable === "MERGEABLE" && merged === false) {
+        return (
+          <GitPullRequestClosedIcon verticalAlign="middle" className="gitRed"/>
+        );
+      }
+      return (
+        <IssueClosedIcon verticalAlign="middle" className="gitRed" />
+      );
+    }
+    case "MERGED":
+      return (
+        <GitMergeIcon verticalAlign="middle" className="gitPurple" />
+      );
+    default:
+      return (
+        ""
+      );
+  }
+}
+export default CommitType;

src/components/Contributions.js

@@ -53,6 +53,10 @@ function Contributions({repoName, owner, viewer}) {
                       participants={issue.participants}
                       comments={issue.comments}
                       milestone={issue.milestone}
+                      status={issue.state}
+                      mergeable={issue.mergeable}
+                      isDraft={issue.isDraft}
+                      merged={issue.merged}
                     />
                   </a>
                 </li>

src/components/IssueListItem.js

@@ -2,23 +2,24 @@ import React from "react";
 import {FloatRight, FloatLeft, FlexColumn, FlexHeader, FlexCenter} from "../styles/Grid";
 import {chevronRight} from "../icons";
 import dayjs from "dayjs";
+import CommitType from "../components/CommitType";
 import relativeTime from "dayjs/plugin/relativeTime";
-import {IssueOpenedIcon, CommentIcon, MilestoneIcon} from "@primer/octicons-react";
+import {CommentIcon, MilestoneIcon} from "@primer/octicons-react";
 import contrast from "contrast";
 import {fontSize, size} from "../styles/variables";
 
 dayjs.extend(relativeTime);
 
-function IssueListItem({title, labels, author, opened, type, participants, comments, milestone}) {
+function IssueListItem({title, labels, author, opened, type,
+  participants, comments, milestone, status, mergeable, isDraft, merged}) {
   const participantsDiffCount = 3;
   const participantsShowDiff = participants && participants.totalCount - participantsDiffCount;
-
   return (
     <FlexHeader>
       <FloatLeft>
         <FlexCenter>
-          <span style={{marginRight: 10}}>
-            <IssueOpenedIcon verticalAlign="middle" />
+          <span style={{marginRight: 10}} className="gitIcons">
+            <CommitType status={status}  isDraft={isDraft}  mergeable={mergeable} merged={merged} />
           </span>
           <FlexColumn className="details">
             <p style={{fontSize: fontSize.default}}>

src/components/Issues.js

@@ -102,6 +102,7 @@ function Issues({repoName, owner}) {
                       participants={issue.node.participants}
                       comments={issue.node.comments}
                       milestone={issue.node.milestone}
+                      status={issue.node.state}
                     />
                   </a>
                 </li>

src/styles/List.js

@@ -60,7 +60,20 @@ const Container = styled.ul`
       border: 1px solid ${colors.darkGrey};
     }
   }
-
+  .gitIcons {
+    .gitGreen {
+       fill: ${colors.gitGreen} !important;
+    }
+    .gitRed {
+      fill: ${colors.gitRed} !important;
+   }
+   .gitPurple {
+    fill: ${colors.gitPurple} !important;
+   }
+   .gitGrey {
+    fill: ${colors.gitGrey} !important;
+   }
+  }
   .issueHelper {
     color: grey;
     margin-left: 3px;

src/styles/variables.js

@@ -17,7 +17,11 @@ const colors = {
   green: "#00c7b7",
   darkGreen: "#03b1a3",
   red: "#fb6d77",
-  darkRed: "#fa3946"
+  darkRed: "#fa3946",
+  gitGreen: "#3fb94f",
+  gitRed:"#eb4f47",
+  gitPurple:"#7e59c0",
+  gitGrey:"#8b949e",
 };
 
 const margin = {