From 49ab04d2fdaea921ff40fd775223440e17ba8a9f Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Wed, 24 Apr 2024 15:31:26 +1000 Subject: [PATCH] chore: move SessionSettingsCategory to .d.ts file and remove the enum (instead use string union) --- .../leftpane/LeftPaneSettingSection.tsx | 30 +++++++++--------- ts/components/settings/SessionSettings.tsx | 31 ++++++------------- .../settings/SessionSettingsHeader.tsx | 20 ++++++------ ts/session/utils/Toast.tsx | 3 +- ts/state/createStore.ts | 2 +- ts/state/ducks/section.tsx | 7 +++-- ts/state/reducer.ts | 21 +++++++------ ts/state/selectors/section.ts | 2 +- ts/types/SessionSettingCategory.d.ts | 10 ++++++ 9 files changed, 63 insertions(+), 63 deletions(-) create mode 100644 ts/types/SessionSettingCategory.d.ts diff --git a/ts/components/leftpane/LeftPaneSettingSection.tsx b/ts/components/leftpane/LeftPaneSettingSection.tsx index b2dd84315..9efe37ba7 100644 --- a/ts/components/leftpane/LeftPaneSettingSection.tsx +++ b/ts/components/leftpane/LeftPaneSettingSection.tsx @@ -12,8 +12,8 @@ import { } from '../../state/ducks/section'; import { getFocusedSettingsSection } from '../../state/selectors/section'; import { SessionIcon } from '../icon'; -import { SessionSettingCategory } from '../settings/SessionSettings'; import { LeftPaneSectionHeader } from './LeftPaneSectionHeader'; +import type { SessionSettingCategory } from '../../types/SessionSettingCategory'; const StyledSettingsSectionTitle = styled.strong` font-family: var(--font-accent), var(--font-default); @@ -42,42 +42,42 @@ const StyledSettingsListItem = styled.div<{ active: boolean }>` } `; -const getCategories = () => { +const getCategories = (): Array<{ id: SessionSettingCategory; title: string }> => { return [ { - id: SessionSettingCategory.Privacy, + id: 'privacy' as const, title: window.i18n('privacySettingsTitle'), }, { - id: SessionSettingCategory.Notifications, + id: 'notifications' as const, title: window.i18n('notificationsSettingsTitle'), }, { - id: SessionSettingCategory.Conversations, + id: 'conversations' as const, title: window.i18n('conversationsSettingsTitle'), }, { - id: SessionSettingCategory.MessageRequests, + id: 'messageRequests' as const, title: window.i18n('openMessageRequestInbox'), }, { - id: SessionSettingCategory.Appearance, + id: 'appearance' as const, title: window.i18n('appearanceSettingsTitle'), }, { - id: SessionSettingCategory.Permissions, + id: 'permissions', title: window.i18n('permissionsSettingsTitle'), }, { - id: SessionSettingCategory.Help, + id: 'help' as const, title: window.i18n('helpSettingsTitle'), }, { - id: SessionSettingCategory.RecoveryPhrase, + id: 'recoveryPhrase' as const, title: window.i18n('recoveryPhrase'), }, { - id: SessionSettingCategory.ClearData, + id: 'ClearData' as const, title: window.i18n('clearDataSettingsTitle'), }, ]; @@ -93,7 +93,7 @@ const LeftPaneSettingsCategoryRow = (props: { const dataTestId = `${title.toLowerCase().replace(' ', '-')}-settings-menu-item`; - const isClearData = id === SessionSettingCategory.ClearData; + const isClearData = id === 'ClearData'; return ( { switch (id) { - case SessionSettingCategory.MessageRequests: + case 'messageRequests': dispatch(showLeftPaneSection(SectionType.Message)); dispatch(setLeftOverlayMode('message-requests')); dispatch(resetConversationExternal()); break; - case SessionSettingCategory.RecoveryPhrase: + case 'recoveryPhrase': dispatch(recoveryPhraseModal({})); break; - case SessionSettingCategory.ClearData: + case 'ClearData': dispatch(updateDeleteAccountModal({})); break; default: diff --git a/ts/components/settings/SessionSettings.tsx b/ts/components/settings/SessionSettings.tsx index 99e4867d7..5a2b919f2 100644 --- a/ts/components/settings/SessionSettings.tsx +++ b/ts/components/settings/SessionSettings.tsx @@ -19,6 +19,7 @@ import { CategoryConversations } from './section/CategoryConversations'; import { SettingsCategoryHelp } from './section/CategoryHelp'; import { SettingsCategoryPermissions } from './section/CategoryPermissions'; import { SettingsCategoryPrivacy } from './section/CategoryPrivacy'; +import type { SessionSettingCategory } from '../../types/SessionSettingCategory'; export function displayPasswordModal( passwordAction: PasswordAction, @@ -42,18 +43,6 @@ export function getCallMediaPermissionsSettings() { return window.getSettingValue('call-media-permissions'); } -export enum SessionSettingCategory { - Privacy = 'privacy', - Notifications = 'notifications', - Conversations = 'conversations', - MessageRequests = 'messageRequests', - Appearance = 'appearance', - Permissions = 'permissions', - Help = 'help', - RecoveryPhrase = 'recoveryPhrase', - ClearData = 'ClearData', -} - export interface SettingsViewProps { category: SessionSettingCategory; } @@ -113,25 +102,25 @@ const SettingInCategory = (props: { switch (category) { // special case for blocked user - case SessionSettingCategory.Conversations: + case 'conversations': return ; - case SessionSettingCategory.Appearance: + case 'appearance': return ; - case SessionSettingCategory.Notifications: + case 'notifications': return ; - case SessionSettingCategory.Privacy: + case 'privacy': return ( ); - case SessionSettingCategory.Help: + case 'help': return ; - case SessionSettingCategory.Permissions: + case 'permissions': return ; // these three down there have no options, they are just a button - case SessionSettingCategory.ClearData: - case SessionSettingCategory.MessageRequests: - case SessionSettingCategory.RecoveryPhrase: + case 'ClearData': + case 'messageRequests': + case 'recoveryPhrase': default: return null; } diff --git a/ts/components/settings/SessionSettingsHeader.tsx b/ts/components/settings/SessionSettingsHeader.tsx index 2f6f35772..91b0cefe5 100644 --- a/ts/components/settings/SessionSettingsHeader.tsx +++ b/ts/components/settings/SessionSettingsHeader.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled from 'styled-components'; import { assertUnreachable } from '../../types/sqlSharedTypes'; -import { SessionSettingCategory, SettingsViewProps } from './SessionSettings'; +import { SettingsViewProps } from './SessionSettings'; type Props = Pick; @@ -26,27 +26,27 @@ export const SettingsHeader = (props: Props) => { let categoryTitle: string | null = null; switch (category) { - case SessionSettingCategory.Appearance: + case 'appearance': categoryTitle = window.i18n('appearanceSettingsTitle'); break; - case SessionSettingCategory.Conversations: + case 'conversations': categoryTitle = window.i18n('conversationsSettingsTitle'); break; - case SessionSettingCategory.Notifications: + case 'notifications': categoryTitle = window.i18n('notificationsSettingsTitle'); break; - case SessionSettingCategory.Help: + case 'help': categoryTitle = window.i18n('helpSettingsTitle'); break; - case SessionSettingCategory.Permissions: + case 'permissions': categoryTitle = window.i18n('permissionsSettingsTitle'); break; - case SessionSettingCategory.Privacy: + case 'privacy': categoryTitle = window.i18n('privacySettingsTitle'); break; - case SessionSettingCategory.ClearData: - case SessionSettingCategory.MessageRequests: - case SessionSettingCategory.RecoveryPhrase: + case 'ClearData': + case 'messageRequests': + case 'recoveryPhrase': throw new Error(`no header for should be tried to be rendered for "${category}"`); default: diff --git a/ts/session/utils/Toast.tsx b/ts/session/utils/Toast.tsx index 7e7be394b..a6673aa59 100644 --- a/ts/session/utils/Toast.tsx +++ b/ts/session/utils/Toast.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { toast } from 'react-toastify'; import { SessionToast, SessionToastType } from '../../components/basic/SessionToast'; -import { SessionSettingCategory } from '../../components/settings/SessionSettings'; import { SectionType, showLeftPaneSection, showSettingsSection } from '../../state/ducks/section'; // if you push a toast manually with toast...() be sure to set the type attribute of the SessionToast component @@ -132,7 +131,7 @@ export function pushedMissedCall(conversationName: string) { const openPermissionsSettings = () => { window.inboxStore?.dispatch(showLeftPaneSection(SectionType.Settings)); - window.inboxStore?.dispatch(showSettingsSection(SessionSettingCategory.Permissions)); + window.inboxStore?.dispatch(showSettingsSection('permissions')); }; export function pushedMissedCallCauseOfPermission(conversationName: string) { diff --git a/ts/state/createStore.ts b/ts/state/createStore.ts index 097a7ccfd..a9c72dace 100644 --- a/ts/state/createStore.ts +++ b/ts/state/createStore.ts @@ -23,7 +23,7 @@ const logger = createLogger({ logger: directConsole, }); -export const persistConfig = { +const persistConfig = { key: 'root', storage, whitelist: ['userConfig'], diff --git a/ts/state/ducks/section.tsx b/ts/state/ducks/section.tsx index 5060af4cc..a07d4a6f6 100644 --- a/ts/state/ducks/section.tsx +++ b/ts/state/ducks/section.tsx @@ -1,5 +1,6 @@ -// TODOLATER move into redux slice -import { SessionSettingCategory } from '../../components/settings/SessionSettings'; +// TODO move into redux slice + +import type { SessionSettingCategory } from '../../types/SessionSettingCategory'; export const FOCUS_SECTION = 'FOCUS_SECTION'; export const FOCUS_SETTINGS_SECTION = 'FOCUS_SETTINGS_SECTION'; @@ -173,7 +174,7 @@ export const reducer = ( return { ...state, focusedSection: payload, - focusedSettingsSection: SessionSettingCategory.Privacy, + focusedSettingsSection: 'privacy', }; case FOCUS_SETTINGS_SECTION: return { diff --git a/ts/state/reducer.ts b/ts/state/reducer.ts index eb382c372..0715c8a75 100644 --- a/ts/state/reducer.ts +++ b/ts/state/reducer.ts @@ -1,24 +1,25 @@ import { combineReducers } from '@reduxjs/toolkit'; -import { callReducer as call, CallStateType } from './ducks/call'; -import { reducer as conversations, ConversationsStateType } from './ducks/conversations'; -import { defaultRoomReducer as defaultRooms, DefaultRoomsState } from './ducks/defaultRooms'; -import { reducer as primaryColor } from './ducks/primaryColor'; + +import { callReducer as call, CallStateType } from './ducks/call'; // ok: importing only RingingManager.ts which is not importing anything else +import { reducer as conversations, ConversationsStateType } from './ducks/conversations'; // todo +import { defaultRoomReducer as defaultRooms, DefaultRoomsState } from './ducks/defaultRooms'; // todo +import { reducer as primaryColor } from './ducks/primaryColor'; // ok: importing only Constants.tsx which is not importing anything else import { reducer as search, SearchStateType } from './ducks/search'; import { reducer as section, SectionStateType } from './ducks/section'; import { ReduxSogsRoomInfos, SogsRoomInfoState } from './ducks/sogsRoomInfo'; -import { reducer as theme } from './ducks/theme'; -import { reducer as user, UserStateType } from './ducks/user'; +import { reducer as theme } from './ducks/theme'; // ok: importing only Constants.tsx which is not importing anything else +import { reducer as user, UserStateType } from './ducks/user'; // ok: not importing anything else -import { PrimaryColorStateType, ThemeStateType } from '../themes/constants/colors'; +import { PrimaryColorStateType, ThemeStateType } from '../themes/constants/colors'; // ok: not importing anything else import { modalReducer as modals, ModalState } from './ducks/modalDialog'; -import { defaultOnionReducer as onionPaths, OnionState } from './ducks/onion'; +import { defaultOnionReducer as onionPaths, OnionState } from './ducks/onion'; // ok: not importing anything else import { settingsReducer, SettingsState } from './ducks/settings'; import { reducer as stagedAttachments, StagedAttachmentsStateType, } from './ducks/stagedAttachments'; -import { userConfigReducer as userConfig, UserConfigState } from './ducks/userConfig'; +import { userConfigReducer as userConfig, UserConfigState } from './ducks/userConfig'; // ok: not importing anything else export type StateType = { search: SearchStateType; @@ -37,7 +38,7 @@ export type StateType = { settings: SettingsState; }; -export const reducers = { +const reducers = { search, conversations, user, diff --git a/ts/state/selectors/section.ts b/ts/state/selectors/section.ts index 9599f3586..7640dde93 100644 --- a/ts/state/selectors/section.ts +++ b/ts/state/selectors/section.ts @@ -1,8 +1,8 @@ import { createSelector } from '@reduxjs/toolkit'; -import { SessionSettingCategory } from '../../components/settings/SessionSettings'; import { LeftOverlayMode, SectionStateType, SectionType } from '../ducks/section'; import { StateType } from '../reducer'; +import type { SessionSettingCategory } from '../../types/SessionSettingCategory'; export const getSection = (state: StateType): SectionStateType => state.section; diff --git a/ts/types/SessionSettingCategory.d.ts b/ts/types/SessionSettingCategory.d.ts new file mode 100644 index 000000000..21ffad665 --- /dev/null +++ b/ts/types/SessionSettingCategory.d.ts @@ -0,0 +1,10 @@ +export type SessionSettingCategory = + | 'privacy' + | 'notifications' + | 'conversations' + | 'messageRequests' + | 'appearance' + | 'permissions' + | 'help' + | 'recoveryPhrase' + | 'ClearData';