feat: add pr review icons (approved, requested changes, commented, dismissed)

src/__mocks__/mockedData.ts

@@ -72,6 +72,20 @@ export const mockedGitHubNotifications: Notification[] = [
           'https://avatars.githubusercontent.com/u/133795385?s=200&v=4',
         type: 'User',
       },
+      reviews: [
+        {
+          state: 'APPROVED',
+          users: ['octocat'],
+        },
+        {
+          state: 'CHANGES_REQUESTED',
+          users: ['gitify-app'],
+        },
+        {
+          state: 'PENDING',
+          users: ['gitify-user'],
+        },
+      ],
     },
     repository: {
       id: 57216596,
@@ -198,6 +212,7 @@ export const mockedGitHubNotifications: Notification[] = [
       latest_comment_url:
         'https://api.github.com/repos/gitify-app/notifications-test/issues/comments/302885965',
       type: 'Issue',
+      reviews: null,
     },
     repository: {
       id: 57216596,
@@ -255,6 +270,7 @@ export const mockedEnterpriseNotifications: Notification[] = [
       latest_comment_url:
         'https://github.gitify.io/api/v3/repos/myorg/notifications-test/releases/3',
       type: 'Release',
+      reviews: null,
     },
     repository: {
       id: 1,
@@ -308,6 +324,7 @@ export const mockedEnterpriseNotifications: Notification[] = [
       latest_comment_url:
         'https://github.gitify.io/api/v3/repos/myorg/notifications-test/issues/comments/21',
       type: 'PullRequest',
+      reviews: null,
     },
     repository: {
       id: 1,

src/__mocks__/partial-mocks.ts

@@ -1,9 +1,11 @@
 import type { Notification, Subject, User } from '../typesGitHub';
+import Constants from '../utils/constants';
 
 export function partialMockNotification(
   subject: Partial<Subject>,
 ): Notification {
   const mockNotification: Partial<Notification> = {
+    hostname: Constants.GITHUB_API_BASE_URL,
     subject: subject as Subject,
   };
 

src/components/NotificationRow.test.tsx

@@ -207,6 +207,7 @@ describe('components/NotificationRow.tsx', () => {
             avatar_url: 'https://avatars.githubusercontent.com/u/123456789?v=4',
             type: 'User' as UserType,
           },
+          reviews: null,
         },
       },
       hostname: 'github.com',

src/components/NotificationRow.tsx

@@ -20,6 +20,7 @@ import { formatForDisplay, openInBrowser } from '../utils/helpers';
 import {
   getNotificationTypeIcon,
   getNotificationTypeIconColor,
+  getPullRequestReviewIcon,
 } from '../utils/icons';
 import { formatReason } from '../utils/reason';
 
@@ -69,13 +70,14 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
   const reason = formatReason(notification.reason);
   const NotificationIcon = getNotificationTypeIcon(notification.subject);
   const iconColor = getNotificationTypeIconColor(notification.subject);
+
   const updatedAt = formatDistanceToNow(parseISO(notification.updated_at), {
     addSuffix: true,
   });
-
   const updatedLabel = notification.subject.user
     ? `${notification.subject.user.login} updated ${updatedAt}`
     : `Updated ${updatedAt}`;
+
   const notificationTitle = formatForDisplay([
     notification.subject.state,
     notification.subject.type,
@@ -131,6 +133,28 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
                 {reason.title}
               </span>
               <span className="ml-1">{updatedAt}</span>
+              {notification.subject.reviews
+                ? notification.subject.reviews.map((review) => {
+                    const icon = getPullRequestReviewIcon(review);
+                    if (!icon) {
+                      return null;
+                    }
+
+                    return (
+                      <span
+                        key={review.state}
+                        title={icon.description}
+                        className="ml-1"
+                      >
+                        <icon.type
+                          size={16}
+                          className={icon.color}
+                          aria-label={icon.description}
+                        />
+                      </span>
+                    );
+                  })
+                : null}
             </span>
           </span>
         </div>

src/types.ts

@@ -1,3 +1,5 @@
+import type { OcticonProps } from '@primer/octicons-react';
+import type { FC } from 'react';
 import type { Notification } from './typesGitHub';
 
 export interface AuthState {
@@ -101,4 +103,11 @@ export enum IconColor {
   GREEN = 'text-green-500',
   PURPLE = 'text-purple-500',
   RED = 'text-red-500',
+  YELLOW = 'text-yellow-500 dark:text-yellow-300',
 }
+
+export type PullRequestApprovalIcon = {
+  type: FC<OcticonProps>;
+  color: IconColor;
+  description: string;
+};