Passing Date Picker Value from Child to Parent with optional parameter

Question

EDTF.JS

function SentenceItem(props: {

    readOnly?: boolean;

    prefix?: string;

    firstItem?: boolean;

    default: string;

    value: string;

}) {

    if (props.readOnly && !props.value) return null;

 

    return (

        <>

            {!props.firstItem ? ' ' : false}

            {props.prefix ? `${props.prefix} ` : false}

            <span className={styles.item}>{props.value ? props.value : props.default}</span>

        </>

    );

}

 

function SentenceBuild(props: {

    form: FormHook<EditMedicationForm.EditMedicationFormStructure>;

    fieldPath: EditMedicationForm.InstructionFields;

    defaultValue: string;

    useDefaultValue: boolean;

    readOnly?: boolean;

}) {

    const instruction = props.form.values[props.fieldPath];

    if (!isDosageTimesInstruction(instruction)) return null;

 

    const instructions = instruction.instructions;

    const routeOfAdministration = instruction.routeOfAdministration;

    const times = instruction.times;

    const startsOn = moment(instruction.startsOn, ValidDateFormats.NodeDateTimeTimezone);

 

    let showStartsOn = false;

    if (startsOn && startsOn.isValid()) {

        showStartsOn = moment().endOf('day').isBefore(startsOn, 'day');

    }

 

    if (props.useDefaultValue && props.defaultValue)

        return (

            <div data-test-id={'sentence-builder'} className={styles.sentenceBuilder}>

                {capitalizeFirstLetter(props.defaultValue)}

            </div>

        );

 

    return (

        <div data-test-id={'sentence-builder'} className={styles.sentenceBuilder}>

            <SentenceItem

                firstItem

                value={instructions === '' ? '' : capitalizeFirstLetter(instructions)}

                default='[Administration dosage instructions]'

            />

            <SentenceItem

                prefix='via'

                readOnly={props.readOnly}

                value={routeOfAdministration?.name?.toLowerCase() ?? ''}

                default='[route of administration]'

            />

            <SentenceItem

                prefix='at'

                readOnly={props.readOnly}

                value={times.length ? times.join(', ') : ''}

                default='[time]'

            />

            {showStartsOn && (

                <SentenceItem

                    prefix='starting on'

                    readOnly={props.readOnly}

                    value={moment(startsOn).format(ValidDateFormats.Edit)}

                    default='[date]'

                />

            )}

        </div>

    );

}

EDSF.JS

export const EditDurationSelectorField: React.FC<{

    form: FormHook<EditMedicationForm.EditMedicationFormStructure>;

    medicationStatus: MedicationStatus;

    shortCourseDefaults: boolean;

    setShortCourseDefaults: (setDefaults: boolean) => void;

}> = props => {

    const medicationSettings = useMedicationSettings();

    const expiresOnField = useField({ form: props.form, field: 'expiresOn' });

    const performedOnField = useField({ form: props.form, field: 'performedOn' });

 

    const expiresOnMoment = expiresOnField.value

        ? moment(expiresOnField.value, ValidDateFormats.Edit).clone().endOf('day')

        : null;

    const performedOnMoment = performedDate(performedOnField.value, ValidDateFormats.Edit);

There are two components startsOn value send to performedOnMoment=startson value