diff options
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>; +} |