web/roomview: split composer into separate component

web/src/ui/MessageComposer.tsx

@@ -0,0 +1,45 @@
+// 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

web/src/ui/RoomView.tsx

@@ -13,11 +13,10 @@
 //
 // 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, useState } from "react"
 import { getMediaURL } from "../api/media.ts"
 import { RoomStateStore } from "../api/statestore.ts"
 import { useNonNullEventAsState } from "../util/eventdispatcher.ts"
-import { ClientContext } from "./ClientContext.ts"
+import MessageComposer from "./MessageComposer.tsx"
 import TimelineView from "./timeline/TimelineView.tsx"
 import "./RoomView.css"
 
@@ -25,39 +24,26 @@ interface RoomViewProps {
 	room: RoomStateStore
 }
 
-const RoomView = ({ room }: RoomViewProps) => {
+const RoomHeader = ({ room }: RoomViewProps) => {
-	const [text, setText] = useState("")
-	const client = use(ClientContext)!
 	const roomMeta = useNonNullEventAsState(room.meta)
-	const sendMessage = (evt: React.FormEvent) => {
+	return <div className="room-header">
-		evt.preventDefault()
+		<img
-		setText("")
+			className="avatar"
-		client.rpc.sendMessage(room.roomID, text)
+			loading="lazy"
-			.catch(err => window.alert("Failed to send message: " + err))
+			src={getMediaURL(roomMeta.avatar)}
-	}
+			alt=""
+		/>
+		<span className="room-name">
+			{roomMeta.name ?? roomMeta.room_id}
+		</span>
+	</div>
+}
+
+const RoomView = ({ room }: RoomViewProps) => {
 	return <div className="room-view">
-		<div className="room-header">
+		<RoomHeader room={room}/>
-			<img
-				className="avatar"
-				loading="lazy"
-				src={getMediaURL(roomMeta.avatar)}
-				alt=""
-			/>
-			<span className="room-name">
-				{roomMeta.name ?? roomMeta.room_id}
-			</span>
-		</div>
 		<TimelineView room={room}/>
-		<form className="message-composer" onSubmit={sendMessage}>
+		<MessageComposer room={room}/>
-			<input
-				autoFocus
-				type="text"
-				value={text}
-				onChange={evt => setText(evt.target.value)}
-				placeholder="Send a message"
-			/>
-			<button type="submit">Send</button>
-		</form>
 	</div>
 }