Convert advanced settings to zustand store

frontend/src/App/State/SettingsAppState.ts

@@ -159,7 +159,6 @@ export type LanguageSettingsAppState = AppSectionState<Language>;
 export type UiSettingsAppState = AppSectionItemState<UiSettings>;
 
 interface SettingsAppState {
-  advancedSettings: boolean;
   autoTaggings: AutoTaggingAppState;
   autoTaggingSpecifications: AutoTaggingSpecificationAppState;
   customFormats: CustomFormatAppState;

frontend/src/Helpers/Hooks/useShowAdvancedSettings.ts

@@ -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;

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 (
     <Link

frontend/src/Settings/CustomFormats/CustomFormats/Specifications/EditSpecificationModalContent.tsx

@@ -14,8 +14,8 @@ import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
-import useShowAdvancedSettings from 'Helpers/Hooks/useShowAdvancedSettings';
 import { inputTypes, kinds } from 'Helpers/Props';
+import { useShowAdvancedSettings } from 'Settings/advancedSettingsStore';
 import {
   saveCustomFormatSpecification,
   setCustomFormatSpecificationFieldValue,

frontend/src/Settings/DownloadClients/DownloadClients/EditDownloadClientModalContent.tsx

@@ -16,9 +16,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, sizes } from 'Helpers/Props';
 import AdvancedSettingsButton from 'Settings/AdvancedSettingsButton';
+import { useShowAdvancedSettings } from 'Settings/advancedSettingsStore';
 import {
   saveDownloadClient,
   setDownloadClientFieldValue,

frontend/src/Settings/DownloadClients/Options/DownloadClientOptions.tsx

@@ -7,8 +7,8 @@ import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import useShowAdvancedSettings from 'Helpers/Hooks/useShowAdvancedSettings';
 import { inputTypes, kinds, sizes } from 'Helpers/Props';
+import { useShowAdvancedSettings } from 'Settings/advancedSettingsStore';
 import { clearPendingChanges } from 'Store/Actions/baseActions';
 import {
   fetchDownloadClientOptions,

frontend/src/Settings/General/BackupSettings.tsx

@@ -3,8 +3,8 @@ import FieldSet from 'Components/FieldSet';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
-import useShowAdvancedSettings from 'Helpers/Hooks/useShowAdvancedSettings';
 import { inputTypes } from 'Helpers/Props';
+import { useShowAdvancedSettings } from 'Settings/advancedSettingsStore';
 import { InputChanged } from 'typings/inputs';
 import { PendingSection } from 'typings/pending';
 import General from 'typings/Settings/General';

frontend/src/Settings/General/HostSettings.tsx

@@ -3,8 +3,8 @@ import FieldSet from 'Components/FieldSet';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
-import useShowAdvancedSettings from 'Helpers/Hooks/useShowAdvancedSettings';
 import { inputTypes, sizes } from 'Helpers/Props';
+import { useShowAdvancedSettings } from 'Settings/advancedSettingsStore';
 import { useIsWindowsService } from 'System/Status/useSystemStatus';
 import { InputChanged } from 'typings/inputs';
 import { PendingSection } from 'typings/pending';

frontend/src/Settings/General/LoggingSettings.tsx

@@ -4,8 +4,8 @@ import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import { EnhancedSelectInputValue } from 'Components/Form/Select/EnhancedSelectInput';
-import useShowAdvancedSettings from 'Helpers/Hooks/useShowAdvancedSettings';
 import { inputTypes } from 'Helpers/Props';
+import { useShowAdvancedSettings } from 'Settings/advancedSettingsStore';
 import { InputChanged } from 'typings/inputs';
 import { PendingSection } from 'typings/pending';
 import General from 'typings/Settings/General';

frontend/src/Settings/General/UpdateSettings.tsx

@@ -4,8 +4,8 @@ import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import { EnhancedSelectInputValue } from 'Components/Form/Select/EnhancedSelectInput';
-import useShowAdvancedSettings from 'Helpers/Hooks/useShowAdvancedSettings';
 import { inputTypes, sizes } from 'Helpers/Props';
+import { useShowAdvancedSettings } from 'Settings/advancedSettingsStore';
 import { useSystemStatusData } from 'System/Status/useSystemStatus';
 import { InputChanged } from 'typings/inputs';
 import { PendingSection } from 'typings/pending';

frontend/src/Settings/ImportLists/ImportLists/EditImportListModalContent.tsx

@@ -20,9 +20,9 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import Popover from 'Components/Tooltip/Popover';
 import usePrevious from 'Helpers/Hooks/usePrevious';
-import useShowAdvancedSettings from 'Helpers/Hooks/useShowAdvancedSettings';
 import { icons, inputTypes, kinds, tooltipPositions } from 'Helpers/Props';
 import AdvancedSettingsButton from 'Settings/AdvancedSettingsButton';
+import { useShowAdvancedSettings } from 'Settings/advancedSettingsStore';
 import {
   saveImportList,
   setImportListFieldValue,

frontend/src/Settings/ImportLists/Options/ImportListOptions.tsx

@@ -8,8 +8,8 @@ import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import { EnhancedSelectInputValue } from 'Components/Form/Select/EnhancedSelectInput';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import useShowAdvancedSettings from 'Helpers/Hooks/useShowAdvancedSettings';
 import { inputTypes, kinds } from 'Helpers/Props';
+import { useShowAdvancedSettings } from 'Settings/advancedSettingsStore';
 import { clearPendingChanges } from 'Store/Actions/baseActions';
 import {
   fetchImportListOptions,

frontend/src/Settings/Indexers/Indexers/EditIndexerModalContent.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 {
   saveIndexer,
   setIndexerFieldValue,

frontend/src/Settings/Indexers/Options/IndexerOptions.tsx

@@ -7,8 +7,8 @@ import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
 import FormLabel from 'Components/Form/FormLabel';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import useShowAdvancedSettings from 'Helpers/Hooks/useShowAdvancedSettings';
 import { inputTypes, kinds } from 'Helpers/Props';
+import { useShowAdvancedSettings } from 'Settings/advancedSettingsStore';
 import { clearPendingChanges } from 'Store/Actions/baseActions';
 import {
   fetchIndexerOptions,

frontend/src/Settings/MediaManagement/MediaManagement.tsx

@@ -11,9 +11,9 @@ import { EnhancedSelectInputValue } from 'Components/Form/Select/EnhancedSelectI
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
-import useShowAdvancedSettings from 'Helpers/Hooks/useShowAdvancedSettings';
 import { inputTypes, kinds, sizes } from 'Helpers/Props';
 import RootFolders from 'RootFolder/RootFolders';
+import { useShowAdvancedSettings } from 'Settings/advancedSettingsStore';
 import SettingsToolbar from 'Settings/SettingsToolbar';
 import { clearPendingChanges } from 'Store/Actions/baseActions';
 import {

frontend/src/Settings/MediaManagement/Naming/Naming.tsx

@@ -13,6 +13,7 @@ import { EnhancedSelectInputValue } from 'Components/Form/Select/EnhancedSelectI
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import useModalOpenState from 'Helpers/Hooks/useModalOpenState';
 import { inputTypes, kinds, sizes } from 'Helpers/Props';
+import { useShowAdvancedSettings } from 'Settings/advancedSettingsStore';
 import { clearPendingChanges } from 'Store/Actions/baseActions';
 import {
   fetchNamingExamples,
@@ -30,12 +31,10 @@ const SECTION = 'naming';
 
 function createNamingSelector() {
   return createSelector(
-    (state: AppState) => 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,

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' }));

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,

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<

frontend/src/Settings/advancedSettingsStore.ts

@@ -0,0 +1,20 @@
+import { createPersist } from 'Helpers/createPersist';
+
+interface AdvancedSettingsState {
+  showAdvancedSettings: boolean;
+}
+
+const advancedSettingsStore = createPersist<AdvancedSettingsState>(
+  'advanced_settings',
+  () => ({ showAdvancedSettings: false })
+);
+
+export const useShowAdvancedSettings = () => {
+  return advancedSettingsStore((state) => state.showAdvancedSettings);
+};
+
+export const toggleShowAdvancedSettings = () => {
+  advancedSettingsStore.setState((state) => ({
+    showAdvancedSettings: !state.showAdvancedSettings,
+  }));
+};

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,