gomuks/web/src/ui/MessageComposer.tsx

45 lines
1.6 KiB
TypeScript

// gomuks - A Matrix client written in Go.
// Copyright (C) 2024 Tulir Asokan
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
import React, { use, useCallback, useState } from "react"
import { RoomStateStore } from "../api/statestore.ts"
import { ClientContext } from "./ClientContext.ts"
interface MessageComposerProps {
room: RoomStateStore
}
const MessageComposer = ({ room }: MessageComposerProps) => {
const client = use(ClientContext)!
const [text, setText] = useState("")
const sendMessage = useCallback((evt: React.FormEvent) => {
evt.preventDefault()
setText("")
client.rpc.sendMessage(room.roomID, text)
.catch(err => window.alert("Failed to send message: " + err))
}, [text, room, client])
return <form className="message-composer" onSubmit={sendMessage}>
<input
autoFocus
type="text"
value={text}
onChange={evt => setText(evt.target.value)}
placeholder="Send a message"
/>
<button type="submit">Send</button>
</form>
}
export default MessageComposer