1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
import {
faExclamationTriangle,
faPaperPlane,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { capitalize } from "lodash";
import React, {
FunctionComponent,
useCallback,
useEffect,
useMemo,
} from "react";
import { ProgressBar, Toast } from "react-bootstrap";
import {
siteRemoveNotifications,
siteRemoveProgress,
} from "../../@redux/actions";
import { useReduxAction, useReduxStore } from "../../@redux/hooks/base";
import "./style.scss";
export interface NotificationContainerProps {}
const NotificationContainer: FunctionComponent<NotificationContainerProps> = () => {
const { progress, notifications } = useReduxStore((s) => s.site);
const items = useMemo(() => {
const progressItems = progress.map((v) => (
<ProgressToast key={v.id} {...v}></ProgressToast>
));
const notificationItems = notifications.map((v) => (
<NotificationToast key={v.id} {...v}></NotificationToast>
));
return [...progressItems, ...notificationItems];
}, [notifications, progress]);
return (
<div className="alert-container">
<div className="toast-container">{items}</div>
</div>
);
};
type MessageHolderProps = ReduxStore.Notification & {};
const NotificationToast: FunctionComponent<MessageHolderProps> = (props) => {
const { message, type, id, timeout } = props;
const removeNotification = useReduxAction(siteRemoveNotifications);
const remove = useCallback(() => removeNotification(id), [
removeNotification,
id,
]);
useEffect(() => {
const handle = setTimeout(remove, timeout);
return () => {
clearTimeout(handle);
};
}, [props, remove, timeout]);
return (
<Toast onClose={remove} animation={false}>
<Toast.Header>
<FontAwesomeIcon
className="mr-1"
icon={faExclamationTriangle}
></FontAwesomeIcon>
<strong className="mr-auto">{capitalize(type)}</strong>
</Toast.Header>
<Toast.Body>{message}</Toast.Body>
</Toast>
);
};
type ProgressHolderProps = ReduxStore.Progress & {};
const ProgressToast: FunctionComponent<ProgressHolderProps> = ({
id,
header,
name,
value,
count,
}) => {
const removeProgress = useReduxAction(siteRemoveProgress);
const remove = useCallback(() => removeProgress(id), [removeProgress, id]);
useEffect(() => {
const handle = setTimeout(remove, 10 * 1000);
return () => {
clearTimeout(handle);
};
}, [value, remove]);
const incomplete = value / count < 1;
return (
<Toast onClose={remove}>
<Toast.Header closeButton={!incomplete}>
<FontAwesomeIcon className="mr-2" icon={faPaperPlane}></FontAwesomeIcon>
<span className="mr-auto">{header}</span>
</Toast.Header>
<Toast.Body>
<span>{name}</span>
<ProgressBar
className="my-1"
animated={incomplete}
now={value / count}
max={1}
label={`${value}/${count}`}
></ProgressBar>
</Toast.Body>
</Toast>
);
};
export default NotificationContainer;
|
