SendMessageModal() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Integrations/Queues/SingleQueue/SendMessageModal.tsx lines 39–139

export const SendMessageModal = ({ visible, onClose }: SendMessageModalProps) => {
  const { childId: queueName } = useParams()
  const { data: project } = useSelectedProjectQuery()
  const form = useForm<SendMessageForm>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      delay: 1,
      payload: '{}',
    },
  })

  const { isPending, mutate } = useDatabaseQueueMessageSendMutation({
    onSuccess: () => {
      toast.success(`Successfully added a message to the queue.`)
      onClose()
    },
  })

  const onSubmit: SubmitHandler<SendMessageForm> = (values) => {
    mutate({
      projectRef: project?.ref!,
      connectionString: project?.connectionString,
      queueName: queueName!,
      payload: values.payload,
      delay: values.delay,
    })
  }

  useEffect(() => {
    if (visible) {
      form.reset({ delay: 1, payload: '{}' })
    }
  }, [visible])

  return (
    <Modal
      size="medium"
      alignFooter="right"
      header="Add a message to the queue"
      visible={visible}
      loading={isPending}
      onCancel={onClose}
      confirmText="Add"
      onConfirm={() => {
        const values = form.getValues()
        onSubmit(values)
      }}
    >
      <Modal.Content className="flex flex-col gap-y-4">
        <Form_Shadcn_ {...form}>
          <form
            id={FORM_ID}
            className="flex-grow overflow-auto gap-2 flex flex-col"
            onSubmit={form.handleSubmit(onSubmit)}
          >
            <FormField_Shadcn_
              control={form.control}
              name="delay"
              render={({ field: { ref, ...rest } }) => (
                <FormItemLayout
                  label="Delay"
                  layout="vertical"
                  className="gap-1"
                  description="Time in seconds before the message becomes available for reading."
                >
                  <FormControl_Shadcn_>
                    <Input
                      {...rest}
                      type="number"
                      placeholder="1"
                      actions={<p className="text-foreground-light pr-2">sec</p>}
                    />
                  </FormControl_Shadcn_>
                </FormItemLayout>
              )}
            />
            <FormField_Shadcn_
              control={form.control}
              name="payload"
              render={({ field }) => (
                <FormItemLayout label="Message payload" layout="vertical" className="gap-1">
                  <FormControl_Shadcn_>
                    <CodeEditor
                      id="message-payload"
                      language="json"
                      autofocus={false}
                      className="!mb-0 h-32 overflow-hidden rounded border"
                      onInputChange={(e: string | undefined) => field.onChange(e)}
                      options={{ wordWrap: 'off', contextmenu: false }}
                      value={field.value}
                    />
                  </FormControl_Shadcn_>
                </FormItemLayout>
              )}
            />
          </form>
        </Form_Shadcn_>
      </Modal.Content>
    </Modal>
  )
}