From edbab3e11b87319f314b0771080059e5625e212f Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Tue, 18 Jun 2024 07:11:54 -0400
Subject: [PATCH] refactor: component props

---
 src/components/AccountNotifications.tsx |  8 +++++---
 src/components/AllRead.tsx              |  4 ++--
 src/components/Header.tsx               |  4 ++--
 src/components/Loading.tsx              |  4 ++--
 src/components/Logo.tsx                 | 11 +++++++++--
 src/components/NotificationRow.tsx      |  6 ++++--
 src/components/Oops.tsx                 |  4 ++--
 src/components/Repository.tsx           |  4 ++--
 8 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx
index 15dbe2232..8f90b7404 100644
--- a/src/components/AccountNotifications.tsx
+++ b/src/components/AccountNotifications.tsx
@@ -3,20 +3,22 @@ import {
   ChevronLeftIcon,
   ChevronUpIcon,
 } from '@primer/octicons-react';
-import { useState } from 'react';
+import { type FC, useState } from 'react';
 import type { Account } from '../types';
 import type { Notification } from '../typesGitHub';
 import { openAccountProfile } from '../utils/links';
 import { RepositoryNotifications } from './Repository';
 import { PlatformIcon } from './icons/PlatformIcon';
 
-interface IProps {
+interface IAccountNotifications {
   account: Account;
   notifications: Notification[];
   showAccountHostname: boolean;
 }
 
-export const AccountNotifications = (props: IProps) => {
+export const AccountNotifications: FC<IAccountNotifications> = (
+  props: IAccountNotifications,
+) => {
   const { account, showAccountHostname, notifications } = props;
 
   const groupedNotifications = Object.values(
diff --git a/src/components/AllRead.tsx b/src/components/AllRead.tsx
index b16823bac..4ba62b0e5 100644
--- a/src/components/AllRead.tsx
+++ b/src/components/AllRead.tsx
@@ -1,7 +1,7 @@
-import { useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 import { Constants } from '../utils/constants';
 
-export const AllRead = () => {
+export const AllRead: FC = () => {
   const emoji = useMemo(
     () =>
       Constants.ALL_READ_EMOJIS[
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 011735cf0..e1813cf14 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,12 +1,12 @@
 import { ArrowLeftIcon } from '@primer/octicons-react';
-import type { ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 interface IHeader {
   children: ReactNode;
 }
 
-export const Header = ({ children }: IHeader) => {
+export const Header: FC<IHeader> = ({ children }: IHeader) => {
   const navigate = useNavigate();
   return (
     <div className="mx-8 mt-2 flex items-center justify-between py-2">
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index acde575b9..e008c7fa1 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -1,8 +1,8 @@
 import NProgress from 'nprogress';
-import { useContext, useEffect } from 'react';
+import { type FC, useContext, useEffect } from 'react';
 import { AppContext } from '../context/App';
 
-export const Loading = () => {
+export const Loading: FC = () => {
   const { status } = useContext(AppContext);
 
   useEffect(() => {
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
index 760b51cfc..e76a777bd 100644
--- a/src/components/Logo.tsx
+++ b/src/components/Logo.tsx
@@ -1,4 +1,6 @@
-interface IProps {
+import type { FC } from 'react';
+
+interface ILogo {
   isDark?: boolean;
   onClick?: () => void;
   className?: string;
@@ -10,7 +12,12 @@ const LIGHT_GRADIENT_END = '#FFFFFF';
 const DARK_GRADIENT_START = '#22283B';
 const DARK_GRADIENT_END = '#555B6E';
 
-export const Logo = ({ isDark, onClick, className = '', ...props }: IProps) => (
+export const Logo: FC<ILogo> = ({
+  isDark,
+  onClick,
+  className = '',
+  ...props
+}: ILogo) => (
   <svg
     className={className}
     onClick={() => onClick?.()}
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index bcd9ff4e5..5c7c86f19 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -32,11 +32,13 @@ import { openNotification, openUserProfile } from '../utils/links';
 import { formatReason } from '../utils/reason';
 import { PillButton } from './buttons/PillButton';
 
-interface IProps {
+interface INotificationRow {
   notification: Notification;
 }
 
-export const NotificationRow: FC<IProps> = ({ notification }) => {
+export const NotificationRow: FC<INotificationRow> = ({
+  notification,
+}: INotificationRow) => {
   const {
     settings,
     removeNotificationFromState,
diff --git a/src/components/Oops.tsx b/src/components/Oops.tsx
index 5c2afc4d0..791424c8f 100644
--- a/src/components/Oops.tsx
+++ b/src/components/Oops.tsx
@@ -1,11 +1,11 @@
 import { type FC, useMemo } from 'react';
 import type { GitifyError } from '../types';
 
-interface IProps {
+interface IOops {
   error: GitifyError;
 }
 
-export const Oops: FC<IProps> = ({ error }) => {
+export const Oops: FC<IOops> = ({ error }: IOops) => {
   const emoji = useMemo(
     () => error.emojis[Math.floor(Math.random() * error.emojis.length)],
     [error],
diff --git a/src/components/Repository.tsx b/src/components/Repository.tsx
index a0cc564f3..87b06055c 100644
--- a/src/components/Repository.tsx
+++ b/src/components/Repository.tsx
@@ -11,12 +11,12 @@ import type { Notification } from '../typesGitHub';
 import { openRepository } from '../utils/links';
 import { NotificationRow } from './NotificationRow';
 
-interface IProps {
+interface IRepositoryNotifications {
   repoNotifications: Notification[];
   repoName: string;
 }
 
-export const RepositoryNotifications: FC<IProps> = ({
+export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
   repoName,
   repoNotifications,
 }) => {