diff --git a/sites/partners/src/components/listings/PaperListingForm/UnitForm.tsx b/sites/partners/src/components/listings/PaperListingForm/UnitForm.tsx index 0567711e00..5f828db423 100644 --- a/sites/partners/src/components/listings/PaperListingForm/UnitForm.tsx +++ b/sites/partners/src/components/listings/PaperListingForm/UnitForm.tsx @@ -37,11 +37,10 @@ type UnitFormProps = { const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormProps) => { const { amiChartsService } = useContext(AuthContext) - const [options, setOptions] = useState({ - amiCharts: [], - unitPriorities: [], - unitTypes: [], - }) + const [amiChartsOptions, setAmiChartsOptions] = useState([]) + const [unitPrioritiesOptions, setUnitPrioritiesOptions] = useState([]) + const [unitTypesOptions, setUnitTypesOptions] = useState([]) + const [isAmiPercentageDirty, setIsAmiPercentageDirty] = useState(false) const [loading, setLoading] = useState(true) const [currentAmiChart, setCurrentAmiChart] = useState(null) const [amiChartPercentageOptions, setAmiChartPercentageOptions] = useState([]) @@ -181,11 +180,25 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro } useEffect(() => { - if (amiPercentage && !loading && options) { + if ( + amiPercentage && + !loading && + amiChartsOptions && + unitPrioritiesOptions && + unitTypesOptions && + isAmiPercentageDirty + ) { resetAmiTableValues() } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [amiPercentage]) + }, [amiPercentage, amiChartPercentageOptions, isAmiPercentageDirty]) + + useEffect(() => { + if (defaultUnit && !amiPercentage) { + setValue("amiPercentage", defaultUnit.amiPercentage) + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [amiChartPercentageOptions]) type FormSubmitAction = "saveNew" | "saveExit" | "save" @@ -312,47 +325,16 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro }, ] + // sets the unit type to be the value from default + // after the unitType options are set useEffect(() => { - if (amiCharts.length === 0 || options.amiCharts.length) return - setOptions({ - ...options, - amiCharts: arrayToFormOptions(amiCharts, "name", "id"), - }) - }, [amiCharts, options]) - - useEffect(() => { - if (unitPriorities.length === 0 || options.unitPriorities.length) return - setOptions({ - ...options, - unitPriorities: arrayToFormOptions( - unitPriorities, - "name", - "id" - ), - }) - }, [options, unitPriorities]) - - useEffect(() => { - if (unitTypes.length === 0 || options.unitTypes.length) return - setOptions({ - ...options, - unitTypes: arrayToFormOptions(unitTypes, "name", "id", "listings.unit.typeOptions"), - }) - }, [options, unitTypes]) - - useEffect(() => { - if (defaultUnit) { - setValue("amiChart.id", defaultUnit.amiChart?.id) - setValue("priorityType.id", defaultUnit.priorityType?.id) - } - }, [defaultUnit, setValue]) - - useEffect(() => { - if (defaultUnit && options.unitTypes) { + if (defaultUnit && unitTypesOptions) { setValue("unitType.id", defaultUnit.unitType?.id) } - }, [defaultUnit, options, setValue]) + }, [defaultUnit, unitTypesOptions, setValue]) + // when rent type is updated we set the rent/income data to defaultUnit data for that value + // e.g. rent is fixed and swithced to percentage, then switched back we readd the old fixed data useEffect(() => { if (defaultUnit) { if (rentType === "fixed") { @@ -365,6 +347,28 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro // eslint-disable-next-line react-hooks/exhaustive-deps }, [rentType]) + // sets the options for the ami charts + useEffect(() => { + if (amiCharts.length === 0 || amiChartsOptions.length) return + setAmiChartsOptions(arrayToFormOptions(amiCharts, "name", "id")) + }, [amiCharts, amiChartsOptions]) + + // sets the options for the unit priorities + useEffect(() => { + if (unitPriorities.length === 0 || unitPrioritiesOptions.length) return + setUnitPrioritiesOptions( + arrayToFormOptions(unitPriorities, "name", "id") + ) + }, [unitPrioritiesOptions, unitPriorities, defaultUnit, setValue]) + + // sets the options for the unit types + useEffect(() => { + if (unitTypes.length === 0 || unitTypesOptions.length) return + setUnitTypesOptions( + arrayToFormOptions(unitTypes, "name", "id", "listings.unit.typeOptions") + ) + }, [unitTypesOptions, unitTypes]) + return (
false}>
@@ -392,7 +396,7 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro labelClassName="sr-only" register={register} controlClassName="control" - options={options.unitTypes} + options={unitTypesOptions} error={fieldHasError(errors?.unitType)} errorMessage={t("errors.requiredFieldError")} validation={{ required: true }} @@ -501,11 +505,12 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro labelClassName="sr-only" register={register} controlClassName="control" - options={options.amiCharts} + options={amiChartsOptions} inputProps={{ onChange: () => { - if (amiChartID && !loading && options) { + if (amiChartID && !loading && amiChartsOptions) { void fetchAmiChart() + setIsAmiPercentageDirty(true) } }, }} @@ -522,6 +527,11 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro register={register} controlClassName="control" options={amiChartPercentageOptions} + inputProps={{ + onChange: () => { + setIsAmiPercentageDirty(true) + }, + }} /> @@ -613,7 +623,7 @@ const UnitForm = ({ onSubmit, onClose, defaultUnit, nextId, draft }: UnitFormPro labelClassName="sr-only" register={register} controlClassName="control" - options={options.unitPriorities} + options={unitPrioritiesOptions} />