fix: quick fix for validations in form builder

app/components/component-xpub-formbuilder/src/components/ComponentProperties.jsx

@@ -50,7 +50,7 @@ const ComponentProperties = ({
       </Section>
       {selectComponentValue &&
         map(components[selectComponentValue], (value, key) => (
-          <Section>
+          <Section key={key}>
             <Legend space>{`Field ${key}`}</Legend>
             <ValidatedFieldFormik
               component={elements[value.component].default}

app/components/component-xpub-formbuilder/src/components/FormBuilder.jsx

-import React from 'react'
+import React, { useState } from 'react'
 import {
   compose,
   withState,
@@ -30,9 +30,9 @@ const Status = styled.div`
   display: inline-flex;
 `
 
-const StatusIdle = styled(Status).attrs({
-  children: () => <StatusIcon>plus_circle</StatusIcon>,
-})``
+const StatusIdle = styled(Status).attrs(props => ({
+  children: <StatusIcon>plus_circle</StatusIcon>,
+}))``
 
 const Root = styled.div`
   display: flex;
@@ -91,12 +91,12 @@ const BuilderElement = ({ elements, changeProperties, deleteElement, form }) =>
     </Element>
   ))
 
-const AddButtonElement = ({ addElements }) => (
+const AddButtonElement = ({ addElement }) => (
   <Root>
     <Main>
       <Action
         onClick={() =>
-          addElements({
+          addElement({
             title: 'New Component',
             id: `${Date.now()}`,
           })
@@ -111,46 +111,57 @@ const AddButtonElement = ({ addElements }) => (
 
 const FormBuilder = ({
   form,
-  elements,
-  addElements,
+  // elements,
+  // addElements,
   changeProperties,
   deleteElement,
-}) => (
-  <Page>
-    <AddButtonElement addElements={addElements} form={form} id="add-element" />
-    {elements && elements.length > 0 && (
-      <BuilderElement
-        changeProperties={changeProperties}
-        deleteElement={deleteElement}
-        elements={elements}
-        form={form}
-        id="builder-element"
-      />
-    )}
-  </Page>
-)
-
-FormBuilder.displayName = 'FormBuilder'
-
-export default compose(
-  withState('elements', 'onAddElements', ({ form }) => form.children || []),
-  withHandlers({
-    addElements: ({ onAddElements, form }) => addElement =>
-      onAddElements(() => {
-        const addEl = { children: form.children || [] }
-        addEl.children = [...addEl.children, addElement]
-        return addEl.children
-      }),
-  }),
-  lifecycle({
-    componentWillReceiveProps(nextProps) {
-      if (this.props.form.children !== nextProps.form.children) {
-        this.setState({ elements: nextProps.form.children })
-      }
-
-      if (this.props.elements !== nextProps.elements) {
-        this.setState({ elements: nextProps.elements })
-      }
-    },
-  }),
-)(FormBuilder)
+}) => {
+  const [elements, setElements] = useState(form.children || [])
+  const addElement = element => {
+    setElements([...elements, element])
+  }
+  // const addElements = useCallback(() => {
+
+  // })
+
+  return (
+    <Page>
+      <AddButtonElement addElement={addElement} form={form} id="add-element" />
+      {elements && elements.length > 0 && (
+        <BuilderElement
+          changeProperties={changeProperties}
+          deleteElement={deleteElement}
+          elements={elements}
+          form={form}
+          id="builder-element"
+        />
+      )}
+    </Page>
+  )
+}
+
+export default FormBuilder
+// FormBuilder.displayName = 'FormBuilder'
+
+// export default compose(
+// withState('elements', 'onAddElements', ({ form }) => form.children || []),
+// withHandlers({
+//   addElements: ({ onAddElements, form }) => addElement =>
+//     onAddElements(() => {
+//       const addEl = { children: form.children || [] }
+//       addEl.children = [...addEl.children, addElement]
+//       return addEl.children
+//     }),
+// }),
+// lifecycle({
+//   componentWillReceiveProps(nextProps) {
+//     if (this.props.form.children !== nextProps.form.children) {
+//       this.setState({ elements: nextProps.form.children })
+//     }
+
+//     if (this.props.elements !== nextProps.elements) {
+//       this.setState({ elements: nextProps.elements })
+//     }
+//   },
+// }),
+// )(FormBuilder)

app/components/component-xpub-formbuilder/src/components/builderComponents/Menu.js

 import React, { useState } from 'react'
 import { Select, TextField, ValidatedFieldFormik } from '@pubsweet/ui'
-import { compose, withState, withHandlers } from 'recompose'
+// import { compose, withState, withHandlers } from 'recompose'
 import { Legend, Section } from '../styles'
 
-const ValidationMenu = input => {
-  const [validations, setValidations] = useState()
+const ValidationMenu = input => (
+  // const validations = useState([])
 
-  return (
-    <div>
-      <Select
-        {...input}
-        onChange={value => setValidations(value)}
-        selectElement={value => {
-          input.onSelectElement(value)
-        }}
-      />
-      {
-        // the actual value is an object with:
-        // [{"value":"minSize","label":"minSize"},{"value":"minChars","label":"minimum Characters"},{"value":"maxChars","label":"maximum Characters"}]"
+  <>
+    <Select
+      {...input}
+      // onChange={select => input.onChange(select.map(s => s.value))}
+      // onChange={select => setValidations(select.map(s => s.value))}
+    />
+
+    {((Array.isArray(input.value) && input.value) || []).map(validation => {
+      if (validation.value !== 'required') {
+        return (
+          <Section key={validation.value}>
+            <Legend space>{validation.label} value</Legend>
+            <ValidatedFieldFormik
+              component={TextField}
+              name={`validateValue.${validation.value}`}
+            />
+          </Section>
+        )
       }
-      {validations && validations !== 'required' && (
-        <Section>
-          <Legend space>Field Min / Max</Legend>
-          <ValidatedFieldFormik
-            component={TextField}
-            name={`validateValue.${input.selectelement}`}
-          />
-        </Section>
-      )}
-    </div>
-  )
-}
+      return null
+    })}
+  </>
+)
 
-export default compose(
-  withState('selectelement', 'changeSelect', undefined),
-  withHandlers({
-    onSelectElement: ({ changeSelect }) => value => changeSelect(() => value),
-  }),
-)(ValidationMenu)
+export default ValidationMenu
+// export default compose(
+//   withState('selectelement', 'changeSelect', undefined),
+//   withHandlers({
+//     onSelectElement: ({ changeSelect }) => value => changeSelect(() => value),
+//   }),
+// )(ValidationMenu)