diff options
| author | crupest <crupest@outlook.com> | 2020-05-30 23:41:31 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-05-30 23:41:31 +0800 |
| commit | 85360e8e755b4ce7fd1bd8531d78c06a3b9ffbdf (patch) | |
| tree | 710a731990f9dc9a9475baebc5867298e6df33c4 /Timeline/ClientApp/src/common/AlertHost.tsx | |
| parent | fc0521d81aa2293b94ea40b79ec0df80966c0278 (diff) | |
| parent | 05c104022f71c3b19949205d5d23f07b4cd9a598 (diff) | |
| download | timeline-85360e8e755b4ce7fd1bd8531d78c06a3b9ffbdf.tar.gz timeline-85360e8e755b4ce7fd1bd8531d78c06a3b9ffbdf.tar.bz2 timeline-85360e8e755b4ce7fd1bd8531d78c06a3b9ffbdf.zip | |
Merge pull request #72 from crupest/merge-frontend
Merge frontend repo into this repo.
Diffstat (limited to 'Timeline/ClientApp/src/common/AlertHost.tsx')
| -rw-r--r-- | Timeline/ClientApp/src/common/AlertHost.tsx | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/Timeline/ClientApp/src/common/AlertHost.tsx b/Timeline/ClientApp/src/common/AlertHost.tsx new file mode 100644 index 00000000..2d9dbb13 --- /dev/null +++ b/Timeline/ClientApp/src/common/AlertHost.tsx @@ -0,0 +1,75 @@ +import React, { useCallback } from 'react';
+import { Alert } from 'reactstrap';
+import without from 'lodash/without';
+import concat from 'lodash/concat';
+
+import {
+ alertService,
+ AlertInfoEx,
+ kAlertHostId,
+ AlertInfo,
+} from './alert-service';
+
+interface AutoCloseAlertProps {
+ alert: AlertInfo;
+ close: () => void;
+}
+
+export const AutoCloseAlert: React.FC<AutoCloseAlertProps> = (props) => {
+ const { alert } = props;
+
+ React.useEffect(() => {
+ const tag = window.setTimeout(props.close, 5000);
+ return () => window.clearTimeout(tag);
+ }, [props.close]);
+
+ return (
+ <Alert className="m-3" color={alert.type ?? 'primary'} toggle={props.close}>
+ {alert.message}
+ </Alert>
+ );
+};
+
+// oh what a bad name!
+interface AlertInfoExEx extends AlertInfoEx {
+ close: () => void;
+}
+
+export const AlertHost: React.FC = () => {
+ const [alerts, setAlerts] = React.useState<AlertInfoExEx[]>([]);
+
+ // react guarantee that state setters are stable, so we don't need to add it to dependency list
+
+ const consume = useCallback((alert: AlertInfoEx): void => {
+ const alertEx: AlertInfoExEx = {
+ ...alert,
+ close: () => {
+ setAlerts((oldAlerts) => {
+ return without(oldAlerts, alertEx);
+ });
+ },
+ };
+ setAlerts((oldAlerts) => {
+ return concat(oldAlerts, alertEx);
+ });
+ }, []);
+
+ React.useEffect(() => {
+ alertService.registerConsumer(consume);
+ return () => {
+ alertService.unregisterConsumer(consume);
+ };
+ }, [consume]);
+
+ return (
+ <div id={kAlertHostId} className="alert-container">
+ {alerts.map((alert) => {
+ return (
+ <AutoCloseAlert key={alert.id} alert={alert} close={alert.close} />
+ );
+ })}
+ </div>
+ );
+};
+
+export default AlertHost;
|