Feature/widget validation

cogboard-webapp/src/components/AddWidget.js

@@ -17,17 +17,18 @@ const AddWidget = ({ closeDialog }) => {
   const currentBoardId = useSelector(({ ui }) => ui.currentBoard);
   const dispatch = useDispatch();
 
-  const handleAddClick = (values) => () => {
+  const handleAddWidget = (values) => {
     dispatch(addNewWidget({ currentBoardId, values }));
     closeDialog();
   };
 
   return (
     <WidgetForm
-      renderActions={values =>
+      handleSubmit={handleAddWidget}
+      renderActions={() =>
         <>
           <Button
-            onClick={handleAddClick(values)}
+            type="submit"
             color="primary"
             variant="contained"
             data-cy="widget-form-submit-button"

cogboard-webapp/src/components/BoardForm/index.js

@@ -2,93 +2,42 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { string, number, bool } from 'prop-types';
 
-import { FormControl, FormControlLabel, Switch, TextField } from '@material-ui/core';
-import { StyledFieldset, StyledValidationMessages } from './styled';
 import { useFormData } from '../../hooks';
 import { getBoards } from '../../selectors';
-import { createValidationSchema } from './validators';
-import { trimLeadingZeros } from '../helpers';
+import { createValidationSchema } from '../validation';
+import DynamicForm from '../DynamicForm';
+
+import { BOARD_TITLE_LENGTH_LIMIT, BOARD_COLUMNS_MIN, BOARD_COLUMNS_MAX, SWITCH_INTERVAL_MIN } from '../../constants';
 
 const BoardForm = ({ onSubmit, renderActions, boardId, ...initialFormValues }) => {
   const boards = useSelector(getBoards);
-  const validationSchema = createValidationSchema(boardId, boards)
-  const {values, handleChange, handleSubmit, errors} = useFormData(initialFormValues, validationSchema, true);
+  const formFields = ['UniqueTitleField', 'ColumnField', 'AutoSwitchField', 'SwitchInterval'];
+  const constraints = {
+    'UniqueTitleField' : {
+      max: BOARD_TITLE_LENGTH_LIMIT,
+      boardId: boardId,
+      boards: boards,
+    },
+    'ColumnField': {
+      min: BOARD_COLUMNS_MIN,
+      max: BOARD_COLUMNS_MAX,
+    },
+    'SwitchInterval': {
+      min: SWITCH_INTERVAL_MIN,
+    }
+  };
+  const validationSchema = createValidationSchema(formFields, constraints);
+  const {values, handleChange, withValidation, errors} = useFormData(initialFormValues, {initialSchema: validationSchema, onChange: true});
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)} novalidate="novalidate">
-      <StyledFieldset component="fieldset">
-        <TextField
-          onChange={handleChange('title')}
-          id="title"
-          InputLabelProps={{
-            shrink: true
-          }}
-          label="Title"
-          margin="normal"
-          value={values.title}
-          error={errors.title}
-          helperText={
-            <StyledValidationMessages
-              messages={errors.title}
-              data-cy={'board-form-title-error'}
-            />}
-          inputProps={{'data-cy': 'board-form-title-input'}}
-        />
-        <TextField
-          onChange={handleChange('columns')}
-          onInput={trimLeadingZeros}
-          id="columns"
-          InputLabelProps={{
-            shrink: true
-          }}
-          inputProps={{'data-cy': 'board-form-columns-input'}}
-          label="Columns"
-          margin="normal"
-          value={values.columns}
-          type="number"
-          error={errors.columns}
-          helperText={
-            <StyledValidationMessages
-              messages={errors.columns}
-              data-cy='board-form-columns-error'
-            />}
-        />
-        <FormControl margin="normal">
-          <FormControlLabel
-            control={
-              <Switch
-                onChange={handleChange('autoSwitch')}
-                checked={values.autoSwitch}
-                color="primary"
-                value="autoSwitch"
-                inputProps={{'data-cy': 'board-form-auto-switch-checkbox'}}
-              />
-            }
-            label="Auto switch"
-          />
-        </FormControl>
-        {values.autoSwitch &&
-          <TextField
-            onChange={handleChange('switchInterval')}
-            onInput={trimLeadingZeros}
-            id="switchInterval"
-            InputLabelProps={{
-              shrink: true
-            }}
-            label="Switch interval [s]"
-            margin="normal"
-            value={values.switchInterval}
-            type="number"
-            error={errors.switchInterval}
-            helperText={
-              <StyledValidationMessages
-                messages={errors.switchInterval}
-                data-cy='board-form-switch-interval-error'
-              />}
-            inputProps={{'data-cy': 'board-form-switch-interval-input'}}
-          />
-        }
-      </StyledFieldset>
+    <form onSubmit={withValidation(onSubmit)} noValidate="novalidate">
+      <DynamicForm 
+        fields={formFields} 
+        values={values} 
+        handleChange={handleChange} 
+        errors={errors}
+        rootName='board-form'
+      />
       {renderActions()}
     </form>
   );

cogboard-webapp/src/components/EditWidget.js

@@ -17,18 +17,19 @@ const EditWidget = ({ closeDialog, id, widgetTypeData, ...widgetData }) => {
   const initialFormValues = { ...widgetData, ...widgetTypeData };
   const dispatch = useDispatch();
 
-  const handleSaveClick = (values) => () => {
+  const handleEditWidget = (values) => {
     dispatch(saveWidget({ id, values }));
     closeDialog();
   };
 
   return (
     <WidgetForm
+      handleSubmit={handleEditWidget}
       {...initialFormValues}
-      renderActions={values =>
+      renderActions={() =>
         <>
           <Button
-            onClick={handleSaveClick(values)}
+            type="submit"
             color="primary"
             variant="contained"
             data-cy="widget-form-submit-button"

cogboard-webapp/src/components/ValidationMessages.js

@@ -10,8 +10,8 @@ const ValidationMessages = ({className, messages, ...others}) => {
   return (
     <ul className={className} {...others}>
       {
-        messages.map(message => 
-            <li>{message}</li>)
+        messages.map((message, index) => 
+            <li key={index}>{message}</li>)
       }
     </ul> 
   );