better code: use Btn wrapper component whenever possible
Massimo Melina committed
Mar 2, 2024 at 11:56 UTC
b6706470c0cf46ea047a6c675f12f5dd4fd28f7a
4 files changed
+22
-31
admin/src/AccountsPage.ts
+10
-15
@@ -2,10 +2,10 @@
2
3
import { createElement as h, useState, useEffect, Fragment } from "react"
4
import { apiCall, useApiEx } from './api'
5
-import { Alert, Box, Button, Card, CardContent, Grid, List, ListItem, ListItemText, Typography } from '@mui/material'
5
+import { Alert, Box, Card, CardContent, Grid, List, ListItem, ListItemText, Typography } from '@mui/material'
6
import { Close, Delete, DoNotDisturb, Group, MilitaryTech, Person, PersonAdd, Schedule } from '@mui/icons-material'
7
import { newDialog, with_ } from './misc'
8
-import { Flex, IconBtn, iconTooltip, reloadBtn, useBreakpoint } from './mui'
8
+import { Btn, Flex, IconBtn, iconTooltip, reloadBtn, useBreakpoint } from './mui'
9
import { TreeItem, TreeView } from '@mui/x-tree-view'
10
import MenuButton from './MenuButton'
11
import AccountForm from './AccountForm'
@@ -36,7 +36,7 @@ export default function AccountsPage() {
36
: selectionMode && sel.length > 1 ? h(Fragment, {},
37
h(Flex, {},
38
h(Typography, {variant: 'h6'}, sel.length + " selected"),
39
- h(Button, { onClick: deleteAccounts, startIcon: h(Delete) }, "Remove"),
39
+ h(Btn, { onClick: deleteAccounts, icon: Delete }, "Remove"),
40
),
41
h(List, {},
42
sel.map(username =>
@@ -147,18 +147,13 @@ export default function AccountsPage() {
147
if (!await confirmDialog(`Will delete the rest but not current account (${username})`)) return
148
if (!sel.length) return
149
if (!await confirmDialog(`Delete ${sel.length} item(s)?`)) return
150
- try {
151
- const errors = []
152
- for (const username of sel)
153
- if (!await apiCall('del_account', { username }).then(() => 1, () => 0))
154
- errors.push(username)
155
- reload()
156
- if (errors.length)
157
- return alertDialog("Following elements couldn't be deleted: " + errors.join(', '), 'error')
158
- }
159
- catch(e) {
160
- await alertDialog(e as Error)
161
- }
150
+ const errors = []
151
+ for (const username of sel)
152
+ if (!await apiCall('del_account', { username }).then(() => 1, () => 0))
153
+ errors.push(username)
154
+ reload()
155
+ if (errors.length)
156
+ return alertDialog("Following elements couldn't be deleted: " + errors.join(', '), 'error')
157
}
158
}
159
admin/src/HomePage.ts
+8
-10
@@ -1,7 +1,7 @@
1
// This file is part of HFS - Copyright 2021-2023, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
2
3
import { createElement as h, ReactNode, useState } from 'react'
4
-import { Box, Button, Card, CardContent, LinearProgress, Link } from '@mui/material'
4
+import { Box, Card, CardContent, LinearProgress, Link } from '@mui/material'
5
import { apiCall, useApiEx, useApiList } from './api'
6
import { dontBotherWithKeys, objSameKeys, onlyTruthy, prefix, REPO_URL,
7
wait, with_ } from './misc'
@@ -71,19 +71,17 @@ export default function HomePage() {
71
plugins.find(x => x.badApi) && entry('warning', "Some plugins may be incompatible"),
72
!account?.adminActualAccess && entry('', md("On <u>localhost</u> you don't need to login"),
73
SOLUTION_SEP, "to access Admin-panel from another computer ", h(InLink, { to:'accounts' }, md("create an account with *admin* permission")) ),
74
- proxyWarning(cfg, status) && entry('warning', proxyWarning(cfg, status),
74
+ with_(proxyWarning(cfg, status), x => x && entry('warning', x,
75
SOLUTION_SEP, cfgLink("set the number of proxies"),
76
- SOLUTION_SEP, "unless you are sure and you can ", h(Button, {
76
+ SOLUTION_SEP, "unless you are sure and you can ", h(Btn, {
77
+ variant: 'outlined',
78
size: 'small',
79
sx: { lineHeight: 'unset' }, // fit in the line, avoiding bad layout
79
- async onClick() {
80
- if (await confirmDialog("Go on only if you know what you are doing")
81
- && await apiCall('set_config', { values: { ignore_proxies: true } }))
82
- cfg.reload()
83
- }
80
+ confirm: "Go on only if you know what you are doing",
81
+ onClick: () => apiCall('set_config', { values: { ignore_proxies: true } }).then(cfg.reload)
82
}, "ignore this warning"),
83
SOLUTION_SEP, wikiLink('Proxy-warning', "Explanation")
86
- ),
84
+ )),
85
(cfg.data?.proxies > 0 || status?.proxyDetected) && entry('', wikiLink('Reverse-proxy', "Read our guide on proxies")),
86
status.frpDetected && entry('warning', `FRP is detected. It should not be used with "type = tcp" with HFS. Possible solutions are`,
87
h('ol',{},
@@ -184,5 +182,5 @@ function cfgLink(text=`Options page`) {
182
183
export function proxyWarning(cfg: any, status: any) {
184
return cfg.data && !cfg.data.proxies && status?.proxyDetected
187
- && "A proxy was detected but none is configured"
185
+ ? "A proxy was detected but none is configured" : ''
186
}
admin/src/LangPage.ts
+3
-3
@@ -3,10 +3,10 @@
3
import { createElement as h, Fragment, useEffect, useMemo, useState } from 'react';
4
import { apiCall, useApiEx, useApiList } from './api'
5
import { DataTable } from './DataTable';
6
-import { Alert, Box, Button } from '@mui/material'
6
+import { Alert, Box } from '@mui/material'
7
import { Delete, Upload } from '@mui/icons-material'
8
import { readFile, selectFiles } from './misc'
9
-import { IconBtn, useBreakpoint } from './mui'
9
+import { Btn, IconBtn, useBreakpoint } from './mui'
10
import _ from 'lodash'
11
import { alertDialog, toast } from './dialog'
12
import { Field, SelectField } from '@hfs/mui-grid-form';
@@ -19,7 +19,7 @@ export default function LangPage() {
19
large && h(Alert, { severity: 'info' }, "Translation is limited to Front-end, it doesn't apply to Admin-panel"),
20
h(Box, { mt: 1, maxWidth: '40em', flex: 1, display: 'flex', flexDirection: 'column' },
21
h(Box, { mb: 1, display: 'flex' },
22
- h(Button, { variant: 'contained', startIcon: h(Upload), onClick: add }, "Add"),
22
+ h(Btn, { icon: Upload, onClick: add }, "Add"),
23
h(Box, { flex: 1 }),
24
h(ForceLang, { langs }),
25
),
admin/src/LogoutPage.ts
+1
-3
@@ -21,15 +21,13 @@ export default function LogoutPage() {
21
h(Btn, {
22
icon: Logout,
23
size: 'large',
24
- variant: 'contained',
25
- onClick: () => apiCall('logout').catch(err => // we expect 401
24
+ onClick: () => apiCall('logout').catch(err => // we expect 401
25
err.code !== HTTP_UNAUTHORIZED && alertDialog(err))
26
}, "I want to logout")
27
),
28
h(Btn, {
29
icon: PowerSettingsNew,
30
size: 'large',
32
- variant: 'contained',
31
color: 'warning',
32
confirm: "Stopping the server, this interface won't respond anymore",
33
async onClick() {