fix: admin/fs: on mobile, accounts were reloaded at each file selection
Massimo Melina committed
Mar 29, 2024 at 15:29 UTC
6d6c053a4f86ccab58730247821b38f6b8aacbee
2 files changed
+7
-9
admin/src/FileForm.ts
+3
-7
@@ -20,17 +20,18 @@ import QrCreator from 'qr-creator';
20
import MenuButton from './MenuButton'
21
import addFiles, { addLink, addVirtual } from './addFiles'
22
23
-interface Account { username: string }
23
+export interface Account { username: string }
24
25
interface FileFormProps {
26
file: VfsNode
27
addToBar?: ReactNode
28
statusApi: UseApi
29
+ accounts: Account[]
30
}
31
32
const ACCEPT_LINK = "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept"
33
33
-export default function FileForm({ file, addToBar, statusApi }: FileFormProps) {
34
+export default function FileForm({ file, addToBar, statusApi, accounts }: FileFormProps) {
35
const { parent, children, isRoot, byMasks, ...rest } = file
36
const [values, setValues] = useState(rest)
37
useEffect(() => {
@@ -59,11 +60,6 @@ export default function FileForm({ file, addToBar, statusApi }: FileFormProps) {
60
const barColors = useDialogBarColors()
61
const { movingFile } = useSnapState()
62
62
- const { data, element } = useApiEx<{ list: Account[] }>('get_accounts')
63
- if (element || !data)
64
- return element
65
- const accounts = data.list
66
-
63
const needSourceWarning = !hasSource && "Works only on folders with source! "
64
const show: Record<keyof VfsPerms, boolean> = {
65
can_read: !isLink,
admin/src/VfsPage.ts
+4
-2
@@ -11,7 +11,7 @@ import { Flex, useBreakpoint } from './mui'
11
import { reactJoin } from '@hfs/shared'
12
import _ from 'lodash'
13
import { AlertProps } from '@mui/material/Alert/Alert'
14
-import FileForm from './FileForm'
14
+import FileForm, { Account } from './FileForm'
15
import { Delete } from '@mui/icons-material'
16
import { alertDialog, confirmDialog } from './dialog'
17
@@ -32,10 +32,12 @@ export default function VfsPage() {
32
return b && !ret.includes(b) ? [b, ...ret] : ret
33
}, [status])
34
const single = selectedFiles.length < 2 && (selectedFiles[0] as VfsNode || vfs)
35
+ const accountsApi = useApiEx<{ list: Account[] }>('get_accounts') // load accounts once and for all, or !isSideBreakpoint will cause a call for each selection
36
36
- const sideContent = !vfs ? null : single ? h(FileForm, {
37
+ const sideContent = accountsApi.element || !vfs ? null : single ? h(FileForm, {
38
addToBar: isSideBreakpoint && h(Box, { flex: 1, textAlign: 'right', mr: 1, color: '#8883' }, vfsNodeIcon(single)),
39
statusApi,
40
+ accounts: accountsApi?.data?.list ?? [],
41
file: single // it's actually Snapshot<VfsNode> but it's easier this way
42
})
43
: h(Fragment, {},