fix issue with number inputs not serializing correctly due to setting values as strings instead of numbers (#94)

consolidate number, string and checkbox value change functions

(cherry picked from commit 22c1590885db0534afabff74be7504ca9a0998b5)

Author: rjwats

interface/src/components/RestController.tsx

@@ -5,7 +5,6 @@ import { redirectingAuthorizedFetch } from '../authentication';
 
 export interface RestControllerProps<D> extends WithSnackbarProps {
   handleValueChange: (name: keyof D) => (event: React.ChangeEvent<HTMLInputElement>) => void;
-  handleCheckboxChange: (name: keyof D) => (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
   handleSliderChange: (name: keyof D) => (event: React.ChangeEvent<{}>, value: number | number[]) => void;
 
   setData: (data: D) => void;
@@ -23,6 +22,17 @@ interface RestControllerState<D> {
   errorMessage?: string;
 }
 
+const extractValue = (event: React.ChangeEvent<HTMLInputElement>) => {
+  switch (event.target.type) {
+    case "number":
+      return event.target.valueAsNumber;
+    case "checkbox":
+      return event.target.checked;
+    default:
+      return event.target.value
+  }
+}
+
 export function restController<D, P extends RestControllerProps<D>>(endpointUrl: string, RestController: React.ComponentType<P & RestControllerProps<D>>) {
   return withSnackbar(
     class extends React.Component<Omit<P, keyof RestControllerProps<D>> & WithSnackbarProps, RestControllerState<D>> {
@@ -85,12 +95,7 @@ export function restController<D, P extends RestControllerProps<D>>(endpointUrl:
       }
 
       handleValueChange = (name: keyof D) => (event: React.ChangeEvent<HTMLInputElement>) => {
-        const data = { ...this.state.data!, [name]: event.target.value };
-        this.setState({ data });
-      }
-
-      handleCheckboxChange = (name: keyof D) => (event: React.ChangeEvent<HTMLInputElement>) => {
-        const data = { ...this.state.data!, [name]: event.target.checked };
+        const data = { ...this.state.data!, [name]: extractValue(event) };
         this.setState({ data });
       }
 
@@ -102,7 +107,6 @@ export function restController<D, P extends RestControllerProps<D>>(endpointUrl:
       render() {
         return <RestController
           handleValueChange={this.handleValueChange}
-          handleCheckboxChange={this.handleCheckboxChange}
           handleSliderChange={this.handleSliderChange}
           setData={this.setData}
           saveData={this.saveData}

interface/src/ntp/NTPSettingsForm.tsx

@@ -28,14 +28,14 @@ class NTPSettingsForm extends React.Component<NTPSettingsFormProps> {
   }
 
   render() {
-    const { data, handleValueChange, handleCheckboxChange, saveData, loadData } = this.props;
+    const { data, handleValueChange, saveData, loadData } = this.props;
     return (
       <ValidatorForm onSubmit={saveData}>
         <BlockFormControlLabel
           control={
             <Checkbox
               checked={data.enabled}
-              onChange={handleCheckboxChange('enabled')}
+              onChange={handleValueChange('enabled')}
               value="enabled"
             />
           }

interface/src/security/ManageUsersForm.tsx

@@ -177,7 +177,6 @@ class ManageUsersForm extends React.Component<ManageUsersFormProps, ManageUsersF
             onDoneEditing={this.doneEditingUser}
             onCancelEditing={this.cancelEditingUser}
             handleValueChange={this.handleUserValueChange}
-            handleCheckboxChange={this.handleUserCheckboxChange}
             uniqueUsername={this.uniqueUsername}
           />
         }

interface/src/security/UserForm.tsx

@@ -12,7 +12,6 @@ interface UserFormProps {
   user: User;
   uniqueUsername: (value: any) => boolean;
   handleValueChange: (name: keyof User) => (event: React.ChangeEvent<HTMLInputElement>) => void;
-  handleCheckboxChange: (name: keyof User) => (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
   onDoneEditing: () => void;
   onCancelEditing: () => void;
 }
@@ -30,7 +29,7 @@ class UserForm extends React.Component<UserFormProps> {
   }
 
   render() {
-    const { user, creating, handleValueChange, handleCheckboxChange, onDoneEditing, onCancelEditing } = this.props;
+    const { user, creating, handleValueChange, onDoneEditing, onCancelEditing } = this.props;
     return (
       <ValidatorForm onSubmit={onDoneEditing} ref={this.formRef}>
         <Dialog onClose={onCancelEditing} aria-labelledby="user-form-dialog-title" open>
@@ -64,7 +63,7 @@ class UserForm extends React.Component<UserFormProps> {
                 <Checkbox
                   value="admin"
                   checked={user.admin}
-                  onChange={handleCheckboxChange('admin')}
+                  onChange={handleValueChange('admin')}
                 />
               }
               label="Admin?"

interface/src/system/OTASettingsForm.tsx

@@ -18,14 +18,14 @@ class OTASettingsForm extends React.Component<OTASettingsFormProps> {
   }
 
   render() {
-    const { data, handleValueChange, handleCheckboxChange, saveData, loadData } = this.props;
+    const { data, handleValueChange, saveData, loadData } = this.props;
     return (
       <ValidatorForm onSubmit={saveData}>
         <BlockFormControlLabel
           control={
             <Checkbox
               checked={data.enabled}
-              onChange={handleCheckboxChange("enabled")}
+              onChange={handleValueChange("enabled")}
             />
           }
           label="Enable OTA Updates?"

interface/src/wifi/WiFiSettingsForm.tsx

@@ -32,7 +32,7 @@ class WiFiSettingsForm extends React.Component<WiFiStatusFormProps> {
 
   render() {
     const { selectedNetwork, deselectNetwork } = this.context;
-    const { data, handleValueChange, handleCheckboxChange, saveData, loadData } = this.props;
+    const { data, handleValueChange, saveData, loadData } = this.props;
     return (
       <ValidatorForm onSubmit={saveData} ref="WiFiSettingsForm">
         {
@@ -98,7 +98,7 @@ class WiFiSettingsForm extends React.Component<WiFiStatusFormProps> {
             <Checkbox
               value="static_ip_config"
               checked={data.static_ip_config}
-              onChange={handleCheckboxChange("static_ip_config")}
+              onChange={handleValueChange("static_ip_config")}
             />
           }
           label="Static IP Config?"