refactor: use status type (loading, error, success) (#1061)

* refactor: introduce status type

* refactor: status type

* refactor: status type

* test: rename suite

* refactor: status type

Author: setchy

src/components/Loading.test.tsx

@@ -16,9 +16,9 @@ describe('components/Loading.tsx', () => {
     jest.clearAllMocks();
   });
 
-  it('should check that NProgress is getting called in when isFetching changes (loading)', () => {
+  it('should check that NProgress is getting called in when status changes (loading)', () => {
     const { container } = render(
-      <AppContext.Provider value={{ isFetching: true }}>
+      <AppContext.Provider value={{ status: 'loading' }}>
         <Loading />
       </AppContext.Provider>,
     );
@@ -28,9 +28,9 @@ describe('components/Loading.tsx', () => {
     expect(NProgress.start).toHaveBeenCalledTimes(1);
   });
 
-  it('should check that NProgress is getting called in when isFetching changes (not loading)', () => {
+  it('should check that NProgress is getting called in when status changes (not loading)', () => {
     const { container } = render(
-      <AppContext.Provider value={{ isFetching: false }}>
+      <AppContext.Provider value={{ status: 'success' }}>
         <Loading />
       </AppContext.Provider>,
     );
@@ -42,7 +42,7 @@ describe('components/Loading.tsx', () => {
 
   it('should remove NProgress on unmount', () => {
     const { unmount } = render(
-      <AppContext.Provider value={{ isFetching: true }}>
+      <AppContext.Provider value={{ status: 'loading' }}>
         <Loading />
       </AppContext.Provider>,
     );

src/components/Loading.tsx

@@ -4,7 +4,7 @@ import { useContext, useEffect } from 'react';
 import { AppContext } from '../context/App';
 
 export const Loading = () => {
-  const { isFetching } = useContext(AppContext);
+  const { status } = useContext(AppContext);
 
   useEffect(() => {
     NProgress.configure({
@@ -17,12 +17,12 @@ export const Loading = () => {
   }, []);
 
   useEffect(() => {
-    if (isFetching) {
+    if (status === 'loading') {
       NProgress.start();
     } else {
       NProgress.done();
     }
-  }, [isFetching]);
+  }, [status]);
 
   return null;
 };

src/components/Sidebar.tsx

@@ -19,7 +19,7 @@ export const Sidebar: FC = () => {
   const navigate = useNavigate();
   const location = useLocation();
 
-  const { notifications, fetchNotifications, isLoggedIn, isFetching } =
+  const { notifications, fetchNotifications, isLoggedIn, status } =
     useContext(AppContext);
 
   const onOpenBrowser = useCallback(() => {
@@ -81,15 +81,14 @@ export const Sidebar: FC = () => {
                 navigate('/', { replace: true });
                 fetchNotifications();
               }}
-              disabled={isFetching}
+              disabled={status === 'loading'}
             >
               <SyncIcon
                 size={16}
                 aria-label="Refresh Notifications"
-                className={isFetching ? 'animate-spin' : undefined}
+                className={status === 'loading' ? 'animate-spin' : undefined}
               />
             </button>
-
             <button
               type="button"
               className={sidebarButtonClasses}

src/context/App.tsx

@@ -16,6 +16,7 @@ import {
   type AuthTokenOptions,
   type GitifyError,
   type SettingsState,
+  type Status,
   Theme,
 } from '../types';
 import { headNotifications } from '../utils/api/client';
@@ -54,8 +55,7 @@ interface AppContextState {
   logout: () => void;
 
   notifications: AccountNotifications[];
-  isFetching: boolean;
-  requestFailed: boolean;
+  status: Status;
   errorDetails: GitifyError;
   removeNotificationFromState: (id: string, hostname: string) => void;
   fetchNotifications: () => Promise<void>;
@@ -80,9 +80,8 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
   const {
     fetchNotifications,
     notifications,
-    requestFailed,
     errorDetails,
-    isFetching,
+    status,
     removeNotificationFromState,
     markNotificationRead,
     markNotificationDone,
@@ -239,8 +238,7 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
         logout,
 
         notifications,
-        isFetching,
-        requestFailed,
+        status,
         errorDetails,
         removeNotificationFromState,
         fetchNotifications: fetchNotificationsWithAccounts,