Introduce PullRequestStatus to customise the notification and PR list…

… to indicate new commits and replies (#175)

src/components/PullRequestItem.tsx

@@ -2,8 +2,10 @@ import styled from "@emotion/styled";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { observer } from "mobx-react-lite";
 import React from "react";
+import { EnrichedPullRequest } from "../filtering/enriched-pull-request";
 import { PullRequest } from "../storage/loaded-state";
 import { SmallButton } from "./design/Button";
+import { PullRequestStatus } from "./PullRequestStatus";
 
 const PullRequestBox = styled.a`
   display: flex;
@@ -71,7 +73,7 @@ const AuthorLogin = styled.div`
 `;
 
 export interface PullRequestItemProps {
-  pullRequest: PullRequest;
+  pullRequest: EnrichedPullRequest;
   allowMuting: boolean;
   onOpen(pullRequestUrl: string): void;
   onMute(pullRequest: PullRequest): void;
@@ -100,6 +102,7 @@ export const PullRequestItem = observer((props: PullRequestItemProps) => {
             </SmallButton>
           )}
         </Title>
+        <PullRequestStatus status={props.pullRequest.status} />
         <Repo>
           {props.pullRequest.repoOwner}/{props.pullRequest.repoName} (#
           {props.pullRequest.pullRequestNumber})

src/components/PullRequestList.tsx

@@ -1,6 +1,7 @@
 import styled from "@emotion/styled";
 import { observer } from "mobx-react-lite";
 import React from "react";
+import { EnrichedPullRequest } from "../filtering/enriched-pull-request";
 import { PullRequest } from "../storage/loaded-state";
 import { Paragraph } from "./design/Paragraph";
 import { Loader } from "./Loader";
@@ -14,7 +15,7 @@ export const List = styled.div`
 `;
 
 export interface PullRequestListProps {
-  pullRequests: PullRequest[] | null;
+  pullRequests: EnrichedPullRequest[] | null;
   emptyMessage: string;
   allowMuting: boolean;
   onOpen(pullRequestUrl: string): void;

src/components/PullRequestStatus.tsx

@@ -0,0 +1,46 @@
+import styled from "@emotion/styled";
+import { observer } from "mobx-react-lite";
+import React from "react";
+import { Badge } from "react-bootstrap";
+import { PullRequestStatus as Status } from "../filtering/status";
+
+const StatusBox = styled.div`
+  padding: 0 8px;
+`;
+
+const UNREVIEWED = (
+  <Badge pill variant="danger">
+    Unreviewed
+  </Badge>
+);
+
+const AUTHOR_REPLIED = (
+  <Badge pill variant="secondary">
+    Author replied
+  </Badge>
+);
+
+const NEW_COMMIT = (
+  <Badge pill variant="success">
+    New commit
+  </Badge>
+);
+
+export const PullRequestStatus = observer((props: { status: Status }) => {
+  switch (props.status) {
+    case Status.INCOMING_NEW_REVIEW_REQUESTED:
+      return <StatusBox>{UNREVIEWED}</StatusBox>;
+    case Status.INCOMING_REVIEWED_NEW_COMMENT_BY_AUTHOR:
+      return <StatusBox>{AUTHOR_REPLIED}</StatusBox>;
+    case Status.INCOMING_REVIEWED_NEW_COMMIT:
+      return <StatusBox>{NEW_COMMIT}</StatusBox>;
+    case Status.INCOMING_REVIEWED_NEW_COMMIT_AND_NEW_COMMENT_BY_AUTHOR:
+      return (
+        <StatusBox>
+          {AUTHOR_REPLIED} {NEW_COMMIT}
+        </StatusBox>
+      );
+    default:
+      return <></>;
+  }
+});

src/filtering/enriched-pull-request.ts

@@ -0,0 +1,6 @@
+import { PullRequest } from "../storage/loaded-state";
+import { PullRequestStatus } from "./status";
+
+export interface EnrichedPullRequest extends PullRequest {
+  status: PullRequestStatus;
+}