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;
+};