Retain configured hostname (#173)

Retain configured hostname when selecting new network from network scanner

interface/src/wifi/WiFiSettingsController.tsx

@@ -1,8 +1,7 @@
 import React, { Component } from 'react';
 
-import {restController, RestControllerProps, RestFormLoader, SectionContent } from '../components';
+import { restController, RestControllerProps, RestFormLoader, SectionContent } from '../components';
 import WiFiSettingsForm from './WiFiSettingsForm';
-import { WiFiConnectionContext } from './WiFiConnectionContext';
 import { WIFI_SETTINGS_ENDPOINT } from '../api';
 import { WiFiSettings } from './types';
 
@@ -10,39 +9,15 @@ type WiFiSettingsControllerProps = RestControllerProps<WiFiSettings>;
 
 class WiFiSettingsController extends Component<WiFiSettingsControllerProps> {
 
-  static contextType = WiFiConnectionContext;
-  context!: React.ContextType<typeof WiFiConnectionContext>;
-
   componentDidMount() {
-    const { selectedNetwork } = this.context;
-    if (selectedNetwork) {
-      const wifiSettings: WiFiSettings = {
-        ssid: selectedNetwork.ssid,
-        password: "",
-        hostname: "esp8266-react",
-        static_ip_config: false,
-      }
-      this.props.setData(wifiSettings);
-    } else {
     this.props.loadData();
   }
-  }
-
-  deselectNetworkAndLoadData = () => {
-    this.context.deselectNetwork();
-    this.props.loadData();
-  }
-
-  componentWillUnmount() {
-    this.context.deselectNetwork();
-  }
 
   render() {
     return (
       <SectionContent title="WiFi Settings">
         <RestFormLoader
           {...this.props}
-          loadData={this.deselectNetworkAndLoadData}
           render={formProps => <WiFiSettingsForm {...formProps} />}
         />
       </SectionContent>

interface/src/wifi/WiFiSettingsForm.tsx

@@ -24,15 +24,39 @@ class WiFiSettingsForm extends React.Component<WiFiStatusFormProps> {
   static contextType = WiFiConnectionContext;
   context!: React.ContextType<typeof WiFiConnectionContext>;
 
+  constructor(props: WiFiStatusFormProps, context: WiFiConnectionContext) {
+    super(props);
+
+    const { selectedNetwork } = context;
+    if (selectedNetwork) {
+      const wifiSettings: WiFiSettings = {
+        ssid: selectedNetwork.ssid,
+        password: "",
+        hostname: props.data.hostname,
+        static_ip_config: false,
+      }
+      props.setData(wifiSettings);
+    }
+  }
+
   componentWillMount() {
     ValidatorForm.addValidationRule('isIP', isIP);
     ValidatorForm.addValidationRule('isHostname', isHostname);
     ValidatorForm.addValidationRule('isOptionalIP', optional(isIP));
   }
 
+  deselectNetworkAndLoadData = () => {
+    this.context.deselectNetwork();
+    this.props.loadData();
+  }
+
+  componentWillUnmount() {
+    this.context.deselectNetwork();
+  }
+
   render() {
     const { selectedNetwork, deselectNetwork } = this.context;
-    const { data, handleValueChange, saveData, loadData } = this.props;
+    const { data, handleValueChange, saveData } = this.props;
     return (
       <ValidatorForm onSubmit={saveData} ref="WiFiSettingsForm">
         {
@@ -167,7 +191,7 @@ class WiFiSettingsForm extends React.Component<WiFiStatusFormProps> {
           <FormButton startIcon={<SaveIcon />} variant="contained" color="primary" type="submit">
             Save
           </FormButton>
-          <FormButton variant="contained" color="secondary" onClick={loadData}>
+          <FormButton variant="contained" color="secondary" onClick={this.deselectNetworkAndLoadData}>
             Reset
           </FormButton>
         </FormActions>