129 lines
3.4 KiB
JavaScript
129 lines
3.4 KiB
JavaScript
import * as React from 'react';
|
|
import { useFormContext } from 'react-hook-form';
|
|
import set from 'lodash/set';
|
|
import first from 'lodash/first';
|
|
import last from 'lodash/last';
|
|
import { useMutation } from '@tanstack/react-query';
|
|
import isEqual from 'lodash/isEqual';
|
|
|
|
import api from 'helpers/api';
|
|
import useFieldEntryContext from './useFieldEntryContext';
|
|
|
|
const variableRegExp = /({.*?})/;
|
|
|
|
function computeArguments(args, getValues, fieldEntryPaths) {
|
|
const initialValue = {};
|
|
|
|
return args.reduce((result, { name, value }) => {
|
|
const isVariable = variableRegExp.test(value);
|
|
|
|
if (isVariable) {
|
|
const fieldsEntryPath = last(fieldEntryPaths);
|
|
const outerFieldsEntryPath = first(fieldEntryPaths);
|
|
|
|
const sanitizedFieldPath = value
|
|
.replace(/{|}/g, '')
|
|
.replace('fieldsScope.', `${fieldsEntryPath}.`)
|
|
.replace('outerScope.', `${outerFieldsEntryPath}.`);
|
|
|
|
const computedValue = getValues(sanitizedFieldPath);
|
|
|
|
if (computedValue === undefined)
|
|
throw new Error(`The ${sanitizedFieldPath} field is required.`);
|
|
|
|
set(result, name, computedValue);
|
|
|
|
return result;
|
|
}
|
|
|
|
set(result, name, value);
|
|
return result;
|
|
}, initialValue);
|
|
}
|
|
/**
|
|
* Fetch the dynamic data for the given step.
|
|
* This hook must be within a react-hook-form context.
|
|
*
|
|
* @param stepId - the id of the step
|
|
* @param schema - the field that needs the dynamic data
|
|
*/
|
|
function useDynamicData(stepId, schema) {
|
|
const lastComputedVariables = React.useRef({});
|
|
|
|
const {
|
|
data,
|
|
isPending: isDynamicDataPending,
|
|
mutate: getDynamicData,
|
|
} = useMutation({
|
|
mutationFn: async (variables) => {
|
|
const { data } = await api.post(
|
|
`/v1/steps/${stepId}/dynamic-data`,
|
|
variables,
|
|
);
|
|
|
|
return data;
|
|
},
|
|
});
|
|
|
|
const { getValues } = useFormContext();
|
|
const { fieldEntryPaths } = useFieldEntryContext();
|
|
const formValues = getValues();
|
|
|
|
/**
|
|
* Return `null` when even a field is missing value.
|
|
*
|
|
* This must return the same reference if no computed variable is changed.
|
|
* Otherwise, it causes redundant network request!
|
|
*/
|
|
const computedVariables = React.useMemo(() => {
|
|
if (schema.type === 'dropdown' && schema.source) {
|
|
try {
|
|
const variables = computeArguments(
|
|
schema.source.arguments,
|
|
getValues,
|
|
fieldEntryPaths,
|
|
);
|
|
|
|
// if computed variables are the same, return the last computed variables.
|
|
if (isEqual(variables, lastComputedVariables.current)) {
|
|
return lastComputedVariables.current;
|
|
}
|
|
|
|
lastComputedVariables.current = variables;
|
|
|
|
return variables;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
return null;
|
|
/**
|
|
* `formValues` is to trigger recomputation when form is updated.
|
|
* `getValues` is for convenience as it supports paths for fields like `getValues('foo.bar.baz')`.
|
|
*/
|
|
}, [schema, formValues, getValues, fieldEntryPaths]);
|
|
|
|
React.useEffect(() => {
|
|
if (
|
|
schema.type === 'dropdown' &&
|
|
stepId &&
|
|
schema.source &&
|
|
computedVariables
|
|
) {
|
|
const { key, parameters } = computedVariables;
|
|
|
|
getDynamicData({
|
|
dynamicDataKey: key,
|
|
parameters,
|
|
});
|
|
}
|
|
}, [getDynamicData, stepId, schema, computedVariables]);
|
|
|
|
return {
|
|
data: data?.data,
|
|
loading: isDynamicDataPending,
|
|
};
|
|
}
|
|
export default useDynamicData;
|