konnosDashboard
SendMessageModal.tsx78 lines · main
1import { useEffect, useState } from 'react'
2import { Input, Modal } from 'ui'
3import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
4
5import CodeEditor from '@/components/ui/CodeEditor/CodeEditor'
6import { tryParseJson } from '@/lib/helpers'
7
8interface SendMessageModalProps {
9 visible: boolean
10 onSelectCancel: () => void
11 onSelectConfirm: (v: { message: string; payload: string }) => void
12}
13
14const defaultPayload = {
15 message: 'Test message',
16 payload: '{ "message": "Hello World" }',
17}
18
19export const SendMessageModal = ({
20 visible,
21 onSelectCancel,
22 onSelectConfirm,
23}: SendMessageModalProps) => {
24 const [error, setError] = useState<string>()
25 const [values, setValues] = useState(defaultPayload)
26
27 useEffect(() => {
28 if (visible) {
29 setError(undefined)
30 setValues(defaultPayload)
31 }
32 }, [visible])
33
34 return (
35 <Modal
36 size="medium"
37 alignFooter="right"
38 header="Broadcast a message to all clients"
39 visible={visible}
40 loading={false}
41 onCancel={onSelectCancel}
42 onConfirm={() => {
43 const payload = tryParseJson(values.payload)
44 if (payload === undefined) {
45 setError('Please provide a valid JSON')
46 } else {
47 onSelectConfirm({ ...values, payload })
48 }
49 }}
50 >
51 <Modal.Content className="flex flex-col gap-y-4">
52 <FormItemLayout label="Message name" layout="vertical" isReactForm={false}>
53 <Input
54 size="small"
55 value={values.message}
56 onChange={(v) => setValues({ ...values, message: v.target.value })}
57 />
58 </FormItemLayout>
59
60 <div className="flex flex-col gap-y-2">
61 <FormItemLayout label="Message payload" layout="vertical" isReactForm={false}>
62 <CodeEditor
63 id="message-payload"
64 language="json"
65 className="mb-0! h-32 overflow-hidden rounded-sm border"
66 onInputChange={(e: string | undefined) =>
67 setValues({ ...values, payload: e ?? '{}' })
68 }
69 options={{ wordWrap: 'off', contextmenu: false }}
70 value={values.payload}
71 />
72 {error !== undefined && <p className="text-sm text-red-900">{error}</p>}
73 </FormItemLayout>
74 </div>
75 </Modal.Content>
76 </Modal>
77 )
78}