Replace event listeners with react-use useEvent; fix bugs with task text truncation, stale effects, and 'visible' extension TypeError

webview-ui/src/App.tsx

@@ -1,12 +1,11 @@
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useState, useCallback } from "react"
 import "./App.css"
-
 import ChatView from "./components/ChatView"
 import SettingsView from "./components/SettingsView"
 import { ClaudeMessage, ExtensionMessage } from "@shared/ExtensionMessage"
 import WelcomeView from "./components/WelcomeView"
 import { vscode } from "./utilities/vscode"
-//import { mockMessages } from "./utilities/mockMessages"
+import { useEvent } from "react-use"
 
 /*
 The contents of webviews however are created when the webview becomes visible and destroyed when the webview is moved into the background. Any state inside the webview will be lost when the webview is moved to a background tab.
@@ -26,43 +25,37 @@ const App: React.FC = () => {
 
 	useEffect(() => {
 		vscode.postMessage({ type: "webviewDidLaunch" })
-
-		const handleMessage = (e: MessageEvent) => {
-			const message: ExtensionMessage = e.data
-			// switch message.type
-			switch (message.type) {
-				case "state":
-					const shouldShowWelcome = !message.state!.didOpenOnce || !message.state!.apiKey
-					setShowWelcome(shouldShowWelcome)
-					setApiKey(message.state!.apiKey || "")
-					setMaxRequestsPerTask(
-						message.state!.maxRequestsPerTask !== undefined
-							? message.state!.maxRequestsPerTask.toString()
-							: ""
-					)
-					setVscodeThemeName(message.state!.themeName)
-					setClaudeMessages(message.state!.claudeMessages)
-					break
-				case "action":
-					switch (message.action!) {
-						case "settingsButtonTapped":
-							setShowSettings(true)
-							break
-						case "plusButtonTapped":
-							setShowSettings(false)
-							break
-					}
-					break
-			}
-		}
-
-		window.addEventListener("message", handleMessage)
-
-		return () => {
-			window.removeEventListener("message", handleMessage)
-		}
 	}, [])
 
+	const handleMessage = useCallback((e: MessageEvent) => {
+		const message: ExtensionMessage = e.data
+		switch (message.type) {
+			case "state":
+				const shouldShowWelcome = !message.state!.didOpenOnce || !message.state!.apiKey
+				setShowWelcome(shouldShowWelcome)
+				setApiKey(message.state!.apiKey || "")
+				setMaxRequestsPerTask(
+					message.state!.maxRequestsPerTask !== undefined ? message.state!.maxRequestsPerTask.toString() : ""
+				)
+				setVscodeThemeName(message.state!.themeName)
+				setClaudeMessages(message.state!.claudeMessages)
+				break
+			case "action":
+				switch (message.action!) {
+					case "settingsButtonTapped":
+						setShowSettings(true)
+						break
+					case "plusButtonTapped":
+						setShowSettings(false)
+						break
+				}
+				break
+		}
+		// we don't need to define any dependencies since we're not using any state in the callback. if you were to use state, you'd either have to include it in the dependency array or use the updater function `setUserText(prev => `${prev}${key}`);`. (react-use takes care of not registering the same listener multiple times even if this callback is updated.)
+	}, [])
+
+	useEvent("message", handleMessage)
+
 	return (
 		<>
 			{showWelcome ? (