From a348b24ae2360aaa9f95fab677025c0fc293b39a Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Fri, 11 Aug 2023 00:19:32 +0530 Subject: [PATCH] refactor: use local state for vault selection menu --- .../Dependencies/WebDependencies.ts | 5 -- .../javascripts/Application/WebApplication.ts | 5 -- .../javascripts/Components/Footer/Footer.tsx | 13 +----- .../Footer/VaultSelectionButton.tsx | 19 +++----- .../VaultSelectionMenu/VaultSelectionMenu.tsx | 9 +--- .../VaultSelectionMenuController.ts | 46 ------------------- 6 files changed, 10 insertions(+), 87 deletions(-) delete mode 100644 packages/web/src/javascripts/Controllers/VaultSelectionMenuController.ts diff --git a/packages/web/src/javascripts/Application/Dependencies/WebDependencies.ts b/packages/web/src/javascripts/Application/Dependencies/WebDependencies.ts index 4a64c22ef..f77e7fd66 100644 --- a/packages/web/src/javascripts/Application/Dependencies/WebDependencies.ts +++ b/packages/web/src/javascripts/Application/Dependencies/WebDependencies.ts @@ -23,7 +23,6 @@ import { MomentsService } from '@/Controllers/Moments/MomentsService' import { PersistenceService } from '@/Controllers/Abstract/PersistenceService' import { FilePreviewModalController } from '@/Controllers/FilePreviewModalController' import { QuickSettingsController } from '@/Controllers/QuickSettingsController' -import { VaultSelectionMenuController } from '@/Controllers/VaultSelectionMenuController' import { PaneController } from '@/Controllers/PaneController/PaneController' import { PreferencesController } from '@/Controllers/PreferencesController' import { FeaturesController } from '@/Controllers/FeaturesController' @@ -177,10 +176,6 @@ export class WebDependencies extends DependencyContainer { return new QuickSettingsController(application.events) }) - this.bind(Web_TYPES.VaultSelectionMenuController, () => { - return new VaultSelectionMenuController(application.events) - }) - this.bind(Web_TYPES.PaneController, () => { return new PaneController( application.preferences, diff --git a/packages/web/src/javascripts/Application/WebApplication.ts b/packages/web/src/javascripts/Application/WebApplication.ts index b910c1bcc..56d1eb159 100644 --- a/packages/web/src/javascripts/Application/WebApplication.ts +++ b/packages/web/src/javascripts/Application/WebApplication.ts @@ -72,7 +72,6 @@ import { NavigationController } from '@/Controllers/Navigation/NavigationControl import { FilePreviewModalController } from '@/Controllers/FilePreviewModalController' import { OpenSubscriptionDashboard } from './UseCase/OpenSubscriptionDashboard' import { QuickSettingsController } from '@/Controllers/QuickSettingsController' -import { VaultSelectionMenuController } from '@/Controllers/VaultSelectionMenuController' import { ItemGroupController } from '@/Components/NoteView/Controller/ItemGroupController' import { NoAccountWarningController } from '@/Controllers/NoAccountWarningController' import { SearchOptionsController } from '@/Controllers/SearchOptionsController' @@ -638,10 +637,6 @@ export class WebApplication extends SNApplication implements WebApplicationInter return this.deps.get(Web_TYPES.SearchOptionsController) } - get vaultSelectionController(): VaultSelectionMenuController { - return this.deps.get(Web_TYPES.VaultSelectionMenuController) - } - get openSubscriptionDashboard(): OpenSubscriptionDashboard { return this.deps.get(Web_TYPES.OpenSubscriptionDashboard) } diff --git a/packages/web/src/javascripts/Components/Footer/Footer.tsx b/packages/web/src/javascripts/Components/Footer/Footer.tsx index 7c8e07814..f6c3107c8 100644 --- a/packages/web/src/javascripts/Components/Footer/Footer.tsx +++ b/packages/web/src/javascripts/Components/Footer/Footer.tsx @@ -38,7 +38,6 @@ type State = { newUpdateAvailable: boolean showAccountMenu: boolean showQuickSettingsMenu: boolean - showVaultSelectionMenu: boolean offline: boolean hasError: boolean arbitraryStatusMessage?: string @@ -66,7 +65,6 @@ class Footer extends AbstractComponent { newUpdateAvailable: false, showAccountMenu: false, showQuickSettingsMenu: false, - showVaultSelectionMenu: false, } this.webEventListenerDestroyer = props.application.addWebEventObserver((event, data) => { @@ -128,7 +126,6 @@ class Footer extends AbstractComponent { this.setState({ showAccountMenu: this.application.accountMenuController.show, showQuickSettingsMenu: this.application.quickSettingsMenuController.open, - showVaultSelectionMenu: this.application.vaultSelectionController.open, }) }) } @@ -300,10 +297,6 @@ class Footer extends AbstractComponent { this.application.quickSettingsMenuController.toggle() } - vaultSelectionClickHandler = () => { - this.application.vaultSelectionController.toggle() - } - syncResolutionClickHandler = () => { this.setState({ showSyncResolution: !this.state.showSyncResolution, @@ -388,11 +381,7 @@ class Footer extends AbstractComponent {
- +
void - controller: VaultSelectionMenuController -} - -const VaultSelectionButton = ({ isOpen, toggleMenu, controller }: Props) => { +const VaultSelectionButton = () => { const application = useApplication() const buttonRef = useRef(null) const exclusivelyShownVault = application.vaultDisplayService.exclusivelyShownVault + const [isOpen, setIsOpen] = useState(false) + const toggleMenu = () => setIsOpen(!isOpen) + if (!featureTrunkVaultsEnabled()) { return null } @@ -53,10 +48,10 @@ const VaultSelectionButton = ({ isOpen, toggleMenu, controller }: Props) => { align="start" className="py-2" > - + ) } -export default observer(VaultSelectionButton) +export default VaultSelectionButton diff --git a/packages/web/src/javascripts/Components/VaultSelectionMenu/VaultSelectionMenu.tsx b/packages/web/src/javascripts/Components/VaultSelectionMenu/VaultSelectionMenu.tsx index 462795055..f981bc2c4 100644 --- a/packages/web/src/javascripts/Components/VaultSelectionMenu/VaultSelectionMenu.tsx +++ b/packages/web/src/javascripts/Components/VaultSelectionMenu/VaultSelectionMenu.tsx @@ -1,7 +1,6 @@ import { observer } from 'mobx-react-lite' -import { FunctionComponent, useState } from 'react' +import { useState } from 'react' import Menu from '../Menu/Menu' -import { VaultSelectionMenuController } from '@/Controllers/VaultSelectionMenuController' import RadioButtonGroup from '@/Components/RadioButtonGroup/RadioButtonGroup' import ManyVaultSelectionMenu from './ManyVaultSelectionMenu' import SingleVaultSelectionMenu from './SingleVaultSelectionMenu' @@ -9,13 +8,9 @@ import { useApplication } from '../ApplicationProvider' import MenuItemSeparator from '../Menu/MenuItemSeparator' import MenuItem from '../Menu/MenuItem' -type MenuProps = { - controller: VaultSelectionMenuController -} - type SettingsMode = 'many' | 'single' -const VaultSelectionMenu: FunctionComponent = () => { +const VaultSelectionMenu = () => { const application = useApplication() const [mode, setMode] = useState( diff --git a/packages/web/src/javascripts/Controllers/VaultSelectionMenuController.ts b/packages/web/src/javascripts/Controllers/VaultSelectionMenuController.ts deleted file mode 100644 index d18592e5b..000000000 --- a/packages/web/src/javascripts/Controllers/VaultSelectionMenuController.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { InternalEventBusInterface } from '@standardnotes/snjs' -import { action, makeObservable, observable } from 'mobx' -import { AbstractViewController } from './Abstract/AbstractViewController' - -export class VaultSelectionMenuController extends AbstractViewController { - open = false - shouldAnimateCloseMenu = false - - constructor(eventBus: InternalEventBusInterface) { - super(eventBus) - - makeObservable(this, { - open: observable, - shouldAnimateCloseMenu: observable, - - setOpen: action, - setShouldAnimateCloseMenu: action, - toggle: action, - closeVaultSelectionMenu: action, - }) - } - - setOpen = (open: boolean): void => { - this.open = open - } - - setShouldAnimateCloseMenu = (shouldAnimate: boolean): void => { - this.shouldAnimateCloseMenu = shouldAnimate - } - - toggle = (): void => { - if (this.open) { - this.closeVaultSelectionMenu() - } else { - this.setOpen(true) - } - } - - closeVaultSelectionMenu = (): void => { - this.setShouldAnimateCloseMenu(true) - setTimeout(() => { - this.setOpen(false) - this.setShouldAnimateCloseMenu(false) - }, 150) - } -}