diff --git a/frontend-v2/src/features/drug/Drug.tsx b/frontend-v2/src/features/drug/Drug.tsx index 6b4ba9a1..72b2b141 100644 --- a/frontend-v2/src/features/drug/Drug.tsx +++ b/frontend-v2/src/features/drug/Drug.tsx @@ -24,7 +24,7 @@ import { useProjectRetrieveQuery, useUnitListQuery, } from "../../app/backendApi"; -import { useFieldArray, useForm } from "react-hook-form"; +import { useFieldArray, useForm, useFormState } from "react-hook-form"; import FloatField from "../../components/FloatField"; import UnitField from "../../components/UnitField"; import { FC, useEffect, useMemo, useState } from "react"; @@ -39,6 +39,7 @@ import Delete from "@mui/icons-material/Delete"; import { decrementDirtyCount, incrementDirtyCount } from "../main/mainSlice"; import AddCircleOutlineOutlinedIcon from "@mui/icons-material/AddCircleOutlineOutlined"; import { getTableHeight } from "../../shared/calculateTableHeights"; +import useDirty from "../../hooks/useDirty"; export const DOUBLE_TABLE_SECOND_BREAKPOINTS = [ { @@ -103,6 +104,8 @@ const Drug: FC = () => { efficacy_experiments: [], }, }); + const { isDirty } = useFormState({ control }); + useDirty(isDirty); const { fields: efficacy_experiments, @@ -157,9 +160,15 @@ const Drug: FC = () => { [compound, handleSubmit, updateCompound], ); + useEffect(() => { + if (isDirty) { + submit(); + } + }, [isDirty, submit]); + useEffect(() => { submit(); - }, [efficacy_experiments?.length]); + }, [efficacy_experiments?.length, submit]); const addNewEfficacyExperiment = () => { append([ @@ -359,7 +368,7 @@ const Drug: FC = () => { {isEditIndex === index ? ( { {isEditIndex === index ? ( { ) : ( {units.find( - (u) => u.id === getValues(`efficacy_experiments.${index}.c50_unit`), - )?.symbol || - "-"} + (u) => + u.id === + getValues(`efficacy_experiments.${index}.c50_unit`), + )?.symbol || "-"} )} @@ -417,7 +427,7 @@ const Drug: FC = () => { {isEditIndex === index ? (