Update dependencies

components/details.tsx

@@ -1,5 +1,4 @@
 import { TextField } from '@material-ui/core'
-import { ChangeEvent } from 'react'
 import { Info } from '../types/common'
 import { TitleCard } from './title-card/title-card'
 
@@ -10,7 +9,7 @@ type DetailsProps = {
 }
 
 export default function Details(props: DetailsProps) {
-  const { info } = props
+  const { info, updateName, updateDescription } = props
 
   return (
     <TitleCard title="Details">
@@ -22,15 +21,15 @@ export default function Details(props: DetailsProps) {
           label="Name" 
           value={info.name}
           required
-          onChange={(e: ChangeEvent) => props.updateName((e.target as HTMLInputElement).value)}
+          onChange={e => updateName(e.target.value)}
         />
         <TextField
           fullWidth
           margin="dense"
           name="info.description"
           label="Description"
           value={info.description}
-          onChange={(e: ChangeEvent) => props.updateDescription((e.target as HTMLInputElement).value)}
+          onChange={e => updateDescription(e.target.value)}
         />
       </form>
     </TitleCard>

components/input-model/categorical-variable.tsx

@@ -1,10 +1,11 @@
-import { Box, Button, IconButton, TextField, Typography } from '@material-ui/core';
+import { Box, Button, IconButton, Typography } from '@material-ui/core';
 import DeleteIcon from "@material-ui/icons/Delete";
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import CategoricalVariableOptions from './categorical-variable-options';
 import { useStyles } from './categorical-variable.style';
 import { CategoricalVariableType } from '../../types/common';
+import { FormInputText } from '../../utility/forms';
 
 type CategoricalVariableProps = {
   isDisabled: boolean
@@ -16,9 +17,9 @@ export default function CategoricalVariable(props: CategoricalVariableProps) {
   const [options, setOptions] = useState([])
   const { isDisabled, onAdded } = props
 
-  const { register, handleSubmit, reset, watch, errors } = useForm<CategoricalVariableType>();
+  const { handleSubmit, reset, control } = useForm<CategoricalVariableType>();
   const onSubmit = async (data: CategoricalVariableType) => {
-    onAdded({...data, options})
+    onAdded({ ...data, options })
     setOptions([])
     reset()
   }
@@ -30,46 +31,46 @@ export default function CategoricalVariable(props: CategoricalVariableProps) {
   }
 
   return (
-      <>
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <TextField 
-            fullWidth
-            margin="dense"
-            name="name" 
-            label="Name"
-            inputRef={register}
-            />
-          <TextField
-            fullWidth
-            margin="dense"
-            name="description"
-            label="Description"
-            inputRef={register}
-          />
-
-          <Box mt={2}>
-            <Typography>Options</Typography>
-            {options.map((option, index) => (
-              <div key={index}>
-                <div className={classes.option}>
-                  <Typography variant="body1">{option}</Typography>
-                  <IconButton onClick={() => deleteOption(index)} size="small" aria-label="delete" color="primary">
-                    <DeleteIcon fontSize="small" /> 
-                  </IconButton>
-                </div>
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <FormInputText
+          name="name"
+          control={control}
+          fullWidth
+          margin="dense"
+          label="Name"
+        />
+        <FormInputText
+          name="description"
+          control={control}
+          fullWidth
+          margin="dense"
+          label="Description"
+        />
+
+        <Box mt={2}>
+          <Typography>Options</Typography>
+          {options.map((option, index) => (
+            <div key={index}>
+              <div className={classes.option}>
+                <Typography variant="body1">{option}</Typography>
+                <IconButton onClick={() => deleteOption(index)} size="small" aria-label="delete" color="primary">
+                  <DeleteIcon fontSize="small" />
+                </IconButton>
               </div>
-            ))}
-          </Box>
+            </div>
+          ))}
+        </Box>
+
+        <CategoricalVariableOptions onOptionAdded={(option: String) => {
+          setOptions([...options, option])
+        }} />
 
-          <CategoricalVariableOptions onOptionAdded={(option: String) => {
-            setOptions([...options, option])
-          }}/>
-
-          <Box mt={2}>
-            <Button disabled={isDisabled} size="small" variant="outlined" type="submit">Add variable</Button>
-          </Box>
+        <Box mt={2}>
+          <Button disabled={isDisabled} size="small" variant="outlined" type="submit">Add variable</Button>
+        </Box>
 
-        </form>
+      </form>
     </>
   )
 }

components/input-model/value-variable.tsx

@@ -1,8 +1,9 @@
-import { Box, Button, TextField, Radio, FormControl, FormControlLabel, RadioGroup, Tooltip } from '@material-ui/core'
+import { Box, Button, Radio, FormControl, FormControlLabel, RadioGroup, Tooltip } from '@material-ui/core'
 import { ChangeEvent, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import useStyles from './value-variable.style';
 import { ValueVariableType } from '../../types/common';
+import { FormInputText } from '../../utility/forms';
 
 type ValueVariableProps = {
   isDisabled: boolean
@@ -14,8 +15,8 @@ export default function ValueVariable(props: ValueVariableProps) {
   const classes = useStyles()
   const [type, setType] = useState<string>('continuous')
 
-  const { register, handleSubmit, reset } = useForm<ValueVariableType>()
-  
+  const { register, handleSubmit, reset, control } = useForm<ValueVariableType>()
+
   const onSubmit = async (data: ValueVariableType) => {
     onAdded(data)
     reset()
@@ -26,56 +27,58 @@ export default function ValueVariable(props: ValueVariableProps) {
   }
 
   return (
-      <>
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <TextField
-            fullWidth
-            margin="dense"
-            name="name" 
-            label="Name" 
-            inputRef={register}
+    <>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <FormInputText
+          name="name"
+          control={control}
+          fullWidth
+          margin="dense"
+          label="Name"
+        />
+        <FormInputText
+          name="description"
+          control={control}
+          fullWidth
+          margin="dense"
+          label="Description"
+        />
+        <Box mb={0} className={classes.narrowInputContainer}>
+          <Box className={classes.narrowInput} pr={1}>
+            <FormInputText
+              name="min"
+              control={control}
+              fullWidth
+              margin="dense"
+              label="Min"
+              transform={e => parseInt(e)}
             />
-          <TextField
-            fullWidth
-            margin="dense"
-            name="description"
-            label="Description"
-            inputRef={register}
-          />
-          <Box mb={0} className={classes.narrowInputContainer}>
-            <Box className={classes.narrowInput} pr={1}>
-              <TextField
-                fullWidth
-                margin="dense"
-                name="min"
-                label="Min"
-                inputRef={register({valueAsNumber: true})}
-              />
-            </Box>
-            <Box className={classes.narrowInput}>
-              <TextField
-                fullWidth
-                margin="dense"
-                name="max"
-                label="Max"
-                inputRef={register({valueAsNumber: true})}
-              />
-            </Box>
           </Box>
-          <Box mt={1} mb={1}>
-            <FormControl component="fieldset">
-              <RadioGroup row aria-label="value-type" name="type" value={type} onChange={toggleDiscrete}>
-                <Tooltip title="Values include non-integers">
-                  <FormControlLabel inputRef={register} value="continuous" control={<Radio />} label="Continuous" />
-                </Tooltip>
-                <Tooltip title="Values are only integers">
-                  <FormControlLabel inputRef={register} value="discrete" control={<Radio />} label="Discrete" />
-                </Tooltip>
-              </RadioGroup>
-            </FormControl>
+          <Box className={classes.narrowInput}>
+            <FormInputText
+              name="max"
+              control={control}
+              fullWidth
+              margin="dense"
+              label="Max"
+              transform={e => parseInt(e)}
+            />
           </Box>
-          <Button size="small" disabled={isDisabled} variant="outlined" type="submit">Add variable</Button>
-        </form>
-      </>
+        </Box>
+        <Box mt={1} mb={1}>
+          <FormControl component="fieldset">
+            <RadioGroup row aria-label="value-type" name="type" value={type} onChange={toggleDiscrete}>
+              <Tooltip title="Values include non-integers">
+                <FormControlLabel {...register("type")} value="continuous" control={<Radio />} label="Continuous" />
+              </Tooltip>
+              <Tooltip title="Values are only integers">
+                <FormControlLabel {...register("type")} value="discrete" control={<Radio />} label="Discrete" />
+              </Tooltip>
+            </RadioGroup>
+          </FormControl>
+        </Box>
+        <Button size="small" disabled={isDisabled} variant="outlined" type="submit">Add variable</Button>
+      </form>
+    </>
   )
 }

components/optimizer-configurator.tsx

@@ -1,70 +1,71 @@
-import { TextField } from '@material-ui/core'
-import { useForm } from 'react-hook-form';
-import { OptimizerConfig } from '../types/common';
-import { TitleCard } from './title-card/title-card';
+import { OptimizerConfig } from "../types/common";
+import { TitleCard } from "./title-card/title-card";
+import { TextField } from "@material-ui/core";
 
 type OptimizerConfiguratorProps = {
-  config: OptimizerConfig,
-  onConfigUpdated: (config: OptimizerConfig) => void,
-}
-
-export default function OptimizerConfigurator(props: OptimizerConfiguratorProps) {
-  const { config , onConfigUpdated} = props
-  const { register, getValues } = useForm<OptimizerConfig>()
+  config: OptimizerConfig;
+  onConfigUpdated: (config: OptimizerConfig) => void;
+};
 
-  const handleChange = () => {
-    onConfigUpdated(getValues() as OptimizerConfig)
-  }
+export default function OptimizerConfigurator(
+  props: OptimizerConfiguratorProps
+) {
+  const { config, onConfigUpdated } = props;
 
   return (
     <TitleCard title="Configuration">
       <TextField
+        name="baseEstimator"
         disabled
         fullWidth
         margin="dense"
         defaultValue={config.baseEstimator}
-        name="baseEstimator"
         label="Base estimator"
-        inputRef={register}
-        onChange={handleChange}
+        onChange={(e) =>
+          onConfigUpdated({ ...config, baseEstimator: e.target.value })
+        }
       />
       <TextField
+        name="acqFunc"
         disabled
         fullWidth
         margin="dense"
         defaultValue={config.acqFunc}
-        name="acqFunc"
         label="Acq func"
-        inputRef={register}
-        onChange={handleChange}
+        onChange={(e) =>
+          onConfigUpdated({ ...config, acqFunc: e.target.value })
+        }
       />
       <TextField
+        name="initialPoints"
         fullWidth
         margin="dense"
         defaultValue={config.initialPoints}
-        name="initialPoints"
         label="N initial points"
-        inputRef={register}
-        onChange={handleChange}
+        onChange={(e) =>
+          onConfigUpdated({ ...config, initialPoints: parseInt(e.target.value) })
+        }
       />
       <TextField
+        name="kappa"
         fullWidth
         margin="dense"
         defaultValue={config.kappa}
-        name="kappa"
         label="Kappa"
-        inputRef={register}
-        onChange={handleChange}
+        onChange={(e) =>
+          onConfigUpdated({ ...config, kappa: parseFloat(e.target.value) })
+        }
       />
       <TextField
+        name="xi"
         fullWidth
         margin="dense"
         defaultValue={config.xi}
-        name="xi"
         label="Xi"
-        inputRef={register}
-        onChange={handleChange}
+        onChange={(e) =>
+          onConfigUpdated({ ...config, xi: parseFloat(e.target.value) })
+        }
       />
     </TitleCard>
-  )
+  );
 }

jest.config.js

@@ -5,4 +5,5 @@ module.exports = {
   moduleNameMapper: {
     '\\.(scss|sass|css)$': 'identity-obj-proxy',
   },
+  testEnvironment: "jsdom"
 };