better code
Massimo Melina committed
Mar 3, 2023 at 18:41 UTC
b4351b88a496f67f1dcc0b56fde9c171a4d8988e
3 files changed
+16
-16
frontend/src/BrowseFiles.ts
+8
-10
@@ -12,7 +12,7 @@ import {
12
useState
13
} from 'react'
14
import { domOn, formatBytes, hError, hIcon, isMobile } from './misc'
15
-import { Checkbox, Html, Spinner, useCustomCode } from './components'
15
+import { Checkbox, CustomCode, Html, Spinner } from './components'
16
import { Head } from './Head'
17
import { state, useSnapState } from './state'
18
import { alertDialog } from './dialog'
@@ -32,16 +32,14 @@ export type DirList = DirEntry[]
32
33
export function BrowseFiles() {
34
useFetchList()
35
- const { error, list, serverConfig } = useSnapState()
36
- const afterHeader = useCustomCode('afterHeader')
37
- const beforeHeader = useCustomCode('beforeHeader')
35
+ const { error, list } = useSnapState()
36
return useAuthorized() && h(Fragment, {},
39
- h(Html, { code: serverConfig?.custom_header }),
40
- beforeHeader,
37
+ h(CustomCode, { name: 'beforeHeader' }),
38
h(Head),
42
- afterHeader,
39
+ h(CustomCode, { name: 'afterHeader' }),
40
hError(error)
44
- || h(list ? FilesList : Spinner))
41
+ || h(list ? FilesList : Spinner),
42
+ )
43
}
44
45
function FilesList() {
@@ -205,7 +203,7 @@ const Entry = memo((entry: DirEntry & { midnight: Date, separator?: string }) =>
203
containerDir && h(Link, { to: base+fixUrl(containerDir), className:'container-folder' }, hIcon('file'), containerDir ),
204
h('a', { href }, !containerDir && hIcon('file'), name)
205
),
208
- useCustomCode('afterEntryName', { entry }),
206
+ h(CustomCode, { name: 'afterEntryName', props: { entry } }),
207
h(EntryProps, entry),
208
h('div'),
209
)
@@ -223,7 +221,7 @@ const EntryProps = memo((entry: DirEntry & { midnight: Date }) => {
221
const {t} = useI18N()
222
const dd = '2-digit'
223
return h('div', { className: 'entry-props' },
226
- useCustomCode('additionalEntryProps', { entry }),
224
+ h(CustomCode, { name: 'additionalEntryProps', props: { entry } }),
225
h(EntrySize, { s }),
226
time && h('span', {
227
className: 'entry-ts',
frontend/src/Head.ts
+2
-2
@@ -2,7 +2,7 @@
2
3
import { createElement as h, Fragment, useMemo } from 'react'
4
import { formatBytes, hIcon } from './misc'
5
-import { Spinner, useCustomCode } from './components'
5
+import { CustomCode, Spinner } from './components'
6
import { useSnapState } from './state'
7
import { MenuPanel } from './menu'
8
import { Breadcrumbs } from './Breadcrumbs'
@@ -12,7 +12,7 @@ import { useI18N } from './i18n'
12
export function Head() {
13
return h('header', {},
14
h(MenuPanel),
15
- useCustomCode('afterMenuBar'),
15
+ h(CustomCode, { name: 'afterMenuBar' }),
16
h(Breadcrumbs),
17
h(FolderStats),
18
h(FilterBar),
frontend/src/components.ts
+6
-4
@@ -53,15 +53,17 @@ export function Html({ code, ...rest }:{ code:string } & HTMLAttributes<any>) {
53
return h('span', { ...rest, dangerouslySetInnerHTML: o })
54
}
55
56
-export function useCustomCode(name: string, props={}) {
56
+export function CustomCode({ name, props }: any) {
57
const code = useMemo(() => {
58
const ret = hfsEvent(name, props)
59
.filter(x => x === 0 || x)
60
.map((x, key) => isValidElement(x) ? h(Fragment, { key }, x)
61
: typeof x === 'string' ? h(Html, { key, code: x })
62
: h('div', { key }, x))
63
- ret.push((window as any).HFS.customHtml[name] || null)
63
+ const html = (window as any).HFS.customHtml[name]
64
+ if (html && html.trim())
65
+ ret.push(h(Html, { key: 'x', code: html }))
66
return ret
65
- }, Object.values(props))
67
+ }, props ? Object.values(props) : [])
68
return h(Fragment, { children: code })
67
-}
69
+}
\ No newline at end of file