Form refactoring (#142)

app/javascript/components/SiteSettings/Boards/BoardForm.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useForm, SubmitHandler } from 'react-hook-form';
 import I18n from 'i18n-js';
 
 import Button from '../../common/Button';
@@ -10,7 +11,7 @@ interface Props {
   name?: string;
   description?: string;
 
-  handleSubmit?(
+  handleCreate?(
     name: string,
     description: string,
     onSuccess: Function,
@@ -22,101 +23,75 @@ interface Props {
   ): void;
 }
 
-interface State {
+interface IBoardForm {
   name: string;
   description: string;
 }
 
-class BoardForm extends React.Component<Props, State> {
-  initialState: State = {
-    name: '',
-    description: '',
-  };
+const BoardForm = ({
+  mode,
+  id,
+  name,
+  description,
+  handleCreate,
+  handleUpdate,
+}: Props) => {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { isValid },
+  } = useForm<IBoardForm>({
+    mode: 'onChange',
+    defaultValues: {
+      name: name || '',
+      description: description || '',
+    },
+  });
 
-  constructor(props: Props) {
-    super(props);
-
-    this.state = this.props.mode === 'create' ?
-      this.initialState
-      :
-      {
-        name: this.props.name,
-        description: this.props.description,
-      };
-
-    this.onSubmit = this.onSubmit.bind(this);
-  }
-
-  isFormValid() {
-    return this.state.name && this.state.name.length > 0;
-  }
-
-  onNameChange(nameText: string) {
-    this.setState({
-      name: nameText,
-    });
-  }
-
-  onDescriptionChange(descriptionText: string) {
-    this.setState({
-      description: descriptionText,
-    });
-  }
-
-  onSubmit() {
-    if (this.props.mode === 'create') {
-      this.props.handleSubmit(
-        this.state.name,
-        this.state.description,
-        () => this.setState({...this.initialState}),
+  const onSubmit: SubmitHandler<IBoardForm> = data => {
+    if (mode === 'create') {
+      handleCreate(
+        data.name,
+        data.description,
+        () => reset({ name: '', description: '' })
       );
     } else {
-      this.props.handleUpdate(this.props.id, this.state.name, this.state.description);
+      handleUpdate(id, data.name, data.description);
     }
   }
 
-  render() {
-    const {mode} = this.props;
-    const {name, description} = this.state;
-
-    return (
-      <form className="boardForm">
-        <div className="boardMandatoryForm">
-          <input
-            type="text"
-            placeholder={I18n.t('site_settings.boards.form.name')}
-            value={name}
-            onChange={e => this.onNameChange(e.target.value)}
-            autoFocus
-            className="form-control"
-          />
-
-          <Button
-            onClick={e => {
-              e.preventDefault();
-              this.onSubmit();
-            }}
-            className="newBoardButton"
-            disabled={!this.isFormValid()}
-          >
-            {
-              mode === 'create' ?
-                I18n.t('common.buttons.create')
-              :
-                I18n.t('common.buttons.update')
-            }
-          </Button>
-        </div>
-        
-        <textarea
-          placeholder={I18n.t('site_settings.boards.form.description')}
-          value={description}
-          onChange={e => this.onDescriptionChange(e.target.value)}
-          className="form-control"
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="boardForm">
+      <div className="boardMandatoryForm">
+        <input
+          {...register('name', { required: true })}
+          placeholder={I18n.t('site_settings.boards.form.name')}
+          autoFocus
+          className="formControl"
         />
-      </form>
-    );
-  }
+
+        <Button
+          onClick={() => null}
+          className="newBoardButton"
+          disabled={!isValid}
+        >
+          {
+            mode === 'create' ?
+              I18n.t('common.buttons.create')
+            :
+              I18n.t('common.buttons.update')
+          }
+        </Button>
+      </div>
+      
+      <textarea
+        {...register('description')}
+        placeholder={I18n.t('site_settings.boards.form.description')}
+        className="formControl"
+      />
+    </form>
+  );
 }
 
 export default BoardForm;