-
-
Notifications
You must be signed in to change notification settings - Fork 303
/
HandlingDuplicatedMessages.tsx
116 lines (108 loc) · 3.03 KB
/
HandlingDuplicatedMessages.tsx
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
import React, { ReactElement } from "react";
import {
DuplicateBehavior,
MessageQueue,
ToastMessage,
useAddMessage,
} from "@react-md/alert";
import { Button } from "@react-md/button";
import { Divider } from "@react-md/divider";
import { Fieldset, Form, NativeSelect, Radio, useChoice } from "@react-md/form";
import { ArrowDropDownSVGIcon } from "@react-md/material-icons";
import Code from "components/Code";
interface Props {
duplicates: DuplicateBehavior;
onDuplicateChange: React.ChangeEventHandler<HTMLInputElement>;
}
const ONLINE = "ONLINE";
const OFFLINE = "OFFLINE";
const SOMETHING_HAPPENED = "SOMETHING_HAPPENED";
type MessageKeys = typeof ONLINE | typeof OFFLINE | typeof SOMETHING_HAPPENED;
const MESSAGES: Record<MessageKeys, ToastMessage> = {
[ONLINE]: {
messageId: ONLINE,
children: "Internet connection restored.",
},
[OFFLINE]: {
messageId: OFFLINE,
children: "Internet connection lost.",
},
[SOMETHING_HAPPENED]: {
messageId: SOMETHING_HAPPENED,
children: "Something happened...",
},
};
function HandlingDuplicatedMessages({
duplicates,
onDuplicateChange,
}: Props): ReactElement {
const addMessage = useAddMessage();
const [key, handleKeyChange] = useChoice<MessageKeys>(ONLINE);
return (
<Form onSubmit={() => addMessage(MESSAGES[key])}>
<Fieldset
legend={
<>
<Code>MessageQueue</Code>
{" duplicate behavior"}
</>
}
>
<Radio
id="mq-duplicates-1"
name="duplicates"
value="allow"
label="Allow"
checked={duplicates === "allow"}
onChange={onDuplicateChange}
/>
<Radio
id="mq-duplicates-2"
name="duplicates"
value="prevent"
label="Prevent"
checked={duplicates === "prevent"}
onChange={onDuplicateChange}
/>
<Radio
id="mq-duplicates-3"
name="duplicates"
value="restart"
label="Restart"
checked={duplicates === "restart"}
onChange={onDuplicateChange}
/>
</Fieldset>
<NativeSelect
id="mq-duplicates-message"
icon={<ArrowDropDownSVGIcon />}
label="Message"
inline
style={{ margin: "1rem 0" }}
value={key}
onChange={handleKeyChange}
>
{Object.keys(MESSAGES).map((key) => (
<option key={key} value={key}>
{MESSAGES[key as MessageKeys].children}
</option>
))}
</NativeSelect>
<Divider />
<Button id="mq-duplicates-submit" type="submit" theme="primary">
Add Message
</Button>
</Form>
);
}
export default function DuplicatedMessages(): ReactElement {
const [duplicates, onDuplicateChange] = useChoice<DuplicateBehavior>("allow");
return (
<MessageQueue id="duplicate-message-queue" duplicates={duplicates}>
<HandlingDuplicatedMessages
duplicates={duplicates}
onDuplicateChange={onDuplicateChange}
/>
</MessageQueue>
);
}