diff --git a/frontend/src/App/State/SettingsAppState.ts b/frontend/src/App/State/SettingsAppState.ts index d06892896..b7d5ea2df 100644 --- a/frontend/src/App/State/SettingsAppState.ts +++ b/frontend/src/App/State/SettingsAppState.ts @@ -159,7 +159,6 @@ export type LanguageSettingsAppState = AppSectionState; export type UiSettingsAppState = AppSectionItemState; interface SettingsAppState { - advancedSettings: boolean; autoTaggings: AutoTaggingAppState; autoTaggingSpecifications: AutoTaggingSpecificationAppState; customFormats: CustomFormatAppState; diff --git a/frontend/src/Helpers/Hooks/useShowAdvancedSettings.ts b/frontend/src/Helpers/Hooks/useShowAdvancedSettings.ts deleted file mode 100644 index 754c989cc..000000000 --- a/frontend/src/Helpers/Hooks/useShowAdvancedSettings.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { useSelector } from 'react-redux'; -import AppState from 'App/State/AppState'; - -function useShowAdvancedSettings() { - return useSelector((state: AppState) => state.settings.advancedSettings); -} - -export default useShowAdvancedSettings; diff --git a/frontend/src/Settings/AdvancedSettingsButton.tsx b/frontend/src/Settings/AdvancedSettingsButton.tsx index 137e77f52..72c567f18 100644 --- a/frontend/src/Settings/AdvancedSettingsButton.tsx +++ b/frontend/src/Settings/AdvancedSettingsButton.tsx @@ -1,12 +1,13 @@ import classNames from 'classnames'; import React, { useCallback } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; -import AppState from 'App/State/AppState'; import Icon from 'Components/Icon'; import Link from 'Components/Link/Link'; import { icons } from 'Helpers/Props'; -import { toggleAdvancedSettings } from 'Store/Actions/settingsActions'; import translate from 'Utilities/String/translate'; +import { + toggleShowAdvancedSettings, + useShowAdvancedSettings, +} from './advancedSettingsStore'; import styles from './AdvancedSettingsButton.css'; interface AdvancedSettingsButtonProps { @@ -14,14 +15,11 @@ interface AdvancedSettingsButtonProps { } function AdvancedSettingsButton({ showLabel }: AdvancedSettingsButtonProps) { - const showAdvancedSettings = useSelector( - (state: AppState) => state.settings.advancedSettings - ); - const dispatch = useDispatch(); + const showAdvancedSettings = useShowAdvancedSettings(); const handlePress = useCallback(() => { - dispatch(toggleAdvancedSettings()); - }, [dispatch]); + toggleShowAdvancedSettings(); + }, []); return ( state.settings.advancedSettings, (state: AppState) => state.settings.namingExamples, createSettingsSectionSelector(SECTION), - (advancedSettings, namingExamples, sectionSettings) => { + (namingExamples, sectionSettings) => { return { - advancedSettings, examples: namingExamples.item, examplesPopulated: namingExamples.isPopulated, ...sectionSettings, @@ -62,8 +61,8 @@ interface NamingModalOptions { } function Naming() { + const advancedSettings = useShowAdvancedSettings(); const { - advancedSettings, isFetching, error, settings, diff --git a/frontend/src/Settings/Metadata/Metadata/EditMetadataModal.tsx b/frontend/src/Settings/Metadata/Metadata/EditMetadataModal.tsx index 9731a39ab..df5dedab2 100644 --- a/frontend/src/Settings/Metadata/Metadata/EditMetadataModal.tsx +++ b/frontend/src/Settings/Metadata/Metadata/EditMetadataModal.tsx @@ -1,8 +1,8 @@ import React, { useCallback } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; -import AppState from 'App/State/AppState'; +import { useDispatch } from 'react-redux'; import Modal from 'Components/Modal/Modal'; import { sizes } from 'Helpers/Props'; +import { useShowAdvancedSettings } from 'Settings/advancedSettingsStore'; import { clearPendingChanges } from 'Store/Actions/baseActions'; import EditMetadataModalContent, { EditMetadataModalContentProps, @@ -20,9 +20,7 @@ function EditMetadataModal({ }: EditMetadataModalProps) { const dispatch = useDispatch(); - const advancedSettings = useSelector( - (state: AppState) => state.settings.advancedSettings - ); + const advancedSettings = useShowAdvancedSettings(); const handleModalClose = useCallback(() => { dispatch(clearPendingChanges({ section: 'metadata' })); diff --git a/frontend/src/Settings/Notifications/Notifications/EditNotificationModalContent.tsx b/frontend/src/Settings/Notifications/Notifications/EditNotificationModalContent.tsx index 3f4eb0258..4a0b2ba81 100644 --- a/frontend/src/Settings/Notifications/Notifications/EditNotificationModalContent.tsx +++ b/frontend/src/Settings/Notifications/Notifications/EditNotificationModalContent.tsx @@ -15,9 +15,9 @@ import ModalContent from 'Components/Modal/ModalContent'; import ModalFooter from 'Components/Modal/ModalFooter'; import ModalHeader from 'Components/Modal/ModalHeader'; import usePrevious from 'Helpers/Hooks/usePrevious'; -import useShowAdvancedSettings from 'Helpers/Hooks/useShowAdvancedSettings'; import { inputTypes, kinds } from 'Helpers/Props'; import AdvancedSettingsButton from 'Settings/AdvancedSettingsButton'; +import { useShowAdvancedSettings } from 'Settings/advancedSettingsStore'; import { saveNotification, setNotificationFieldValues, diff --git a/frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModalContent.tsx b/frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModalContent.tsx index da316d0e2..8bd43a15d 100644 --- a/frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModalContent.tsx +++ b/frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModalContent.tsx @@ -1,6 +1,5 @@ import React, { useCallback } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import AppState from 'App/State/AppState'; import { AutoTaggingSpecificationAppState } from 'App/State/SettingsAppState'; import Alert from 'Components/Alert'; import Form from 'Components/Form/Form'; @@ -16,6 +15,7 @@ import ModalContent from 'Components/Modal/ModalContent'; import ModalFooter from 'Components/Modal/ModalFooter'; import ModalHeader from 'Components/Modal/ModalHeader'; import { inputTypes, kinds } from 'Helpers/Props'; +import { useShowAdvancedSettings } from 'Settings/advancedSettingsStore'; import { clearAutoTaggingSpecificationPending, saveAutoTaggingSpecification, @@ -39,9 +39,7 @@ function EditSpecificationModalContent({ onDeleteSpecificationPress, onModalClose, }: EditSpecificationModalContentProps) { - const advancedSettings = useSelector( - (state: AppState) => state.settings.advancedSettings - ); + const advancedSettings = useShowAdvancedSettings(); const { item, ...otherFormProps } = useSelector( createProviderSettingsSelectorHook< diff --git a/frontend/src/Settings/advancedSettingsStore.ts b/frontend/src/Settings/advancedSettingsStore.ts new file mode 100644 index 000000000..a134cba98 --- /dev/null +++ b/frontend/src/Settings/advancedSettingsStore.ts @@ -0,0 +1,20 @@ +import { createPersist } from 'Helpers/createPersist'; + +interface AdvancedSettingsState { + showAdvancedSettings: boolean; +} + +const advancedSettingsStore = createPersist( + 'advanced_settings', + () => ({ showAdvancedSettings: false }) +); + +export const useShowAdvancedSettings = () => { + return advancedSettingsStore((state) => state.showAdvancedSettings); +}; + +export const toggleShowAdvancedSettings = () => { + advancedSettingsStore.setState((state) => ({ + showAdvancedSettings: !state.showAdvancedSettings, + })); +}; diff --git a/frontend/src/Store/Actions/settingsActions.js b/frontend/src/Store/Actions/settingsActions.js index 440f20000..fd548f212 100644 --- a/frontend/src/Store/Actions/settingsActions.js +++ b/frontend/src/Store/Actions/settingsActions.js @@ -1,4 +1,3 @@ -import { createAction } from 'redux-actions'; import { handleThunks } from 'Store/thunks'; import createHandleActions from './Creators/createHandleActions'; import autoTaggings from './Settings/autoTaggings'; @@ -91,20 +90,9 @@ export const defaultState = { }; export const persistState = [ - 'settings.advancedSettings', 'settings.importListExclusions.pageSize' ]; -// -// Actions Types - -export const TOGGLE_ADVANCED_SETTINGS = 'settings/toggleAdvancedSettings'; - -// -// Action Creators - -export const toggleAdvancedSettings = createAction(TOGGLE_ADVANCED_SETTINGS); - // // Action Handlers @@ -140,11 +128,6 @@ export const actionHandlers = handleThunks({ // Reducers export const reducers = createHandleActions({ - - [TOGGLE_ADVANCED_SETTINGS]: (state, { payload }) => { - return Object.assign({}, state, { advancedSettings: !state.advancedSettings }); - }, - ...autoTaggingSpecifications.reducers, ...autoTaggings.reducers, ...customFormatSpecifications.reducers,