refactor: use GitifyNotification type with transformation layer (#2484)

* refactor: use GitifyNotification type with transformation layer

Introduce a clean separation between raw GitHub API types and internal
Gitify notification types:

- Add transform.ts at API boundary to convert raw GitHub responses
- Define GitifyNotification, GitifySubject, GitifyRepository, GitifyOwner
  types with camelCase properties
- Update all components, handlers, filters, and utilities to use new types
- Update GraphQL schema aliases for consistent property naming
- Remove Notification type alias from typesGitHub.ts

Closes #828

* further type refactoring

Signed-off-by: Adam Setch <[email protected]>

* further type refactoring

Signed-off-by: Adam Setch <[email protected]>

* further type refactoring

Signed-off-by: Adam Setch <[email protected]>

* further type refactoring

Signed-off-by: Adam Setch <[email protected]>

---------

Signed-off-by: Adam Setch <[email protected]>
Co-authored-by: Adam Setch <[email protected]>

Author: afonsojramos

src/renderer/__mocks__/notifications-mocks.ts

@@ -1,15 +1,14 @@
 import { Constants } from '../constants';
 import type {
   AccountNotifications,
+  GitifyNotification,
   GitifyNotificationState,
+  GitifyRepository,
+  GitifySubject,
   Hostname,
-} from '../types';
-import type {
-  Notification,
-  Repository,
-  Subject,
+  Link,
   SubjectType,
-} from '../typesGitHub';
+} from '../types';
 import {
   mockEnterpriseNotifications,
   mockGitHubNotifications,
@@ -47,21 +46,21 @@ export function createMockSubject(mocks: {
   title?: string;
   type?: SubjectType;
   state?: GitifyNotificationState;
-}): Subject {
+}): GitifySubject {
   return {
     title: mocks.title ?? 'Mock Subject',
     type: mocks.type ?? ('Unknown' as SubjectType),
     state: mocks.state ?? ('Unknown' as GitifyNotificationState),
     url: null,
-    latest_comment_url: null,
+    latestCommentUrl: null,
   };
 }
 
 export function createPartialMockNotification(
-  subject: Partial<Subject>,
-  repository?: Partial<Repository>,
-): Notification {
-  const mockNotification: Partial<Notification> = {
+  subject: Partial<GitifySubject>,
+  repository?: Partial<GitifyRepository>,
+): GitifyNotification {
+  const mockNotification: Partial<GitifyNotification> = {
     account: {
       method: 'Personal Access Token',
       platform: 'GitHub Cloud',
@@ -70,28 +69,30 @@ export function createPartialMockNotification(
       user: mockGitifyUser,
       hasRequiredScopes: true,
     },
-    subject: subject as Subject,
+    subject: subject as GitifySubject,
     repository: {
       name: 'notifications-test',
-      full_name: 'gitify-app/notifications-test',
-      html_url: 'https://github.com/gitify-app/notifications-test',
+      fullName: 'gitify-app/notifications-test',
+      htmlUrl: 'https://github.com/gitify-app/notifications-test' as Link,
       owner: {
         login: 'gitify-app',
+        avatarUrl: 'https://avatars.githubusercontent.com/u/1' as Link,
+        type: 'Organization',
       },
       ...repository,
-    } as Repository,
+    } as GitifyRepository,
   };
 
-  return mockNotification as Notification;
+  return mockNotification as GitifyNotification;
 }
 
 export function createMockNotificationForRepoName(
   id: string,
   repoFullName: string | null,
-): Notification {
+): GitifyNotification {
   return {
     id,
-    repository: repoFullName ? { full_name: repoFullName } : null,
+    repository: repoFullName ? { fullName: repoFullName } : null,
     account: mockGitHubCloudAccount,
-  } as Notification;
+  } as GitifyNotification;
 }

src/renderer/__mocks__/user-mocks.ts

@@ -1,5 +1,5 @@
-import type { GitifyUser, Link } from '../types';
-import type { User } from '../typesGitHub';
+import type { GitifyNotificationUser, GitifyUser, Link } from '../types';
+import type { RawUser } from '../utils/api/types';
 
 export const mockGitifyUser: GitifyUser = {
   login: 'octocat',
@@ -8,13 +8,24 @@ export const mockGitifyUser: GitifyUser = {
   avatar: 'https://avatars.githubusercontent.com/u/583231?v=4' as Link,
 };
 
-export function createPartialMockUser(login: string): User {
-  const mockUser: Partial<User> = {
+export function createPartialMockUser(login: string): RawUser {
+  const mockUser: Partial<RawUser> = {
     login: login,
     html_url: `https://github.com/${login}` as Link,
     avatar_url: 'https://avatars.githubusercontent.com/u/583231?v=4' as Link,
     type: 'User',
   };
 
-  return mockUser as User;
+  return mockUser as RawUser;
+}
+
+export function createMockNotificationUser(
+  login: string,
+): GitifyNotificationUser {
+  return {
+    login: login,
+    htmlUrl: `https://github.com/${login}` as Link,
+    avatarUrl: 'https://avatars.githubusercontent.com/u/583231?v=4' as Link,
+    type: 'User',
+  };
 }

src/renderer/components/avatars/AvatarWithFallback.tsx

@@ -3,8 +3,7 @@ import { useState } from 'react';
 
 import { Avatar, Stack, Truncate } from '@primer/react';
 
-import { type Link, Size } from '../../types';
-import type { UserType } from '../../typesGitHub';
+import { type Link, Size, type UserType } from '../../types';
 import { getDefaultUserIcon } from '../../utils/icons';
 import { isNonHumanUser } from '../../utils/notifications/filters/userType';
 

src/renderer/components/metrics/MetricGroup.test.tsx

@@ -1,7 +1,7 @@
 import { renderWithAppContext } from '../../__helpers__/test-utils';
 import { mockSettings } from '../../__mocks__/state-mocks';
+import type { GitifyMilestone } from '../../types';
 import { mockSingleNotification } from '../../utils/api/__mocks__/response-mocks';
-import type { MilestoneFieldsFragment } from '../../utils/api/graphql/generated/graphql';
 import { MetricGroup } from './MetricGroup';
 
 describe('renderer/components/metrics/MetricGroup.tsx', () => {
@@ -104,7 +104,7 @@ describe('renderer/components/metrics/MetricGroup.tsx', () => {
       mockNotification.subject.milestone = {
         title: 'Milestone 1',
         state: 'OPEN',
-      } as MilestoneFieldsFragment;
+      } as GitifyMilestone;
 
       const props = {
         notification: mockNotification,
@@ -119,7 +119,7 @@ describe('renderer/components/metrics/MetricGroup.tsx', () => {
       mockNotification.subject.milestone = {
         title: 'Milestone 1',
         state: 'CLOSED',
-      } as MilestoneFieldsFragment;
+      } as GitifyMilestone;
 
       const props = {
         notification: mockNotification,

src/renderer/components/metrics/MetricGroup.tsx

@@ -8,13 +8,12 @@ import {
 } from '@primer/octicons-react';
 
 import { useAppContext } from '../../context/App';
-import { IconColor } from '../../types';
-import type { Notification } from '../../typesGitHub';
+import { type GitifyNotification, IconColor } from '../../types';
 import { getPullRequestReviewIcon } from '../../utils/icons';
 import { MetricPill } from './MetricPill';
 
 interface MetricGroupProps {
-  notification: Notification;
+  notification: GitifyNotification;
 }
 
 export const MetricGroup: FC<MetricGroupProps> = ({

src/renderer/components/notifications/AccountNotifications.tsx

@@ -4,8 +4,12 @@ import { GitPullRequestIcon, IssueOpenedIcon } from '@primer/octicons-react';
 import { Button, Stack } from '@primer/react';
 
 import { useAppContext } from '../../context/App';
-import { type Account, type GitifyError, Size } from '../../types';
-import type { Notification } from '../../typesGitHub';
+import {
+  type Account,
+  type GitifyError,
+  type GitifyNotification,
+  Size,
+} from '../../types';
 import { hasMultipleAccounts } from '../../utils/auth/utils';
 import { cn } from '../../utils/cn';
 import { getChevronDetails } from '../../utils/helpers';
@@ -28,7 +32,7 @@ import { RepositoryNotifications } from './RepositoryNotifications';
 
 interface AccountNotificationsProps {
   account: Account;
-  notifications: Notification[];
+  notifications: GitifyNotification[];
   error: GitifyError | null;
   showAccountHeader: boolean;
 }

src/renderer/components/notifications/NotificationFooter.test.tsx

@@ -3,8 +3,7 @@ import userEvent from '@testing-library/user-event';
 
 import { renderWithAppContext } from '../../__helpers__/test-utils';
 import { mockGitHubCloudAccount } from '../../__mocks__/account-mocks';
-import type { Link } from '../../types';
-import type { UserType } from '../../typesGitHub';
+import type { GitifyNotificationUser, Link } from '../../types';
 import { mockSingleNotification } from '../../utils/api/__mocks__/response-mocks';
 import * as comms from '../../utils/comms';
 import { NotificationFooter } from './NotificationFooter';
@@ -28,19 +27,6 @@ describe('renderer/components/notifications/NotificationFooter.tsx', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('should render itself & its children when last_read_at is null', async () => {
-    const mockNotification = mockSingleNotification;
-    mockNotification.last_read_at = null;
-
-    const props = {
-      notification: mockNotification,
-    };
-
-    const tree = renderWithAppContext(<NotificationFooter {...props} />);
-
-    expect(tree).toMatchSnapshot();
-  });
-
   describe('security alerts should use github icon for avatar', () => {
     it('Repository Dependabot Alerts Thread', async () => {
       const mockNotification = mockSingleNotification;
@@ -94,10 +80,10 @@ describe('renderer/components/notifications/NotificationFooter.tsx', () => {
           ...mockSingleNotification.subject,
           user: {
             login: 'some-user',
-            html_url: 'https://github.com/some-user' as Link,
-            avatar_url:
+            htmlUrl: 'https://github.com/some-user' as Link,
+            avatarUrl:
               'https://avatars.githubusercontent.com/u/123456789?v=4' as Link,
-            type: 'User' as UserType,
+            type: 'User' as GitifyNotificationUser['type'],
           },
           reviews: null,
         },
@@ -111,7 +97,7 @@ describe('renderer/components/notifications/NotificationFooter.tsx', () => {
 
     expect(openExternalLinkSpy).toHaveBeenCalledTimes(1);
     expect(openExternalLinkSpy).toHaveBeenCalledWith(
-      props.notification.subject.user.html_url,
+      props.notification.subject.user.htmlUrl,
     );
   });
 });

src/renderer/components/notifications/NotificationFooter.tsx

@@ -2,16 +2,15 @@ import type { FC, MouseEvent } from 'react';
 
 import { RelativeTime, Stack, Text } from '@primer/react';
 
-import { Opacity, Size } from '../../types';
-import type { Notification } from '../../typesGitHub';
+import { type GitifyNotification, Opacity, Size } from '../../types';
 import { cn } from '../../utils/cn';
 import { openUserProfile } from '../../utils/links';
 import { getReasonDetails } from '../../utils/reason';
 import { AvatarWithFallback } from '../avatars/AvatarWithFallback';
 import { MetricGroup } from '../metrics/MetricGroup';
 
 interface NotificationFooterProps {
-  notification: Notification;
+  notification: GitifyNotification;
 }
 
 export const NotificationFooter: FC<NotificationFooterProps> = ({
@@ -41,7 +40,7 @@ export const NotificationFooter: FC<NotificationFooterProps> = ({
           <AvatarWithFallback
             alt={notification.subject.user.login}
             size={Size.SMALL}
-            src={notification.subject.user.avatar_url}
+            src={notification.subject.user.avatarUrl}
             userType={notification.subject.user.type}
           />
         </button>
@@ -61,7 +60,7 @@ export const NotificationFooter: FC<NotificationFooterProps> = ({
         <Text className="pr-1" title={reason.description}>
           {reason.title}
         </Text>
-        <RelativeTime datetime={notification.updated_at} />
+        <RelativeTime datetime={notification.updatedAt} />
       </Stack>
 
       <MetricGroup notification={notification} />

src/renderer/components/notifications/NotificationHeader.test.tsx

@@ -87,7 +87,7 @@ describe('renderer/components/notifications/NotificationHeader.tsx', () => {
 
     expect(openExternalLinkSpy).toHaveBeenCalledTimes(1);
     expect(openExternalLinkSpy).toHaveBeenCalledWith(
-      props.notification.repository.html_url,
+      props.notification.repository.htmlUrl,
     );
   });
 });

src/renderer/components/notifications/NotificationHeader.tsx

@@ -3,22 +3,21 @@ import type { FC, MouseEvent } from 'react';
 import { Stack } from '@primer/react';
 
 import { useAppContext } from '../../context/App';
-import { GroupBy, Opacity, Size } from '../../types';
-import type { Notification } from '../../typesGitHub';
+import { type GitifyNotification, GroupBy, Opacity, Size } from '../../types';
 import { cn } from '../../utils/cn';
 import { openRepository } from '../../utils/links';
 import { AvatarWithFallback } from '../avatars/AvatarWithFallback';
 
 interface NotificationHeaderProps {
-  notification: Notification;
+  notification: GitifyNotification;
 }
 
 export const NotificationHeader: FC<NotificationHeaderProps> = ({
   notification,
 }: NotificationHeaderProps) => {
   const { settings } = useAppContext();
 
-  const repoSlug = notification.repository.full_name;
+  const repoSlug = notification.repository.fullName;
 
   const notificationNumber = notification.subject?.number
     ? `#${notification.subject.number}`
@@ -45,7 +44,7 @@ export const NotificationHeader: FC<NotificationHeaderProps> = ({
               alt={repoSlug}
               name={repoSlug}
               size={Size.SMALL}
-              src={notification.repository.owner.avatar_url}
+              src={notification.repository.owner.avatarUrl}
               userType={notification.repository.owner.type}
             />
           </button>