feat(settings): make fetch interval user configurable

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

Author: setchy

src/renderer/__mocks__/state-mocks.ts

@@ -89,6 +89,7 @@ const mockAppearanceSettings: AppearanceSettingsState = {
 const mockNotificationSettings: NotificationSettingsState = {
   groupBy: GroupBy.REPOSITORY,
   fetchType: FetchType.INTERVAL,
+  fetchInterval: Constants.DEFAULT_FETCH_NOTIFICATIONS_INTERVAL_MS,
   fetchAllNotifications: true,
   detailedNotifications: true,
   showPills: true,

src/renderer/components/settings/NotificationSettings.tsx

@@ -4,19 +4,26 @@ import {
   BellIcon,
   CheckIcon,
   CommentIcon,
+  DashIcon,
   GitPullRequestIcon,
   IssueOpenedIcon,
   MilestoneIcon,
+  PlusIcon,
+  SyncIcon,
   TagIcon,
 } from '@primer/octicons-react';
-import { Stack, Text } from '@primer/react';
+import { Button, ButtonGroup, IconButton, Stack, Text } from '@primer/react';
+
+import { formatDuration, millisecondsToMinutes } from 'date-fns';
 
 import { APPLICATION } from '../../../shared/constants';
 
+import { Constants } from '../../constants';
 import { AppContext } from '../../context/App';
 import { FetchType, GroupBy, Size } from '../../types';
 import { openGitHubParticipatingDocs } from '../../utils/links';
 import { Checkbox } from '../fields/Checkbox';
+import { FieldLabel } from '../fields/FieldLabel';
 import { RadioGroup } from '../fields/RadioGroup';
 import { Title } from '../primitives/Title';
 
@@ -68,6 +75,74 @@ export const NotificationSettings: FC = () => {
           value={settings.fetchType}
         />
 
+        <Stack
+          align="center"
+          className="text-sm"
+          direction="horizontal"
+          gap="condensed"
+        >
+          <FieldLabel label="Fetch interval:" name="fetchInterval" />
+
+          <ButtonGroup className="ml-2">
+            <IconButton
+              aria-label="Decrease fetch interval"
+              data-testid="settings-decrease-fetch-interval"
+              icon={DashIcon}
+              onClick={() => {
+                updateSetting(
+                  'fetchInterval',
+                  Math.max(
+                    settings.fetchInterval -
+                      Constants.FETCH_NOTIFICATIONS_INTERVAL_STEP_MS,
+                    Constants.MIN_FETCH_NOTIFICATIONS_INTERVAL_MS,
+                  ),
+                );
+              }}
+              size="small"
+              unsafeDisableTooltip={true}
+            />
+
+            <Button aria-label="Fetch interval" disabled size="small">
+              {formatDuration({
+                minutes: millisecondsToMinutes(settings.fetchInterval),
+              })}
+            </Button>
+
+            <IconButton
+              aria-label="Increase fetch interval"
+              data-testid="settings-increase-fetch-interval"
+              icon={PlusIcon}
+              onClick={() => {
+                updateSetting(
+                  'fetchInterval',
+                  Math.min(
+                    settings.fetchInterval +
+                      Constants.FETCH_NOTIFICATIONS_INTERVAL_STEP_MS,
+                    Constants.MAX_FETCH_NOTIFICATIONS_INTERVAL_MS,
+                  ),
+                );
+              }}
+              size="small"
+              unsafeDisableTooltip={true}
+            />
+
+            <IconButton
+              aria-label="Reset zoom"
+              data-testid="settings-zoom-reset"
+              icon={SyncIcon}
+              onClick={() => {
+                updateSetting(
+                  'fetchInterval',
+                  Constants.DEFAULT_FETCH_NOTIFICATIONS_INTERVAL_MS,
+                );
+              }}
+              size="small"
+              unsafeDisableTooltip={true}
+              variant="danger"
+            />
+          </ButtonGroup>
+        </Stack>
+
         <Checkbox
           checked={settings.fetchAllNotifications}
           label="Fetch all notifications"

src/renderer/constants.ts

@@ -20,7 +20,10 @@ export const Constants = {
 
   ALL_READ_EMOJIS: ['🎉', '🎊', '🥳', '👏', '🙌', '😎', '🏖️', '🚀', '✨', '🏆'],
 
-  FETCH_NOTIFICATIONS_INTERVAL_MS: 60 * 1000, // 1 minute
+  DEFAULT_FETCH_NOTIFICATIONS_INTERVAL_MS: 60 * 1000, // 1 minute
+  MIN_FETCH_NOTIFICATIONS_INTERVAL_MS: 60 * 1000, // 1 minute
+  MAX_FETCH_NOTIFICATIONS_INTERVAL_MS: 60 * 60 * 1000, // 1 hour
+  FETCH_NOTIFICATIONS_INTERVAL_STEP_MS: 60 * 1000, // 1 minute
 
   REFRESH_ACCOUNTS_INTERVAL_MS: 60 * 60 * 1000, // 1 hour
 

src/renderer/context/App.test.tsx

@@ -77,19 +77,25 @@ describe('renderer/context/App.tsx', () => {
       );
 
       act(() => {
-        jest.advanceTimersByTime(Constants.FETCH_NOTIFICATIONS_INTERVAL_MS);
+        jest.advanceTimersByTime(
+          Constants.DEFAULT_FETCH_NOTIFICATIONS_INTERVAL_MS,
+        );
         return;
       });
       expect(fetchNotificationsMock).toHaveBeenCalledTimes(2);
 
       act(() => {
-        jest.advanceTimersByTime(Constants.FETCH_NOTIFICATIONS_INTERVAL_MS);
+        jest.advanceTimersByTime(
+          Constants.DEFAULT_FETCH_NOTIFICATIONS_INTERVAL_MS,
+        );
         return;
       });
       expect(fetchNotificationsMock).toHaveBeenCalledTimes(3);
 
       act(() => {
-        jest.advanceTimersByTime(Constants.FETCH_NOTIFICATIONS_INTERVAL_MS);
+        jest.advanceTimersByTime(
+          Constants.DEFAULT_FETCH_NOTIFICATIONS_INTERVAL_MS,
+        );
         return;
       });
       expect(fetchNotificationsMock).toHaveBeenCalledTimes(4);

src/renderer/context/App.tsx

@@ -148,18 +148,14 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
     () => {
       fetchNotifications({ auth, settings });
     },
-    settings.fetchType === FetchType.INTERVAL
-      ? Constants.FETCH_NOTIFICATIONS_INTERVAL_MS
-      : null,
+    settings.fetchType === FetchType.INTERVAL ? settings.fetchInterval : null,
   );
 
   useInactivityTimer(
     () => {
       fetchNotifications({ auth, settings });
     },
-    settings.fetchType === FetchType.INACTIVITY
-      ? Constants.FETCH_NOTIFICATIONS_INTERVAL_MS
-      : null,
+    settings.fetchType === FetchType.INACTIVITY ? settings.fetchInterval : null,
   );
 
   useIntervalTimer(() => {

src/renderer/context/defaults.ts

@@ -1,3 +1,4 @@
+import { Constants } from '../constants';
 import {
   type AppearanceSettingsState,
   type AuthState,
@@ -27,6 +28,7 @@ const defaultAppearanceSettings: AppearanceSettingsState = {
 const defaultNotificationSettings: NotificationSettingsState = {
   groupBy: GroupBy.REPOSITORY,
   fetchType: FetchType.INTERVAL,
+  fetchInterval: Constants.DEFAULT_FETCH_NOTIFICATIONS_INTERVAL_MS,
   fetchAllNotifications: true,
   detailedNotifications: true,
   showPills: true,

src/renderer/types.ts

@@ -79,6 +79,7 @@ export interface AppearanceSettingsState {
 export interface NotificationSettingsState {
   groupBy: GroupBy;
   fetchType: FetchType;
+  fetchInterval: number;
   fetchAllNotifications: boolean;
   detailedNotifications: boolean;
   showPills: boolean;