refactor: component props

src/renderer/components/AllRead.tsx

@@ -5,11 +5,13 @@ import { AppContext } from '../context/App';
 import { hasActiveFilters } from '../utils/notifications/filters/filter';
 import { EmojiSplash } from './layout/EmojiSplash';
 
-interface IAllRead {
+interface AllReadProps {
   fullHeight?: boolean;
 }
 
-export const AllRead: FC<IAllRead> = ({ fullHeight = true }: IAllRead) => {
+export const AllRead: FC<AllReadProps> = ({
+  fullHeight = true,
+}: AllReadProps) => {
   const { settings } = useContext(AppContext);
 
   const hasFilters = hasActiveFilters(settings);

src/renderer/components/Oops.tsx

@@ -4,12 +4,15 @@ import type { GitifyError } from '../types';
 import { Errors } from '../utils/errors';
 import { EmojiSplash } from './layout/EmojiSplash';
 
-interface IOops {
+interface OopsProps {
   error: GitifyError;
   fullHeight?: boolean;
 }
 
-export const Oops: FC<IOops> = ({ error, fullHeight = true }: IOops) => {
+export const Oops: FC<OopsProps> = ({
+  error,
+  fullHeight = true,
+}: OopsProps) => {
   const err = error ?? Errors.UNKNOWN;
 
   const emoji = useMemo(

src/renderer/components/avatars/AvatarWithFallback.test.tsx

@@ -3,11 +3,11 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import { type Link, Size } from '../../types';
 import {
   AvatarWithFallback,
-  type IAvatarWithFallback,
+  type AvatarWithFallbackProps,
 } from './AvatarWithFallback';
 
 describe('renderer/components/avatars/AvatarWithFallback.tsx', () => {
-  const props: IAvatarWithFallback = {
+  const props: AvatarWithFallbackProps = {
     src: 'https://avatars.githubusercontent.com/u/133795385?s=200&v=4' as Link,
     alt: 'gitify-app',
     name: '@gitify-app',

src/renderer/components/avatars/AvatarWithFallback.tsx

@@ -8,15 +8,15 @@ import type { UserType } from '../../typesGitHub';
 import { getDefaultUserIcon } from '../../utils/icons';
 import { isNonHumanUser } from '../../utils/notifications/filters/userType';
 
-export interface IAvatarWithFallback {
+export interface AvatarWithFallbackProps {
   src?: Link;
   alt?: string;
   name?: string;
   size?: number;
   userType?: UserType;
 }
 
-export const AvatarWithFallback: React.FC<IAvatarWithFallback> = ({
+export const AvatarWithFallback: React.FC<AvatarWithFallbackProps> = ({
   src,
   alt,
   name,

src/renderer/components/fields/Checkbox.test.tsx

@@ -1,9 +1,9 @@
 import { render } from '@testing-library/react';
 
-import { Checkbox, type ICheckbox } from './Checkbox';
+import { Checkbox, type CheckboxProps } from './Checkbox';
 
 describe('renderer/components/fields/Checkbox.tsx', () => {
-  const props: ICheckbox = {
+  const props: CheckboxProps = {
     name: 'appearance',
     label: 'Appearance',
     checked: true,

src/renderer/components/fields/Checkbox.tsx

@@ -6,7 +6,7 @@ import { cn } from '../../utils/cn';
 import { CustomCounter } from '../primitives/CustomCounter';
 import { Tooltip } from './Tooltip';
 
-export interface ICheckbox {
+export interface CheckboxProps {
   name: string;
   label: string;
   counter?: number;
@@ -17,10 +17,10 @@ export interface ICheckbox {
   onChange: (evt: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const Checkbox: FC<ICheckbox> = ({
+export const Checkbox: FC<CheckboxProps> = ({
   visible = true,
   ...props
-}: ICheckbox) => {
+}: CheckboxProps) => {
   const counter = props?.counter === 0 ? '0' : props.counter;
 
   return (

src/renderer/components/fields/FieldLabel.test.tsx

@@ -1,9 +1,9 @@
 import { render } from '@testing-library/react';
 
-import { FieldLabel, type IFieldLabel } from './FieldLabel';
+import { FieldLabel, type FieldLabelProps } from './FieldLabel';
 
 describe('renderer/components/fields/FieldLabel.tsx', () => {
-  const props: IFieldLabel = {
+  const props: FieldLabelProps = {
     name: 'appearance',
     label: 'Appearance',
   };

src/renderer/components/fields/FieldLabel.tsx

@@ -1,11 +1,11 @@
 import type { FC } from 'react';
 
-export interface IFieldLabel {
+export interface FieldLabelProps {
   name: string;
   label: string;
 }
 
-export const FieldLabel: FC<IFieldLabel> = (props: IFieldLabel) => {
+export const FieldLabel: FC<FieldLabelProps> = (props: FieldLabelProps) => {
   return (
     <label className={'mr-1 font-medium cursor-pointer'} htmlFor={props.name}>
       {props.label}

src/renderer/components/fields/RadioGroup.test.tsx

@@ -1,9 +1,9 @@
 import { render } from '@testing-library/react';
 
-import { type IRadioGroup, RadioGroup } from './RadioGroup';
+import { RadioGroup, type RadioGroupProps } from './RadioGroup';
 
 describe('renderer/components/fields/RadioGroup.tsx', () => {
-  const props: IRadioGroup = {
+  const props: RadioGroupProps = {
     label: 'Appearance',
     name: 'appearance',
     options: [

src/renderer/components/fields/RadioGroup.tsx

@@ -6,7 +6,7 @@ import type { RadioGroupItem } from '../../types';
 import { FieldLabel } from './FieldLabel';
 import { Tooltip } from './Tooltip';
 
-export interface IRadioGroup {
+export interface RadioGroupProps {
   name: string;
   label: string;
   options: RadioGroupItem[];
@@ -15,7 +15,7 @@ export interface IRadioGroup {
   tooltip?: ReactNode | string;
 }
 
-export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
+export const RadioGroup: FC<RadioGroupProps> = (props: RadioGroupProps) => {
   return (
     <Stack
       align="center"

src/renderer/components/fields/Tooltip.test.tsx

@@ -5,10 +5,10 @@ import { BaseStyles, ThemeProvider } from '@primer/react';
 
 import { mockSettings } from '../../__mocks__/state-mocks';
 import { AppContext } from '../../context/App';
-import { type ITooltip, Tooltip } from './Tooltip';
+import { Tooltip, type TooltipProps } from './Tooltip';
 
 describe('renderer/components/fields/Tooltip.tsx', () => {
-  const props: ITooltip = {
+  const props: TooltipProps = {
     name: 'test',
     tooltip: 'This is some tooltip text',
   };

src/renderer/components/fields/Tooltip.tsx

@@ -5,12 +5,12 @@ import { AnchoredOverlay } from '@primer/react';
 
 import { cn } from '../../utils/cn';
 
-export interface ITooltip {
+export interface TooltipProps {
   name: string;
   tooltip: ReactNode | string;
 }
 
-export const Tooltip: FC<ITooltip> = (props: ITooltip) => {
+export const Tooltip: FC<TooltipProps> = (props: TooltipProps) => {
   const [showTooltip, setShowTooltip] = useState(false);
 
   return (

src/renderer/components/filters/FilterSection.tsx

@@ -10,7 +10,7 @@ import { Checkbox } from '../fields/Checkbox';
 import { Title } from '../primitives/Title';
 import { RequiresDetailedNotificationWarning } from './RequiresDetailedNotificationsWarning';
 
-export interface IFilterSection<T extends FilterValue> {
+export interface FilterSectionProps<T extends FilterValue> {
   id: string;
   title: string;
   icon: Icon;
@@ -28,7 +28,7 @@ export const FilterSection = <T extends FilterValue>({
   filterSetting,
   tooltip,
   layout = 'vertical',
-}: IFilterSection<T>) => {
+}: FilterSectionProps<T>) => {
   const { updateFilter, settings, notifications } = useContext(AppContext);
 
   return (

src/renderer/components/icons/LogoIcon.tsx

@@ -5,7 +5,7 @@ import { APPLICATION } from '../../../shared/constants';
 import { Size } from '../../types';
 import { cn } from '../../utils/cn';
 
-interface ILogoIcon {
+interface LogoIconProps {
   isDark?: boolean;
   onClick?: () => void;
   size: Size.SMALL | Size.MEDIUM | Size.LARGE;
@@ -17,12 +17,12 @@ const LIGHT_GRADIENT_END = '#FFFFFF';
 const DARK_GRADIENT_START = '#22283B';
 const DARK_GRADIENT_END = '#555B6E';
 
-export const LogoIcon: FC<ILogoIcon> = ({
+export const LogoIcon: FC<LogoIconProps> = ({
   isDark,
   onClick,
   size = Size.SMALL,
   ...props
-}: ILogoIcon) => (
+}: LogoIconProps) => (
   <svg
     aria-hidden="true"
     aria-label={`${APPLICATION.NAME} Logo`}

src/renderer/components/layout/Centered.tsx

@@ -2,12 +2,12 @@ import type { FC, ReactNode } from 'react';
 
 import { Stack } from '@primer/react';
 
-interface ICentered {
+interface CenteredProps {
   children: ReactNode;
   fullHeight: boolean;
 }
 
-export const Centered: FC<ICentered> = (props: ICentered) => {
+export const Centered: FC<CenteredProps> = (props: CenteredProps) => {
   return (
     <Stack
       align="center"

src/renderer/components/layout/EmojiSplash.tsx

@@ -5,18 +5,18 @@ import { Stack } from '@primer/react';
 import { EmojiText } from '../primitives/EmojiText';
 import { Centered } from './Centered';
 
-interface IEmojiSplash {
+interface EmojiSplashProps {
   emoji: string;
   heading: string;
   subHeadings?: string[];
   fullHeight?: boolean;
 }
 
-export const EmojiSplash: FC<IEmojiSplash> = ({
+export const EmojiSplash: FC<EmojiSplashProps> = ({
   fullHeight = true,
   subHeadings = [],
   ...props
-}: IEmojiSplash) => {
+}: EmojiSplashProps) => {
   return (
     <Centered fullHeight={fullHeight}>
       <Stack

src/renderer/components/layout/Page.tsx

@@ -1,6 +1,6 @@
 import type { FC, ReactNode } from 'react';
 
-interface IPage {
+interface PageProps {
   children: ReactNode;
   testId: string;
 }
@@ -10,7 +10,7 @@ interface IPage {
  * It creates a column layout for header, content, and footer.
  * The height is 100% to fill the parent container.
  */
-export const Page: FC<IPage> = ({ children, testId }) => {
+export const Page: FC<PageProps> = ({ children, testId }) => {
   return (
     <div className="flex flex-col h-screen" data-testid={testId}>
       {children}

src/renderer/components/metrics/MetricGroup.tsx

@@ -13,13 +13,13 @@ import type { Notification } from '../../typesGitHub';
 import { getPullRequestReviewIcon } from '../../utils/icons';
 import { MetricPill } from './MetricPill';
 
-interface IMetricGroup {
+interface MetricGroupProps {
   notification: Notification;
 }
 
-export const MetricGroup: FC<IMetricGroup> = ({
+export const MetricGroup: FC<MetricGroupProps> = ({
   notification,
-}: IMetricGroup) => {
+}: MetricGroupProps) => {
   const { settings } = useContext(AppContext);
 
   const commentsPillDescription = `${notification.subject.comments} ${

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

@@ -3,11 +3,11 @@ import { render } from '@testing-library/react';
 import { MarkGithubIcon } from '@primer/octicons-react';
 
 import { IconColor } from '../../types';
-import { type IMetricPill, MetricPill } from './MetricPill';
+import { MetricPill, type MetricPillProps } from './MetricPill';
 
 describe('renderer/components/metrics/MetricPill.tsx', () => {
   it('should render with metric', () => {
-    const props: IMetricPill = {
+    const props: MetricPillProps = {
       title: 'Mock Pill',
       metric: 1,
       icon: MarkGithubIcon,
@@ -18,7 +18,7 @@ describe('renderer/components/metrics/MetricPill.tsx', () => {
   });
 
   it('should render without metric', () => {
-    const props: IMetricPill = {
+    const props: MetricPillProps = {
       title: 'Mock Pill',
       icon: MarkGithubIcon,
       color: IconColor.GREEN,

src/renderer/components/metrics/MetricPill.tsx

@@ -5,14 +5,14 @@ import { Label, Stack, Text } from '@primer/react';
 
 import { type IconColor, Size } from '../../types';
 
-export interface IMetricPill {
+export interface MetricPillProps {
   title: string;
   metric?: number;
   icon: Icon;
   color: IconColor;
 }
 
-export const MetricPill: FC<IMetricPill> = (props: IMetricPill) => {
+export const MetricPill: FC<MetricPillProps> = (props: MetricPillProps) => {
   const Icon = props.icon;
 
   return (

src/renderer/components/notifications/AccountNotifications.tsx

@@ -26,15 +26,15 @@ import { HoverGroup } from '../primitives/HoverGroup';
 import { NotificationRow } from './NotificationRow';
 import { RepositoryNotifications } from './RepositoryNotifications';
 
-interface IAccountNotifications {
+interface AccountNotificationsProps {
   account: Account;
   notifications: Notification[];
   error: GitifyError | null;
   showAccountHeader: boolean;
 }
 
-export const AccountNotifications: FC<IAccountNotifications> = (
-  props: IAccountNotifications,
+export const AccountNotifications: FC<AccountNotificationsProps> = (
+  props: AccountNotificationsProps,
 ) => {
   const { account, showAccountHeader, notifications } = props;
 

src/renderer/components/notifications/NotificationFooter.tsx

@@ -10,13 +10,13 @@ import { getReasonDetails } from '../../utils/reason';
 import { AvatarWithFallback } from '../avatars/AvatarWithFallback';
 import { MetricGroup } from '../metrics/MetricGroup';
 
-interface INotificationFooter {
+interface NotificationFooterProps {
   notification: Notification;
 }
 
-export const NotificationFooter: FC<INotificationFooter> = ({
+export const NotificationFooter: FC<NotificationFooterProps> = ({
   notification,
-}: INotificationFooter) => {
+}: NotificationFooterProps) => {
   const reason = getReasonDetails(notification.reason);
 
   return (

src/renderer/components/notifications/NotificationHeader.tsx

@@ -9,13 +9,13 @@ import { cn } from '../../utils/cn';
 import { openRepository } from '../../utils/links';
 import { AvatarWithFallback } from '../avatars/AvatarWithFallback';
 
-interface INotificationHeader {
+interface NotificationHeaderProps {
   notification: Notification;
 }
 
-export const NotificationHeader: FC<INotificationHeader> = ({
+export const NotificationHeader: FC<NotificationHeaderProps> = ({
   notification,
-}: INotificationHeader) => {
+}: NotificationHeaderProps) => {
   const { settings } = useContext(AppContext);
 
   const repoSlug = notification.repository.full_name;