Minor code restructuring

src/lib/NetworkingTab.svelte

@@ -27,79 +27,80 @@
 			console.log("Copy ip to clipboard: Error: " + msg);
 		}
 	}
-	function getButtonText(state)
+
-	{
+function updateButtonData(state) {
-		switch(state)
+	switch(state) {
-		{
+		case "DISCONNECTED":
-			case "DISCONNECTED":
+			return {
-				return "Connect to Tailscale";
+				buttonText: "Connect to Tailscale",
-			case "DOWNLOADING":
+				isClickable: true,
-				return "Loading IP stack...";
+				clickHandler: handleConnect,
-			case "LOGINSTARTING":
+				clickUrl: null,
-				return "Starting Login...";
+				buttonTooltip: null,
-			case "LOGINREADY":
+				rightClickHandler: null
-				return "Login to Tailscale";
+			};
-			case "CONNECTED":
+		case "DOWNLOADING":
-				return `IP: ${networkData.currentIp}`;
+			return {
-			case "IPCOPIED":
+				buttonText: "Loading IP stack...",
-				return "Copied!";
+				isClickable: false,
-			default:
+				clickHandler: null,
-				break;
+				clickUrl: null,
-		}
+				buttonTooltip: null,
-		return `Text for state: ${state}`;
+				rightClickHandler: null
-	}
+			};
-	function isClickableState(state)
+		case "LOGINSTARTING":
-	{
+			return {
-		switch(state)
+				buttonText: "Starting Login...",
-		{
+				isClickable: false,
-			case "DISCONNECTED":
+				clickHandler: null,
-			case "LOGINREADY":
+				clickUrl: null,
-			case "CONNECTED":
+				buttonTooltip: null,
-				return true;
+				rightClickHandler: null
-		}
+			};
-		return false;
+		case "LOGINREADY":
-	}
+			return {
-	function getClickHandler(state)
+				buttonText: "Login to Tailscale",
-	{
+				isClickable: true,
-		switch(state)
+				clickHandler: null,
-		{
+				clickUrl: networkData.loginUrl,
-			case "DISCONNECTED":
+				buttonTooltip: null,
-				return handleConnect;
+				rightClickHandler: null
-		}
+			};
-		return null;
+		case "CONNECTED":
-	}
+			return {
-	function getClickUrl(state)
+				buttonText: `IP: ${networkData.currentIp}`,
-	{
+				isClickable: true,
-		switch(state)
+				clickHandler: null,
-		{
+				clickUrl: networkData.dashboardUrl,
-			case "LOGINREADY":
+				buttonTooltip: "Right-click to copy",
-				return networkData.loginUrl;
+				rightClickHandler: handleCopyIP
-			case "CONNECTED":
+			};
-				return networkData.dashboardUrl;
+		case "IPCOPIED":
-		}
+			return {
-		return null;
+				buttonText: "Copied!",
-	}
+				isClickable: false,
-	function getButtonTooltip(state)
+				clickHandler: null,
-	{
+				clickUrl: null,
-		switch(state)
+				buttonTooltip: null,
-		{
+				rightClickHandler: null
-			case "CONNECTED":
+			};
-				return "Right-click to copy";
+		default:
-		}
+			return {
-		return null;
+				buttonText: `Text for state: ${state}`,
-	}
+				isClickable: false,
-	function getRightClickHandler(state)
+				clickHandler: null,
-	{
+				clickUrl: null,
-		switch(state)
+				buttonTooltip: null,
-		{
+				rightClickHandler: null
-			case "CONNECTED":
+			};
-				return handleCopyIP;
-		}
-		return null;
 	}
+}
+
+let buttonData = null;
+$: buttonData = updateButtonData($connectionState);
 </script>
 <h1 class="text-lg font-bold">Networking</h1>
-<PanelButton buttonImage="assets/tailscale.svg" clickUrl={getClickUrl($connectionState)} clickHandler={getClickHandler($connectionState)} rightClickHandler={getRightClickHandler($connectionState)} buttonTooltip={getButtonTooltip($connectionState)} buttonText={getButtonText($connectionState)}>
+<PanelButton buttonImage="assets/tailscale.svg" clickUrl={buttonData.clickUrl} clickHandler={buttonData.clickHandler} rightClickHandler={buttonData.rightClickHandler} buttonTooltip={buttonData.buttonTooltip} buttonText={buttonData.buttonText}>
 	{#if $connectionState == "CONNECTED"}
 		<i class='fas fa-circle fa-xs ml-auto {$exitNode ? 'text-green-500' : 'text-amber-500'}' title={$exitNode ? 'Ready' : 'No exit node'}></i>
 	{/if}