From 77ed01f7c7cbbf9cd1bec0ad66d1b36ef8c20dea Mon Sep 17 00:00:00 2001
From: Ben Whitmore <ben.whitmore0@gmail.com>
Date: Tue, 23 Mar 2021 20:45:22 +1300
Subject: [PATCH] refactor(form-builder): remove redundant code
---
.../src/components/FormTemplate.js | 261 ++++++------------
1 file changed, 77 insertions(+), 184 deletions(-)
diff --git a/app/components/component-submit/src/components/FormTemplate.js b/app/components/component-submit/src/components/FormTemplate.js
index dcdd6c90d7..f98350c1e2 100644
--- a/app/components/component-submit/src/components/FormTemplate.js
+++ b/app/components/component-submit/src/components/FormTemplate.js
@@ -1,8 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
-import { unescape, groupBy, isArray, get, set, cloneDeep } from 'lodash'
-import { FieldArray } from 'formik'
+import { unescape, get, set } from 'lodash'
import {
TextField,
RadioGroup,
@@ -133,100 +132,6 @@ const composeValidate = (vld = [], valueField = {}) => value => {
return errors.length > 0 ? errors[0] : undefined
}
-const groupElements = els => {
- // TODO is grouping ever used? Can we get rid of this function? Ordering is now redundant
- const grouped = groupBy(els, n => n.group || 'default')
-
- Object.keys(grouped).forEach(element => {
- grouped[element].sort(
- (obj1, obj2) =>
- parseInt(obj1.order || '0', 10) - parseInt(obj2.order || '0', 10),
- )
- })
-
- let startArr = grouped.default
- delete grouped.default
-
- Object.keys(grouped).forEach(element => {
- const order = grouped[element][0].order ?? '0'
- const first = startArr.findIndex(elem => elem.order === order)
- startArr = startArr
- .slice(0, first)
- .concat([grouped[element]])
- .concat(startArr.slice(first))
- })
- return startArr
-}
-
-const renderArray = (elementsComponentArray, onChange) => ({
- form: { values, setTouched },
- replace,
- name,
-}) =>
- get(values, name).map((elValues, index) => {
- const element = elementsComponentArray.find(elv =>
- Object.values(elValues).includes(elv.type),
- )
-
- return (
- <Section
- cssOverrides={JSON.parse(element.sectioncss || '{}')}
- key={`${element.id}`}
- >
- <Legend dangerouslySetInnerHTML={createMarkup(element.title)} />
- {/* <p>{JSON.stringify(values)}</p> */}
- <ValidatedFieldFormik
- {...rejectProps(element, [
- 'component',
- 'title',
- 'sectioncss',
- 'parse',
- 'format',
- 'validate',
- 'validateValue',
- 'description',
- 'order',
- 'value',
- 'shortDescription',
- ])}
- aria-label={element.shortDescription}
- component={elements[element.component]}
- data-testid={element.name}
- key={`notes-validate-${element.id}`}
- name={`${name}.${index}.content`}
- onChange={value => {
- const data = {
- notesType: element.type,
- content: value,
- }
-
- replace(index, data, `${name}.[${index}]`, true)
- const notes = cloneDeep(values)
- set(notes, `${name}.[${index}]`, data)
- onChange(notes.meta.notes, `${name}`)
- }}
- readonly={false}
- setTouched={setTouched}
- validate={composeValidate(element.validate, element.validateValue)}
- values={values}
- />
- <SubNote dangerouslySetInnerHTML={createMarkup(element.description)} />
- </Section>
- )
- })
-
-const ElementComponentArray = ({ elementsComponentArray, onChange }) => (
- <FieldArray
- name={elementsComponentArray[0].group}
- render={renderArray(elementsComponentArray, onChange)}
- />
-)
-
-ElementComponentArray.propTypes = {
- elementsComponentArray: PropTypes.arrayOf(PropTypes.object).isRequired,
- onChange: PropTypes.func.isRequired,
-}
-
const FormTemplate = ({
form,
handleSubmit,
@@ -278,95 +183,83 @@ const FormTemplate = ({
)}
/>
<form onSubmit={handleSubmit}>
- {groupElements(form.children || []).map((element, i) =>
- !isArray(element) ? (
- <Section
- cssOverrides={JSON.parse(element.sectioncss || '{}')}
- key={`${element.id}`}
- >
- {/* <p>{JSON.stringify(element)}</p> */}
- <Legend dangerouslySetInnerHTML={createMarkup(element.title)} />
- {element.component === 'SupplementaryFiles' && (
- <FilesUpload
- containerId={manuscript.id}
- containerName="manuscript"
- fileType="supplementary"
- onChange={onChange}
- />
- )}
- {element.component === 'VisualAbstract' && (
- <FilesUpload
- accept="image/*"
- containerId={manuscript.id}
- containerName="manuscript"
- fileType="visualAbstract"
- multiple={false}
- onChange={onChange}
+ {(form.children || []).map((element, i) => (
+ <Section
+ cssOverrides={JSON.parse(element.sectioncss || '{}')}
+ key={`${element.id}`}
+ >
+ <Legend dangerouslySetInnerHTML={createMarkup(element.title)} />
+ {element.component === 'SupplementaryFiles' && (
+ <FilesUpload
+ containerId={manuscript.id}
+ containerName="manuscript"
+ fileType="supplementary"
+ onChange={onChange}
+ />
+ )}
+ {element.component === 'VisualAbstract' && (
+ <FilesUpload
+ accept="image/*"
+ containerId={manuscript.id}
+ containerName="manuscript"
+ fileType="visualAbstract"
+ multiple={false}
+ onChange={onChange}
+ />
+ )}
+ {element.component === 'AuthorsInput' && (
+ <AuthorsInput data-testid={element.name} onChange={onChange} />
+ )}
+ {element.component !== 'AuthorsInput' &&
+ element.component !== 'SupplementaryFiles' &&
+ element.component !== 'VisualAbstract' && (
+ <ValidatedFieldFormik
+ aria-label={element.placeholder || element.title}
+ component={elements[element.component]}
+ data-testid={element.name} // TODO: Improve this
+ key={`validate-${element.id}`}
+ name={element.name}
+ onChange={value => {
+ // TODO: Perhaps split components remove conditions here
+ let val
+
+ if (value.target) {
+ val = value.target.value
+ } else if (value.value) {
+ val = value.value
+ } else {
+ val = value
+ }
+
+ setFieldValue(element.name, val, true)
+ onChange(val, element.name)
+ }}
+ readonly={false}
+ setTouched={setTouched}
+ {...rejectProps(element, [
+ 'component',
+ 'title',
+ 'sectioncss',
+ 'parse',
+ 'format',
+ 'validate',
+ 'validateValue',
+ 'description',
+ 'shortDescription',
+ 'order',
+ ])}
+ validate={composeValidate(
+ element.validate,
+ element.validateValue,
+ )}
+ values={values}
/>
)}
- {element.component === 'AuthorsInput' && (
- <AuthorsInput data-testid={element.name} onChange={onChange} />
- )}
- {element.component !== 'AuthorsInput' &&
- element.component !== 'SupplementaryFiles' &&
- element.component !== 'VisualAbstract' && (
- <ValidatedFieldFormik
- aria-label={element.placeholder || element.title}
- component={elements[element.component]}
- data-testid={element.name} // TODO: Improve this
- key={`validate-${element.id}`}
- name={element.name}
- onChange={value => {
- // TODO: Perhaps split components remove conditions here
- let val
-
- if (value.target) {
- val = value.target.value
- } else if (value.value) {
- val = value.value
- } else {
- val = value
- }
-
- setFieldValue(element.name, val, true)
- onChange(val, element.name)
- }}
- readonly={false}
- setTouched={setTouched}
- {...rejectProps(element, [
- 'component',
- 'title',
- 'sectioncss',
- 'parse',
- 'format',
- 'validate',
- 'validateValue',
- 'description',
- 'shortDescription',
- 'order',
- ])}
- validate={composeValidate(
- element.validate,
- element.validateValue,
- )}
- values={values}
- />
- )}
- <SubNote
- dangerouslySetInnerHTML={createMarkup(element.description)}
- />
- </Section>
- ) : (
- <ElementComponentArray
- elementsComponentArray={element}
- // eslint-disable-next-line
- key={i}
- onChange={onChange}
- setFieldValue={setFieldValue}
- setTouched={setTouched}
+ <SubNote
+ dangerouslySetInnerHTML={createMarkup(element.description)}
/>
- ),
- )}
+ </Section>
+ ))}
{filterFileManuscript(values.files || []).length > 0 ? (
<Section id="files.manuscript">
@@ -430,8 +323,8 @@ FormTemplate.propTypes = {
),
}).isRequired,
).isRequired,
- popuptitle: PropTypes.string.isRequired,
- popupdescription: PropTypes.string.isRequired,
+ popuptitle: PropTypes.string,
+ popupdescription: PropTypes.string,
haspopup: PropTypes.string.isRequired, // bool as string
}).isRequired,
handleSubmit: PropTypes.func.isRequired,
--
GitLab