From fb7053610fc4173ec100c65a25cd1d6474cc4010 Mon Sep 17 00:00:00 2001
From: rjwats <rjwats@gmail.com>
Date: Thu, 27 Feb 2020 00:05:38 +0000
Subject: [PATCH] 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)
---
 interface/src/components/RestController.tsx | 20 ++++++++++++--------
 interface/src/ntp/NTPSettingsForm.tsx       |  4 ++--
 interface/src/security/ManageUsersForm.tsx  |  1 -
 interface/src/security/UserForm.tsx         |  5 ++---
 interface/src/system/OTASettingsForm.tsx    |  4 ++--
 interface/src/wifi/WiFiSettingsForm.tsx     |  4 ++--
 6 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/interface/src/components/RestController.tsx b/interface/src/components/RestController.tsx
index 6c7692e..5128611 100644
--- a/interface/src/components/RestController.tsx
+++ b/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}
diff --git a/interface/src/ntp/NTPSettingsForm.tsx b/interface/src/ntp/NTPSettingsForm.tsx
index 7885bc9..daa37b1 100644
--- a/interface/src/ntp/NTPSettingsForm.tsx
+++ b/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"
             />
           }
diff --git a/interface/src/security/ManageUsersForm.tsx b/interface/src/security/ManageUsersForm.tsx
index 27c6f78..7054453 100644
--- a/interface/src/security/ManageUsersForm.tsx
+++ b/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}
           />
         }
diff --git a/interface/src/security/UserForm.tsx b/interface/src/security/UserForm.tsx
index c2c6ec5..66bd97e 100644
--- a/interface/src/security/UserForm.tsx
+++ b/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?"
diff --git a/interface/src/system/OTASettingsForm.tsx b/interface/src/system/OTASettingsForm.tsx
index 22947e6..3030ddc 100644
--- a/interface/src/system/OTASettingsForm.tsx
+++ b/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?"
diff --git a/interface/src/wifi/WiFiSettingsForm.tsx b/interface/src/wifi/WiFiSettingsForm.tsx
index ddaea91..f36e13f 100644
--- a/interface/src/wifi/WiFiSettingsForm.tsx
+++ b/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?"