refactor logic to use <form>

This commit is contained in:
Ed Chalstrey 2022-06-06 09:52:50 +01:00
parent 2b24d49333
commit e48414d647

View File

@ -18,8 +18,9 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
const building = props.building; const building = props.building;
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
const currentBuildingConstructionYear = building.date_year || undefined; const currentBuildingConstructionYear = building.date_year || undefined;
if (props.building.is_extension == "The main building"){
return ( return (
<form>
{this.props.building.is_extension == "The main building" ? (
<Fragment> <Fragment>
<InfoBox msg="Can you help us capture information on who built the current building?"></InfoBox> <InfoBox msg="Can you help us capture information on who built the current building?"></InfoBox>
<SelectDataEntry <SelectDataEntry
@ -112,102 +113,102 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
mode={props.mode} mode={props.mode}
/> />
</Fragment> </Fragment>
); ) : (
}; <Fragment>
return ( // This is what gets used when is_extension == "A major extension" <InfoBox msg="Can you help us capture information on who built the building extension?"></InfoBox>
<Fragment> <SelectDataEntry
<InfoBox msg="Can you help us capture information on who built the building extension?"></InfoBox> title={dataFields.is_extension.title}
<SelectDataEntry slug="is_extension"
title={dataFields.is_extension.title} value={props.building.is_extension}
slug="is_extension" mode={props.mode}
value={props.building.is_extension} copy={props.copy}
mode={props.mode} onChange={props.onChange}
copy={props.copy} tooltip={dataFields.is_extension.tooltip}
onChange={props.onChange} placeholder={dataFields.is_extension.example}
tooltip={dataFields.is_extension.tooltip} options={dataFields.is_extension.items}
placeholder={dataFields.is_extension.example} />
options={dataFields.is_extension.items}
<NumericDataEntry
slug='extension_year'
title={dataFields.extension_year.title}
value={props.building.extension_year}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
step={1}
min={1}
max={currentYear}
tooltip={dataFields.extension_year.tooltip_extension}
/> />
<Verification
<NumericDataEntry slug="extension_year"
slug='extension_year' allow_verify={props.user !== undefined && props.building.extension_year !== null && !props.edited}
title={dataFields.extension_year.title} onVerify={props.onVerify}
value={props.building.extension_year} user_verified={props.user_verified.hasOwnProperty("extension_year")}
mode={props.mode} user_verified_as={props.user_verified.extension_year}
copy={props.copy} verified_count={props.building.verified.extension_year}
onChange={props.onChange} />
step={1} <SelectDataEntry
min={1} slug='developer_type'
max={currentYear} title={dataFields.developer_type.title}
tooltip={dataFields.extension_year.tooltip_extension} value={props.building.developer_type}
/> options={dataFields.developer_type.items}
<Verification onChange={props.onChange}
slug="extension_year" mode={props.mode}
allow_verify={props.user !== undefined && props.building.extension_year !== null && !props.edited} copy={props.copy}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("extension_year")}
user_verified_as={props.user_verified.extension_year}
verified_count={props.building.verified.extension_year}
/> />
<SelectDataEntry <MultiDataEntry
slug='developer_type' title={dataFields.designers.title}
title={dataFields.developer_type.title} slug="designers"
value={props.building.developer_type} value={props.building.designers}
options={dataFields.developer_type.items} mode={props.mode}
onChange={props.onChange} copy={props.copy}
mode={props.mode} onChange={props.onChange}
copy={props.copy} tooltip={dataFields.designers.tooltip}
/> editableEntries={true}
<MultiDataEntry maxLength={747}
title={dataFields.designers.title} />
slug="designers" <Verification
value={props.building.designers} slug="designers"
mode={props.mode} allow_verify={props.user !== undefined && props.building.designers !== null && !props.edited}
copy={props.copy} onVerify={props.onVerify}
onChange={props.onChange} user_verified={props.user_verified.hasOwnProperty("designers")}
tooltip={dataFields.designers.tooltip} user_verified_as={props.user_verified.designers}
editableEntries={true} verified_count={props.building.verified.designers}
maxLength={747} />
<MultiDataEntry
title={dataFields.designers_source_link.title}
slug="designers_source_link"
value={props.building.designers_source_link}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
tooltip={dataFields.designers_source_link.tooltip}
placeholder="https://..."
editableEntries={true}
/>
<SelectDataEntry
slug='lead_designer_type'
title={dataFields.lead_designer_type.title}
value={props.building.lead_designer_type}
options={dataFields.lead_designer_type.items}
onChange={props.onChange}
mode={props.mode}
copy={props.copy}
/> />
<Verification <LogicalDataEntry
slug="designers" slug='designer_awards'
allow_verify={props.user !== undefined && props.building.designers !== null && !props.edited} title={dataFields.designer_awards.title}
onVerify={props.onVerify} tooltip={dataFields.designer_awards.tooltip}
user_verified={props.user_verified.hasOwnProperty("designers")} value={props.building.designer_awards}
user_verified_as={props.user_verified.designers}
verified_count={props.building.verified.designers}
/>
<MultiDataEntry
title={dataFields.designers_source_link.title}
slug="designers_source_link"
value={props.building.designers_source_link}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
tooltip={dataFields.designers_source_link.tooltip}
placeholder="https://..."
editableEntries={true}
/>
<SelectDataEntry
slug='lead_designer_type'
title={dataFields.lead_designer_type.title}
value={props.building.lead_designer_type}
options={dataFields.lead_designer_type.items}
onChange={props.onChange}
mode={props.mode}
copy={props.copy}
/>
<LogicalDataEntry
slug='designer_awards'
title={dataFields.designer_awards.title}
tooltip={dataFields.designer_awards.tooltip}
value={props.building.designer_awards}
onChange={props.onChange} onChange={props.onChange}
mode={props.mode} mode={props.mode}
/> />
</Fragment> </Fragment>
); )}
</form>
);
}; };
const TeamContainer = withCopyEdit(TeamView); const TeamContainer = withCopyEdit(TeamView);