web: merge event dispatcher hooks

web/src/App.tsx

@@ -22,14 +22,14 @@ import MainScreen from "./ui/MainScreen.tsx"
 import { LoginScreen, VerificationScreen } from "./ui/login"
 import { LightboxWrapper } from "./ui/modal/Lightbox.tsx"
 import { ModalWrapper } from "./ui/modal/Modal.tsx"
-import { useCachedEventAsState } from "./util/eventdispatcher.ts"
+import { useEventAsState } from "./util/eventdispatcher.ts"
 
 const client = new Client(new WSClient("_gomuks/websocket"))
 window.client = client
 
 function App() {
-	const connState = useCachedEventAsState(client.rpc.connect)
-	const clientState = useCachedEventAsState(client.state)
+	const connState = useEventAsState(client.rpc.connect)
+	const clientState = useEventAsState(client.state)
 	useEffect(() => {
 		Notification.requestPermission()
 			.then(permission => console.log("Notification permission:", permission))

web/src/ui/RoomView.tsx

@@ -16,7 +16,7 @@
 import { use, useRef } from "react"
 import { getAvatarURL } from "@/api/media.ts"
 import { RoomStateStore } from "@/api/statestore"
-import { useNonNullEventAsState } from "@/util/eventdispatcher.ts"
+import { useEventAsState } from "@/util/eventdispatcher.ts"
 import MessageComposer from "./composer/MessageComposer.tsx"
 import { LightboxContext } from "./modal/Lightbox.tsx"
 import { RoomContext, RoomContextData } from "./roomcontext.ts"
@@ -30,7 +30,7 @@ interface RoomViewProps {
 }
 
 const RoomHeader = ({ room, clearActiveRoom }: RoomViewProps) => {
-	const roomMeta = useNonNullEventAsState(room.meta)
+	const roomMeta = useEventAsState(room.meta)
 	const avatarSourceID = roomMeta.lazy_load_summary?.heroes?.length === 1
 		? roomMeta.lazy_load_summary.heroes[0] : room.roomID
 	return <div className="room-header">

web/src/ui/roomlist/RoomList.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import React, { use, useCallback, useRef, useState } from "react"
 import type { RoomID } from "@/api/types"
-import { useNonNullEventAsState } from "@/util/eventdispatcher.ts"
+import { useEventAsState } from "@/util/eventdispatcher.ts"
 import toSearchableString from "@/util/searchablestring.ts"
 import ClientContext from "../ClientContext.ts"
 import Entry from "./Entry.tsx"
@@ -27,7 +27,7 @@ interface RoomListProps {
 }
 
 const RoomList = ({ setActiveRoom, activeRoomID }: RoomListProps) => {
-	const roomList = useNonNullEventAsState(use(ClientContext)!.store.roomList)
+	const roomList = useEventAsState(use(ClientContext)!.store.roomList)
 	const roomFilterRef = useRef<HTMLInputElement>(null)
 	const [roomFilter, setRoomFilter] = useState("")
 	const [realRoomFilter, setRealRoomFilter] = useState("")

web/src/ui/timeline/menu/EventMenu.tsx

@@ -16,7 +16,7 @@
 import { CSSProperties, use, useCallback, useRef } from "react"
 import { MemDBEvent } from "@/api/types"
 import { emojiToReactionContent } from "@/util/emoji"
-import { useNonNullEventAsState } from "@/util/eventdispatcher.ts"
+import { useEventAsState } from "@/util/eventdispatcher.ts"
 import ClientContext from "../../ClientContext.ts"
 import EmojiPicker from "../../emojipicker/EmojiPicker.tsx"
 import { ModalContext } from "../../modal/Modal.tsx"
@@ -83,7 +83,7 @@ const EventMenu = ({ evt, setForceOpen }: EventHoverMenuProps) => {
 			onClose: () => setForceOpen(false),
 		})
 	}, [evt, roomCtx, setForceOpen, openModal])
-	const isEditing = useNonNullEventAsState(roomCtx.isEditing)
+	const isEditing = useEventAsState(roomCtx.isEditing)
 	return <div className="event-hover-menu" ref={contextMenuRef}>
 		<button onClick={onClickReact}><ReactIcon/></button>
 		<button

web/src/util/eventdispatcher.ts

@@ -13,22 +13,11 @@
 //
 // 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 { useEffect, useState, useSyncExternalStore } from "react"
+import { useSyncExternalStore } from "react"
 
-export function useEventAsState<T>(dispatcher?: EventDispatcher<T>): T | null {
-	const [state, setState] = useState<T | null>(null)
-	useEffect(() => dispatcher && dispatcher.listen(setState), [dispatcher])
-	return state
-}
-
-export function useCachedEventAsState<T>(dispatcher: CachedEventDispatcher<T>): T | null {
-	return useSyncExternalStore(
-		dispatcher.listenChange,
-		() => dispatcher.current,
-	)
-}
-
-export function useNonNullEventAsState<T>(dispatcher: NonNullCachedEventDispatcher<T>): T {
+export function useEventAsState<T>(dispatcher: NonNullCachedEventDispatcher<T>): T
+export function useEventAsState<T>(dispatcher: CachedEventDispatcher<T>): T | null
+export function useEventAsState<T>(dispatcher: CachedEventDispatcher<T>): T | null {
 	return useSyncExternalStore(
 		dispatcher.listenChange,
 		() => dispatcher.current,

web/src/util/focus.ts

@@ -13,12 +13,12 @@
 //
 // 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 { NonNullCachedEventDispatcher, useNonNullEventAsState } from "@/util/eventdispatcher.ts"
+import { NonNullCachedEventDispatcher, useEventAsState } from "@/util/eventdispatcher.ts"
 
 export const focused = new NonNullCachedEventDispatcher(document.hasFocus())
 window.addEventListener("focus", () => focused.emit(true))
 window.addEventListener("blur", () => focused.emit(false))
 
 export default function useFocus() {
-	return useNonNullEventAsState(focused)
+	return useEventAsState(focused)
 }