From fb7053610fc4173ec100c65a25cd1d6474cc4010 Mon Sep 17 00:00:00 2001 From: rjwats 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 extends WithSnackbarProps { handleValueChange: (name: keyof D) => (event: React.ChangeEvent) => void; - handleCheckboxChange: (name: keyof D) => (event: React.ChangeEvent, checked: boolean) => void; handleSliderChange: (name: keyof D) => (event: React.ChangeEvent<{}>, value: number | number[]) => void; setData: (data: D) => void; @@ -23,6 +22,17 @@ interface RestControllerState { errorMessage?: string; } +const extractValue = (event: React.ChangeEvent) => { + switch (event.target.type) { + case "number": + return event.target.valueAsNumber; + case "checkbox": + return event.target.checked; + default: + return event.target.value + } +} + export function restController>(endpointUrl: string, RestController: React.ComponentType

>) { return withSnackbar( class extends React.Component> & WithSnackbarProps, RestControllerState> { @@ -85,12 +95,7 @@ export function restController>(endpointUrl: } handleValueChange = (name: keyof D) => (event: React.ChangeEvent) => { - const data = { ...this.state.data!, [name]: event.target.value }; - this.setState({ data }); - } - - handleCheckboxChange = (name: keyof D) => (event: React.ChangeEvent) => { - 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>(endpointUrl: render() { return { } render() { - const { data, handleValueChange, handleCheckboxChange, saveData, loadData } = this.props; + const { data, handleValueChange, saveData, loadData } = this.props; return ( } 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 } 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) => void; - handleCheckboxChange: (name: keyof User) => (event: React.ChangeEvent, checked: boolean) => void; onDoneEditing: () => void; onCancelEditing: () => void; } @@ -30,7 +29,7 @@ class UserForm extends React.Component { } render() { - const { user, creating, handleValueChange, handleCheckboxChange, onDoneEditing, onCancelEditing } = this.props; + const { user, creating, handleValueChange, onDoneEditing, onCancelEditing } = this.props; return (

@@ -64,7 +63,7 @@ class UserForm extends React.Component { } 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 { } render() { - const { data, handleValueChange, handleCheckboxChange, saveData, loadData } = this.props; + const { data, handleValueChange, saveData, loadData } = this.props; return ( } 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 { render() { const { selectedNetwork, deselectNetwork } = this.context; - const { data, handleValueChange, handleCheckboxChange, saveData, loadData } = this.props; + const { data, handleValueChange, saveData, loadData } = this.props; return ( { @@ -98,7 +98,7 @@ class WiFiSettingsForm extends React.Component { } label="Static IP Config?"