feat: ability to set fetch type (interval or inactivity)

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

Author: setchy

src/renderer/__mocks__/state-mocks.ts

@@ -3,6 +3,7 @@ import {
   type Account,
   type AppearanceSettingsState,
   type AuthState,
+  FetchType,
   type FilterSettingsState,
   type GitifyState,
   type GitifyUser,
@@ -87,6 +88,7 @@ const mockAppearanceSettings: AppearanceSettingsState = {
 
 const mockNotificationSettings: NotificationSettingsState = {
   groupBy: GroupBy.REPOSITORY,
+  fetchType: FetchType.INTERVAL,
   fetchAllNotifications: true,
   detailedNotifications: true,
   showPills: true,

src/renderer/components/fields/FieldLabel.tsx

@@ -7,7 +7,7 @@ export interface IFieldLabel {
 
 export const FieldLabel: FC<IFieldLabel> = (props: IFieldLabel) => {
   return (
-    <label className="mr-3 font-medium cursor-pointer" htmlFor={props.name}>
+    <label className={'mr-1 font-medium cursor-pointer'} htmlFor={props.name}>
       {props.label}
     </label>
   );

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

@@ -14,7 +14,7 @@ import { Stack, Text } from '@primer/react';
 import { APPLICATION } from '../../../shared/constants';
 
 import { AppContext } from '../../context/App';
-import { GroupBy, Size } from '../../types';
+import { FetchType, GroupBy, Size } from '../../types';
 import { openGitHubParticipatingDocs } from '../../utils/links';
 import { Checkbox } from '../fields/Checkbox';
 import { RadioGroup } from '../fields/RadioGroup';
@@ -41,6 +41,19 @@ export const NotificationSettings: FC = () => {
           value={settings.groupBy}
         />
 
+        <RadioGroup
+          label="Fetch type:"
+          name="fetchType"
+          onChange={(evt) => {
+            updateSetting('fetchType', evt.target.value as FetchType);
+          }}
+          options={[
+            { label: 'Interval', value: FetchType.INTERVAL },
+            { label: 'Inactivity', value: FetchType.INACTIVITY },
+          ]}
+          value={settings.fetchType}
+        />
+
         <Checkbox
           checked={settings.fetchAllNotifications}
           label="Fetch all notifications"

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

@@ -10,7 +10,8 @@ import {
 import { useTheme } from '@primer/react';
 
 import { Constants } from '../constants';
-import { useInterval } from '../hooks/useInterval';
+import { useInactivityTimer } from '../hooks/timers/useInactivityTimer';
+import { useIntervalTimer } from '../hooks/timers/useIntervalTimer';
 import { useNotifications } from '../hooks/useNotifications';
 import type {
   Account,
@@ -24,6 +25,7 @@ import type {
   Status,
   Token,
 } from '../types';
+import { FetchType } from '../types';
 import type { Notification } from '../typesGitHub';
 import { headNotifications } from '../utils/api/client';
 import type {
@@ -142,11 +144,25 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
     settings.filterReasons,
   ]);
 
-  useInterval(() => {
-    fetchNotifications({ auth, settings });
-  }, Constants.FETCH_NOTIFICATIONS_INTERVAL_MS);
+  useIntervalTimer(
+    () => {
+      fetchNotifications({ auth, settings });
+    },
+    settings.fetchType === FetchType.INTERVAL
+      ? Constants.FETCH_NOTIFICATIONS_INTERVAL_MS
+      : null,
+  );
+
+  useInactivityTimer(
+    () => {
+      fetchNotifications({ auth, settings });
+    },
+    settings.fetchType === FetchType.INACTIVITY
+      ? Constants.FETCH_NOTIFICATIONS_INTERVAL_MS
+      : null,
+  );
 
-  useInterval(() => {
+  useIntervalTimer(() => {
     for (const account of auth.accounts) {
       refreshAccount(account);
     }

src/renderer/components/settings/NotificationSettings.tsx

@@ -1,6 +1,7 @@
 import {
   type AppearanceSettingsState,
   type AuthState,
+  FetchType,
   type FilterSettingsState,
   GroupBy,
   type NotificationSettingsState,
@@ -25,6 +26,7 @@ const defaultAppearanceSettings: AppearanceSettingsState = {
 
 const defaultNotificationSettings: NotificationSettingsState = {
   groupBy: GroupBy.REPOSITORY,
+  fetchType: FetchType.INTERVAL,
   fetchAllNotifications: true,
   detailedNotifications: true,
   showPills: true,

src/renderer/context/App.tsx

@@ -0,0 +1,60 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+const events = ['mousedown', 'keypress', 'click'];
+
+/**
+ * Hook that triggers a callback after a specified period of user inactivity.
+ * User activity as defined in `events` will reset the timer.
+ */
+export const useInactivityTimer = (callback: () => void, delay: number) => {
+  const savedCallback = useRef<(() => void) | null>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Remember the latest callback
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  // Reset the inactivity timer
+  const resetTimer = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    if (delay !== null && savedCallback.current) {
+      timeoutRef.current = setTimeout(() => {
+        // Fire callback once inactivity threshold reached
+        savedCallback.current();
+
+        // Schedule next run while still inactive
+        resetTimer();
+      }, delay);
+    }
+  }, [delay]);
+
+  // Set up event listeners for user activity
+  useEffect(() => {
+    if (delay === null) {
+      return;
+    }
+
+    // Add event listeners to track activity
+    events.forEach((event) => {
+      document.addEventListener(event, resetTimer, { passive: true });
+    });
+
+    // Start initial timer
+    resetTimer();
+
+    // Cleanup function
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      events.forEach((event) => {
+        document.removeEventListener(event, resetTimer);
+      });
+    };
+  }, [delay, resetTimer]);
+};

src/renderer/context/defaults.ts

@@ -1,8 +1,12 @@
 import { useEffect, useRef } from 'react';
 
-// Thanks to https://overreacted.io/making-setinterval-declarative-with-react-hooks/
-export const useInterval = (callback, delay: number) => {
-  const savedCallback = useRef(null);
+/**
+ * Hook that triggers a callback after a specified period of time.
+ *
+ * Thanks to https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+ */
+export const useIntervalTimer = (callback: () => void, delay: number) => {
+  const savedCallback = useRef<(() => void) | null>(null);
 
   // Remember the latest callback.
   useEffect(() => {