diff options
author | Sebastian <sebasjm@gmail.com> | 2023-01-09 08:38:48 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-01-09 08:38:48 -0300 |
commit | 9b04d8bf3581d162cbd631892ca115df811c46f8 (patch) | |
tree | 42b7da7cc3a3f8186823a7571aa221dc8e9aa7a5 /packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx | |
parent | 14f3d1e06dda003d457f2b3531e197011a284244 (diff) | |
download | wallet-core-9b04d8bf3581d162cbd631892ca115df811c46f8.tar.xz |
fix #7152
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx | 108 |
1 files changed, 108 insertions, 0 deletions
diff --git a/packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx b/packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx new file mode 100644 index 000000000..a56c82dee --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/CurrentAlerts.tsx @@ -0,0 +1,108 @@ +/* + This file is part of GNU Taler + (C) 2022 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +import { ComponentChildren, Fragment, h, VNode } from "preact"; +import { useState } from "preact/hooks"; +import { useTranslationContext } from "../../../web-util/src/index.browser.js"; +import { + ErrorAlert, + Alert as AlertNotification, + useAlertContext, +} from "../context/alert.js"; +import { Alert } from "../mui/Alert.js"; + +/** + * + * @author sebasjm + */ + +function AlertContext({ + context, + cause, +}: { + cause: unknown; + context: undefined | object; +}): VNode { + const [more, setMore] = useState(false); + const { i18n } = useTranslationContext(); + if (!more) { + return ( + <div style={{ display: "flex", justifyContent: "right" }}> + <a onClick={() => setMore(true)}> + <i18n.Translate>more info</i18n.Translate> + </a> + </div> + ); + } + return ( + <pre style={{ overflow: "overlay" }}> + {JSON.stringify( + context === undefined ? { cause } : { context, cause }, + undefined, + 2, + )} + </pre> + ); +} + +export function ErrorAlertView({ + error: alert, + onClose, +}: { + error: ErrorAlert; + onClose?: () => Promise<void>; +}): VNode { + return ( + <Alert title={alert.message} severity={alert.type} onClose={onClose}> + <div style={{ display: "flex", flexDirection: "column" }}> + <div>{alert.description}</div> + <AlertContext context={alert.context} cause={alert.cause} /> + </div> + </Alert> + ); +} + +export function AlertView({ + alert, + onClose, +}: { + alert: AlertNotification; + onClose?: () => Promise<void>; +}): VNode { + return ( + <Alert title={alert.message} severity={alert.type} onClose={onClose}> + <div style={{ display: "flex", flexDirection: "column" }}> + <div>{alert.description}</div> + </div> + </Alert> + ); +} + +export function CurrentAlerts(): VNode { + const { alerts, removeAlert } = useAlertContext(); + if (alerts.length === 0) return <Fragment />; + return ( + <Wrapper> + {alerts.map((n, i) => ( + <AlertView key={i} alert={n} onClose={async () => removeAlert(n)} /> + ))} + </Wrapper> + ); +} + +function Wrapper({ children }: { children: ComponentChildren }): VNode { + return <div style={{ margin: "2em" }}>{children}</div>; +} |