Bugfix: PluginAction spam causing errors (#541)

* Use session's state instead of existence to determine action

* Retain host/port text

* Use bindings instead of text/ref tunneling

Co-authored-by: Lucien Greathouse <me@lpghatguy.com>

plugin/src/App/StatusPages/NotConnected.lua

@@ -14,8 +14,6 @@ local PORT_WIDTH = 74
 local DIVIDER_WIDTH = 1
 local HOST_OFFSET = 12
 
-local lastHost, lastPort
-
 local e = Roact.createElement
 
 local function AddressEntry(props)
@@ -26,7 +24,7 @@ local function AddressEntry(props)
 			layoutOrder = props.layoutOrder,
 		}, {
 			Host = e("TextBox", {
-				Text = lastHost or "",
+				Text = props.host or "",
 				Font = Enum.Font.Code,
 				TextSize = 18,
 				TextColor3 = theme.AddressEntry.TextColor,
@@ -34,6 +32,7 @@ local function AddressEntry(props)
 				TextTransparency = props.transparency,
 				PlaceholderText = Config.defaultHost,
 				PlaceholderColor3 = theme.AddressEntry.PlaceholderColor,
+				ClearTextOnFocus = false,
 
 				Size = UDim2.new(1, -(HOST_OFFSET + DIVIDER_WIDTH + PORT_WIDTH), 1, 0),
 				Position = UDim2.new(0, HOST_OFFSET, 0, 0),
@@ -41,17 +40,22 @@ local function AddressEntry(props)
 				ClipsDescendants = true,
 				BackgroundTransparency = 1,
 
-				[Roact.Ref] = props.hostRef,
+				[Roact.Change.Text] = function(object)
+					if props.onHostChange ~= nil then
+						props.onHostChange(object.Text)
+					end
+				end
 			}),
 
 			Port = e("TextBox", {
-				Text = lastPort or "",
+				Text = props.port or "",
 				Font = Enum.Font.Code,
 				TextSize = 18,
 				TextColor3 = theme.AddressEntry.TextColor,
 				TextTransparency = props.transparency,
 				PlaceholderText = Config.defaultPort,
 				PlaceholderColor3 = theme.AddressEntry.PlaceholderColor,
+				ClearTextOnFocus = false,
 
 				Size = UDim2.new(0, PORT_WIDTH, 1, 0),
 				Position = UDim2.new(1, 0, 0, 0),
@@ -60,12 +64,14 @@ local function AddressEntry(props)
 				ClipsDescendants = true,
 				BackgroundTransparency = 1,
 
-				[Roact.Ref] = props.portRef,
-
 				[Roact.Change.Text] = function(object)
 					local text = object.Text
 					text = text:gsub("%D", "")
 					object.Text = text
+
+					if props.onPortChange ~= nil then
+						props.onPortChange(text)
+					end
 				end,
 			}, {
 				Divider = e("Frame", {
@@ -90,8 +96,10 @@ function NotConnectedPage:render()
 		}),
 
 		AddressEntry = e(AddressEntry, {
-			hostRef = self.props.hostRef,
+			host = self.props.host,
-			portRef = self.props.portRef,
+			port = self.props.port,
+			onHostChange = self.props.onHostChange,
+			onPortChange = self.props.onPortChange,
 			transparency = self.props.transparency,
 			layoutOrder = 2,
 		}),

plugin/src/App/init.lua

@@ -38,8 +38,8 @@ local App = Roact.Component:extend("App")
 function App:init()
 	preloadAssets()
 
-	self.hostRef = Roact.createRef()
+	self.host, self.setHost = Roact.createBinding("")
-	self.portRef = Roact.createRef()
+	self.port, self.setPort = Roact.createBinding("")
 
 	self:setState({
 		appStatus = AppStatus.NotConnected,
@@ -48,12 +48,19 @@ function App:init()
 	})
 end
 
-function App:startSession()
+function App:getHostAndPort()
-	local hostText = self.hostRef.current.Text
+	local host = self.host:getValue()
-	local portText = self.portRef.current.Text
+	local port = self.port:getValue()
+
+	local host = if #host > 0 then host else Config.defaultHost
+	local port = if #port > 0 then port else Config.defaultPort
+
+	return host, port
+end
+
+function App:startSession()
+	local host, port = self:getHostAndPort()
 
-	local host = if #hostText > 0 then hostText else Config.defaultHost
-	local port = if #portText > 0 then portText else Config.defaultPort
 	local sessionOptions = {
 		openScriptsExternally = self.props.settings:get("openScriptsExternally"),
 		twoWaySync = self.props.settings:get("twoWaySync"),
@@ -176,8 +183,10 @@ function App:render()
 					end,
 				}, {
 					NotConnectedPage = createPageElement(AppStatus.NotConnected, {
-						hostRef = self.hostRef,
+						host = self.host,
-						portRef = self.portRef,
+						onHostChange = self.setHost,
+						port = self.port,
+						onPortChange = self.setPort,
 
 						onConnect = function()
 							self:startSession()
@@ -237,10 +246,10 @@ function App:render()
 					icon = Assets.Images.PluginButton,
 					bindable = true,
 					onTriggered = function()
-						if self.serveSession then
+						if self.serveSession == nil or self.serveSession:getStatus() == ServeSession.Status.NotStarted then
-							self:endSession()
-						else
 							self:startSession()
+						elseif self.serveSession ~= nil and self.serveSession:getStatus() == ServeSession.Status.Connected then
+							self:endSession()
 						end
 					end,
 				}),
@@ -252,11 +261,9 @@ function App:render()
 					icon = Assets.Images.PluginButton,
 					bindable = true,
 					onTriggered = function()
-						if self.serveSession then
+						if self.serveSession == nil or self.serveSession:getStatus() == ServeSession.Status.NotStarted then
-							return
+							self:startSession()
 						end
-
-						self:startSession()
 					end,
 				}),
 
@@ -267,11 +274,9 @@ function App:render()
 					icon = Assets.Images.PluginButton,
 					bindable = true,
 					onTriggered = function()
-						if not self.serveSession then
+						if self.serveSession ~= nil and self.serveSession:getStatus() == ServeSession.Status.Connected then
-							return
+							self:endSession()
 						end
-
-						self:endSession()
 					end,
 				}),
 

plugin/src/ServeSession.lua

@@ -113,6 +113,10 @@ function ServeSession:__fmtDebug(output)
 	output:write("}")
 end
 
+function ServeSession:getStatus()
+	return self.__status
+end
+
 function ServeSession:onStatusChanged(callback)
 	self.__statusChangedCallback = callback
 end