rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: fix vault selection menu not auto-updating on vault changes

Browse Source
This commit is contained in:
Aman Harwara
2023-09-13 16:15:45 +05:30
parent a07fa23c70
commit 5517c96822
2 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/web/src/javascripts/Components/VaultSelectionMenu/ManyVaultSelectionMenu.tsx
View File

@@ -1,14 +1,20 @@
import { FunctionComponent, useCallback } from 'react'
import { FunctionComponent, useCallback, useEffect, useState } from 'react'
import Menu from '../Menu/Menu'
import { useApplication } from '../ApplicationProvider'
import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
import Icon from '../Icon/Icon'
import { VaultListingInterface } from '@standardnotes/snjs'
import { ContentType, VaultListingInterface } from '@standardnotes/snjs'
import { observer } from 'mobx-react-lite'
const ManyVaultSelectionMenu: FunctionComponent = () => {
const application = useApplication()
const vaults = application.vaults.getVaults()
const [vaults, setVaults] = useState(() => application.vaults.getVaults())
useEffect(() => {
return application.items.streamItems(ContentType.TYPES.VaultListing, () => {
setVaults(application.vaults.getVaults())
})
}, [application.items, application.vaults])
const isVaultVisible = useCallback(
(vault: VaultListingInterface) => {
@@ -30,7 +36,7 @@ const ManyVaultSelectionMenu: FunctionComponent = () => {
return (
<Menu a11yLabel="Vault selection menu" isOpen>
{!vaults.length && <div className="text-center py-1">No vaults found</div>}
{!vaults.length && <div className="py-1 text-center">No vaults found</div>}
{vaults.map((vault) => (
<MenuSwitchButtonItem
onChange={() => {

14
packages/web/src/javascripts/Components/VaultSelectionMenu/SingleVaultSelectionMenu.tsx
View File

@@ -1,14 +1,20 @@
import { FunctionComponent, useCallback } from 'react'
import { FunctionComponent, useCallback, useEffect, useState } from 'react'
import Menu from '../Menu/Menu'
import { useApplication } from '../ApplicationProvider'
import { VaultListingInterface } from '@standardnotes/snjs'
import { ContentType, VaultListingInterface } from '@standardnotes/snjs'
import MenuRadioButtonItem from '../Menu/MenuRadioButtonItem'
import { observer } from 'mobx-react-lite'
import Icon from '../Icon/Icon'
const SingleVaultSelectionMenu: FunctionComponent = () => {
const application = useApplication()
const vaults = application.vaults.getVaults()
const [vaults, setVaults] = useState(() => application.vaults.getVaults())
useEffect(() => {
return application.items.streamItems(ContentType.TYPES.VaultListing, () => {
setVaults(application.vaults.getVaults())
})
}, [application.items, application.vaults])
const isVaultVisible = useCallback(
(vault: VaultListingInterface) => {
@@ -26,7 +32,7 @@ const SingleVaultSelectionMenu: FunctionComponent = () => {
return (
<Menu a11yLabel="Vault selection menu" isOpen>
{!vaults.length && <div className="text-center py-1">No vaults found</div>}
{!vaults.length && <div className="py-1 text-center">No vaults found</div>}
{vaults.map((vault) => (
<MenuRadioButtonItem key={vault.uuid} checked={isVaultVisible(vault)} onClick={() => selectVault(vault)}>
<div className="flex w-full items-center gap-1">