From de67959847e14c2e502ecdc9c21e5ef70a084c93 Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Tue, 2 Apr 2024 09:14:33 -0400 Subject: [PATCH 1/7] refactor: style of placeholder txt --- src/components/fields/Checkbox.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/fields/Checkbox.tsx b/src/components/fields/Checkbox.tsx index 4f4bc6583..1197278a9 100644 --- a/src/components/fields/Checkbox.tsx +++ b/src/components/fields/Checkbox.tsx @@ -34,9 +34,9 @@ export const FieldCheckbox = (props: IFieldCheckbox) => { {props.label} {props.placeholder && ( -

+

{props.placeholder} -

+
)} From f83ee77caa2d1929e5cc1a57ffdfc1f7e7717adc Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Tue, 2 Apr 2024 09:17:00 -0400 Subject: [PATCH 2/7] refactor: create settings sections --- src/routes/Settings.tsx | 149 ++++++++++++++++++++++------------------ 1 file changed, 81 insertions(+), 68 deletions(-) diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx index 1c218bacf..fae3f1bdb 100644 --- a/src/routes/Settings.tsx +++ b/src/routes/Settings.tsx @@ -86,7 +86,7 @@ export const SettingsRoute: React.FC = () => { return (
@@ -105,77 +105,90 @@ export const SettingsRoute: React.FC = () => {

Settings

-
- { - updateSetting('appearance', evt.target.value); - }} - /> - - - colorScope && updateSetting('colors', evt.target.checked) - } - disabled={!colorScope} - /> - updateSetting('participating', evt.target.checked)} - /> - - - updateSetting('showNotifications', evt.target.checked) - } - /> - updateSetting('showBots', evt.target.checked)} - /> - - updateSetting('markAsDoneOnOpen', evt.target.checked) - } - /> - updateSetting('playSound', evt.target.checked)} - /> - {!isLinux && ( +
+
+ Appearance + { + updateSetting('appearance', evt.target.value); + }} + /> + + colorScope && updateSetting('colors', evt.target.checked) + } + disabled={!colorScope} + /> +
+ +
+ Notifications + + updateSetting('participating', evt.target.checked) + } + /> + - updateSetting('openAtStartup', evt.target.checked) + updateSetting('showNotifications', evt.target.checked) } /> - )} + updateSetting('showBots', evt.target.checked)} + /> + + updateSetting('markAsDoneOnOpen', evt.target.checked) + } + /> +
+ +
+ System + updateSetting('playSound', evt.target.checked)} + /> + {!isLinux && ( + + updateSetting('openAtStartup', evt.target.checked) + } + /> + )} +
From 28eb7633b4c430fce45f61e1cb838065abd04225 Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Tue, 2 Apr 2024 09:17:16 -0400 Subject: [PATCH 3/7] refactor: split out settings types --- src/types.ts | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/types.ts b/src/types.ts index a3147c0f7..5fbb880af 100644 --- a/src/types.ts +++ b/src/types.ts @@ -6,17 +6,27 @@ export interface AuthState { user: GitifyUser | null; } -export interface SettingsState { +export type SettingsState = AppearanceSettingsState & + NotificationSettingsState & + SystemSettingsState; + +interface AppearanceSettingsState { + appearance: Appearance; + colors: boolean | null; +} + +interface NotificationSettingsState { participating: boolean; - playSound: boolean; showNotifications: boolean; showBots: boolean; - openAtStartup: boolean; - appearance: Appearance; - colors: boolean | null; markAsDoneOnOpen: boolean; } +interface SystemSettingsState { + playSound: boolean; + openAtStartup: boolean; +} + export enum Appearance { SYSTEM = 'SYSTEM', LIGHT = 'LIGHT', From 1e7fa311128f373d1d7f9ce639df7e4507fd8315 Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Tue, 2 Apr 2024 09:17:29 -0400 Subject: [PATCH 4/7] refactor: radio group --- src/components/fields/RadioGroup.tsx | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/components/fields/RadioGroup.tsx b/src/components/fields/RadioGroup.tsx index f61bf79ef..589b2ffe1 100644 --- a/src/components/fields/RadioGroup.tsx +++ b/src/components/fields/RadioGroup.tsx @@ -17,12 +17,20 @@ export const FieldRadioGroup = ({ value: string; }) => { return ( -
-
- +
+
+ + + {placeholder && ( +
+ {placeholder} +
+ )}
-
+
); }; From e5a03beb24b1d8e4683f62611ea814391a3e602a Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Tue, 2 Apr 2024 09:35:13 -0400 Subject: [PATCH 5/7] refactor: rename appearance to theme --- src/__mocks__/mock-state.ts | 4 +- src/components/fields/RadioGroup.tsx | 8 +- .../__snapshots__/RadioGroup.test.tsx.snap | 30 +- src/context/App.test.tsx | 4 +- src/context/App.tsx | 12 +- src/routes/Settings.test.tsx | 4 +- src/routes/Settings.tsx | 34 +- .../__snapshots__/Settings.test.tsx.snap | 405 ++++++++++-------- src/types.ts | 4 +- src/utils/github-api.ts | 8 +- src/utils/storage.test.ts | 4 +- .../{appearance.test.ts => theme.test.ts} | 14 +- src/utils/{appearance.ts => theme.ts} | 14 +- 13 files changed, 295 insertions(+), 250 deletions(-) rename src/utils/{appearance.test.ts => theme.test.ts} (79%) rename src/utils/{appearance.ts => theme.ts} (69%) diff --git a/src/__mocks__/mock-state.ts b/src/__mocks__/mock-state.ts index 8175a7f1d..bb8b7a3cc 100644 --- a/src/__mocks__/mock-state.ts +++ b/src/__mocks__/mock-state.ts @@ -1,4 +1,4 @@ -import { Appearance, AuthState, SettingsState } from '../types'; +import { Theme, AuthState, SettingsState } from '../types'; import { mockedUser, mockedEnterpriseAccounts } from './mockedData'; export const mockAccounts: AuthState = { @@ -13,7 +13,7 @@ export const mockSettings: SettingsState = { showNotifications: true, showBots: true, openAtStartup: false, - appearance: Appearance.SYSTEM, + theme: Theme.SYSTEM, colors: false, markAsDoneOnOpen: false, }; diff --git a/src/components/fields/RadioGroup.tsx b/src/components/fields/RadioGroup.tsx index 589b2ffe1..cc21327d4 100644 --- a/src/components/fields/RadioGroup.tsx +++ b/src/components/fields/RadioGroup.tsx @@ -18,10 +18,10 @@ export const FieldRadioGroup = ({ }) => { return (
-
+
@@ -34,14 +34,14 @@ export const FieldRadioGroup = ({
{options.map((item) => { return (
-
- + -

+

This is some helper text -

+
- +
`; diff --git a/src/context/App.test.tsx b/src/context/App.test.tsx index 63d0e8bfa..d31f24631 100644 --- a/src/context/App.test.tsx +++ b/src/context/App.test.tsx @@ -285,7 +285,7 @@ describe('context/App.tsx', () => { expect(saveStateMock).toHaveBeenCalledWith( { enterpriseAccounts: [], token: null, user: null }, { - appearance: 'SYSTEM', + theme: 'SYSTEM', openAtStartup: false, participating: true, playSound: true, @@ -324,7 +324,7 @@ describe('context/App.tsx', () => { expect(saveStateMock).toHaveBeenCalledWith( { enterpriseAccounts: [], token: null, user: null }, { - appearance: 'SYSTEM', + theme: 'SYSTEM', openAtStartup: true, participating: false, playSound: true, diff --git a/src/context/App.tsx b/src/context/App.tsx index 3da7ba375..6fe2e7587 100644 --- a/src/context/App.tsx +++ b/src/context/App.tsx @@ -10,14 +10,14 @@ import { useInterval } from '../hooks/useInterval'; import { useNotifications } from '../hooks/useNotifications'; import { AccountNotifications, - Appearance, + Theme, AuthOptions, AuthState, AuthTokenOptions, SettingsState, } from '../types'; import { apiRequestAuth } from '../utils/api-requests'; -import { setAppearance } from '../utils/appearance'; +import { setTheme } from '../utils/theme'; import { addAccount, authGitHub, getToken, getUserData } from '../utils/auth'; import { setAutoLaunch } from '../utils/comms'; import Constants from '../utils/constants'; @@ -36,7 +36,7 @@ export const defaultSettings: SettingsState = { showNotifications: true, showBots: true, openAtStartup: false, - appearance: Appearance.SYSTEM, + theme: Theme.SYSTEM, colors: null, markAsDoneOnOpen: false, }; @@ -87,8 +87,8 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => { }, []); useEffect(() => { - setAppearance(settings.appearance as Appearance); - }, [settings.appearance]); + setTheme(settings.theme as Theme); + }, [settings.theme]); useEffect(() => { fetchNotifications(accounts, settings); @@ -103,7 +103,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => { }, 60000); const updateSetting = useCallback( - (name: keyof SettingsState, value: boolean | Appearance) => { + (name: keyof SettingsState, value: boolean | Theme) => { if (name === 'openAtStartup') { setAutoLaunch(value as boolean); } diff --git a/src/routes/Settings.test.tsx b/src/routes/Settings.test.tsx index 3e36c9da1..6394ec305 100644 --- a/src/routes/Settings.test.tsx +++ b/src/routes/Settings.test.tsx @@ -267,7 +267,7 @@ describe('routes/Settings.tsx', () => { expect(updateSetting).toHaveBeenCalledWith('openAtStartup', false); }); - it('should change the appearance radio group', async () => { + it('should change the theme radio group', async () => { let getByLabelText; await act(async () => { @@ -290,7 +290,7 @@ describe('routes/Settings.tsx', () => { fireEvent.click(getByLabelText('Light')); expect(updateSetting).toHaveBeenCalledTimes(1); - expect(updateSetting).toHaveBeenCalledWith('appearance', 'LIGHT'); + expect(updateSetting).toHaveBeenCalledWith('theme', 'LIGHT'); }); it('should go to the enterprise login route', async () => { diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx index fae3f1bdb..75427bbb9 100644 --- a/src/routes/Settings.tsx +++ b/src/routes/Settings.tsx @@ -17,9 +17,9 @@ import { useNavigate } from 'react-router-dom'; import { FieldCheckbox } from '../components/fields/Checkbox'; import { FieldRadioGroup } from '../components/fields/RadioGroup'; import { AppContext } from '../context/App'; -import { Appearance } from '../types'; +import { Theme } from '../types'; import { apiRequestAuth } from '../utils/api-requests'; -import { setAppearance } from '../utils/appearance'; +import { setTheme } from '../utils/theme'; import { openExternalLink, updateTrayIcon } from '../utils/comms'; import Constants from '../utils/constants'; import { generateGitHubAPIUrl } from '../utils/helpers'; @@ -61,9 +61,9 @@ export const SettingsRoute: React.FC = () => { })(); }, [accounts.token]); - ipcRenderer.on('update-native-theme', (_, updatedAppearance: Appearance) => { - if (settings.appearance === Appearance.SYSTEM) { - setAppearance(updatedAppearance); + ipcRenderer.on('update-native-theme', (_, updatedTheme: Theme) => { + if (settings.theme === Theme.SYSTEM) { + setTheme(updatedTheme); } }); @@ -107,18 +107,20 @@ export const SettingsRoute: React.FC = () => {
- Appearance + + Appearance + { - updateSetting('appearance', evt.target.value); + updateSetting('theme', evt.target.value); }} /> {
- Notifications + + Notifications + {
- System + + System +
-
- - Appearance - -
+ + Appearance +
-
- - + + +
+
+ + +
+
+ + +
+
+
+
+
-
-
- -
+ Notifications +
- -
-
-
-
- -
-
-
+
- Show only participating - -
-
-
-
- + +
+ Only show notifications you are participating in +
+
- -
-
-
-
- -
-
-
+
- Show notifications from Bot accounts - + +
-
-
- +
+ +
+
+ +
-
+
- Mark as done on open - + +
-
-
+
-
- -
+ System +
- -
-
-
-
- + +
+
+ +
- + +
+
+ +
-
+
{ jest.spyOn(localStorage.__proto__, 'getItem').mockReturnValueOnce( JSON.stringify({ auth: { token: '123-456' }, - settings: { appearance: 'DARK' }, + settings: { theme: 'DARK' }, }), ); const result = loadState(); expect(result.accounts.token).toBe('123-456'); - expect(result.settings.appearance).toBe('DARK'); + expect(result.settings.theme).toBe('DARK'); }); it('should load the state from localstorage - empty', () => { diff --git a/src/utils/appearance.test.ts b/src/utils/theme.test.ts similarity index 79% rename from src/utils/appearance.test.ts rename to src/utils/theme.test.ts index a6f8005ea..baa43188e 100644 --- a/src/utils/appearance.test.ts +++ b/src/utils/theme.test.ts @@ -1,7 +1,7 @@ -import { Appearance } from '../types'; -import { setAppearance } from './appearance'; +import { Theme } from '../types'; +import { setTheme } from './theme'; -import * as appearanceHelpers from './appearance'; +import * as appearanceHelpers from './theme'; describe('utils/appearance.ts', () => { beforeAll(() => { @@ -17,17 +17,17 @@ describe('utils/appearance.ts', () => { }); it('should change to light mode', () => { - setAppearance(Appearance.LIGHT); + setTheme(Theme.LIGHT); expect(appearanceHelpers.setLightMode).toHaveBeenCalledTimes(1); }); it('should change to dark mode', () => { - setAppearance(Appearance.DARK); + setTheme(Theme.DARK); expect(appearanceHelpers.setDarkMode).toHaveBeenCalledTimes(1); }); it("should use the system's mode - light", () => { - setAppearance(); + setTheme(); expect(appearanceHelpers.setLightMode).toHaveBeenCalledTimes(1); }); @@ -38,7 +38,7 @@ describe('utils/appearance.ts', () => { matches: true, })), }); - setAppearance(); + setTheme(); expect(appearanceHelpers.setDarkMode).toHaveBeenCalledTimes(1); }); }); diff --git a/src/utils/appearance.ts b/src/utils/theme.ts similarity index 69% rename from src/utils/appearance.ts rename to src/utils/theme.ts index bce783d5e..57f902026 100644 --- a/src/utils/appearance.ts +++ b/src/utils/theme.ts @@ -1,11 +1,11 @@ -import { Appearance } from '../types'; +import { Theme } from '../types'; -export function getAppearance(): Appearance { +export function getTheme(): Theme { if (document.querySelector('html').classList.contains('dark')) { - return Appearance.DARK; + return Theme.DARK; } - return Appearance.LIGHT; + return Theme.LIGHT; } export const setLightMode = () => @@ -14,13 +14,13 @@ export const setLightMode = () => export const setDarkMode = () => document.querySelector('html').classList.add('dark'); -export const setAppearance = (mode?: Appearance) => { +export const setTheme = (mode?: Theme) => { switch (mode) { - case Appearance.LIGHT: + case Theme.LIGHT: setLightMode(); break; - case Appearance.DARK: + case Theme.DARK: setDarkMode(); break; From e124afade2ed5a2120effcd5e0a4bbbaac48daf9 Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Tue, 2 Apr 2024 10:07:41 -0400 Subject: [PATCH 6/7] fix: remove placeholder --- src/routes/Settings.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx index 75427bbb9..0fa76eb94 100644 --- a/src/routes/Settings.tsx +++ b/src/routes/Settings.tsx @@ -143,7 +143,6 @@ export const SettingsRoute: React.FC = () => { updateSetting('participating', evt.target.checked) From c4fc5e97fd65dc4ad54ed006cd3efb089cbe910f Mon Sep 17 00:00:00 2001 From: Adam Setch Date: Tue, 2 Apr 2024 10:11:46 -0400 Subject: [PATCH 7/7] fix: remove placeholder --- src/routes/__snapshots__/Settings.test.tsx.snap | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap index b9a41bac5..73583eb5e 100644 --- a/src/routes/__snapshots__/Settings.test.tsx.snap +++ b/src/routes/__snapshots__/Settings.test.tsx.snap @@ -201,11 +201,6 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = ` > Show only participating -
- Only show notifications you are participating in -