Update text fields when query params change

Author: banool

frontend/src/api/hooks/useAddressInput.tsx

@@ -2,8 +2,8 @@ import React, {useState, useEffect} from "react";
 import AddressTextField from "../../components/AddressTextField";
 import {isValidAccountAddress} from "../../pages/utils";
 
-const useAddressInput = () => {
-  const [addr, setAddr] = useState<string>("");
+const useAddressInput = (initialValue: string) => {
+  const [addr, setAddr] = useState<string>(initialValue);
   const [addrIsValid, setAddrIsValid] = useState<boolean>(true);
 
   useEffect(() => {
@@ -35,7 +35,7 @@ const useAddressInput = () => {
     return isValid;
   }
 
-  return {addr, clearAddr, renderAddressTextField, validateAddressInput};
+  return {addr, setAddr, renderAddressTextField, validateAddressInput};
 };
 
 export default useAddressInput;

frontend/src/pages/NodeChecker/ConfigurationSelect.tsx

@@ -69,7 +69,7 @@ export default function ConfigurationSelect({
         updateBaselineConfiguration(undefined);
         updateValidConfigurations(undefined);
       });
-  }, [state.network_name]);
+  }, [state.network_name, searchParams]);
 
   function DropdownIcon(props: SvgIconProps) {
     return (

frontend/src/pages/NodeChecker/Index.tsx

@@ -34,34 +34,34 @@ export function NodeCheckerPage() {
   // URL text input field.
   const {
     url,
-    clearUrl: _clearUrl,
+    setUrl,
     renderUrlTextField,
     validateUrlInput,
   } = useUrlInput(searchParams.get("url") || "");
 
   // API port text input field.
   const {
     port: apiPort,
-    clearPort: _clearApiPort,
+    setPort: setApiPort,
     renderPortTextField: renderApiPortTextField,
     validatePortInput: validateApiPortInput,
   } = usePortInput(searchParams.get("apiPort") || "443");
 
   // Noise port text input field.
   const {
     port: noisePort,
-    clearPort: _clearNoisePort,
+    setPort: setNoisePort,
     renderPortTextField: renderNoisePortTextField,
     validatePortInput: validateNoisePortInput,
   } = usePortInput(searchParams.get("noisePort") || "6180");
 
   // Public key text input field.
   const {
     addr: publicKey,
-    clearAddr: _clearPublicKey,
+    setAddr: setPublicKey,
     renderAddressTextField: renderPublicKeyTextField,
     validateAddressInput: validatePublicKeyAddressInput,
-  } = useAddressInput();
+  } = useAddressInput(searchParams.get("publicKey") || "");
 
   const nhcUrl = determineNhcUrl(state);
 
@@ -105,6 +105,7 @@ export function NodeCheckerPage() {
       url: url,
       apiPort: apiPort,
       noisePort: noisePort,
+      publicKey: publicKey,
       baselineConfiguration: baselineConfiguration!.name,
     });
     try {
@@ -129,11 +130,16 @@ export function NodeCheckerPage() {
     updateChecking(false);
   };
 
-  // Clear the results if the user changes the network.
+  // Clear the results if the user changes the network or the search params.
+  // Update the fields.
   useEffect(() => {
     updateEvaluationSummary(undefined);
     updateErrorMessage(undefined);
-  }, [state.network_name]);
+    setUrl(searchParams.get("url") || "");
+    setApiPort(searchParams.get("apiPort") || "443");
+    setNoisePort(searchParams.get("noisePort") || "6180");
+    setPublicKey(searchParams.get("publicKey") || "");
+  }, [state.network_name, searchParams]);
 
   // Conditionally build an input field for the public key if the selected
   // baseline configuration has an evaluator that requires it.

frontend/src/pages/NodeChecker/hooks/usePortInput.tsx

@@ -46,7 +46,7 @@ const usePortInput = (initialValue: string) => {
     return isValid;
   }
 
-  return {port, clearPort, renderPortTextField, validatePortInput};
+  return {port, setPort, renderPortTextField, validatePortInput};
 };
 
 export default usePortInput;

frontend/src/pages/NodeChecker/hooks/useUrlInput.tsx

@@ -45,7 +45,7 @@ const useUrlInput = (initialValue: string) => {
     return isValid;
   }
 
-  return {url, clearUrl, renderUrlTextField, validateUrlInput};
+  return {url, setUrl, renderUrlTextField, validateUrlInput};
 };
 
 export default useUrlInput;