Skip to content

Commit

Permalink
change index to function component
Browse files Browse the repository at this point in the history
  • Loading branch information
rinrub committed Jan 25, 2024
1 parent b4cda89 commit 15ebb08
Show file tree
Hide file tree
Showing 30 changed files with 1,176 additions and 406 deletions.
2 changes: 1 addition & 1 deletion src/actions/syncQuestionnaireResponse.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
QuestionnaireResponseItemAnswer,
} from '../types/fhir';

import { createQuestionnaireResponseItem } from './generateQuestionnaireResponse';
import ItemType from '../constants/itemType';
import {
hasAnswer,
Expand All @@ -20,7 +21,6 @@ import {
hasQuantityAnswer,
hasTimeAnswer,
} from '../util/refero-core';
import { createQuestionnaireResponseItem } from './generateQuestionnaireResponse';

interface Dictionary<T> {
[linkId: string]: T[];
Expand Down
195 changes: 195 additions & 0 deletions src/components/RenderFormItems.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
import React from 'react';

import { connect } from 'react-redux';
import { ThunkDispatch } from 'redux-thunk';

import { QuestionnaireItem, QuestionnaireResponseItem, QuestionnaireResponseItemAnswer } from '../types/fhir';
import { ReferoProps } from '../types/referoProps';

import { RepeatButton } from './formcomponents/repeat/repeat-button';
import { NewValueAction } from '../actions/newValue';
import constants, { NAVIGATOR_BLINDZONE_ID } from '../constants';
import ItemType from '../constants/itemType';
import { GlobalState } from '../reducers';
import { FormData, FormDefinition, getFormData, getFormDefinition } from '../reducers/form';
import { getComponentForItem, isHiddenItem, shouldRenderRepeatButton } from '../util';
import { ActionRequester } from '../util/actionRequester';
import { getCodingTextTableValues, getNavigatorExtension } from '../util/extension';
import { getTopLevelElements } from '../util/getTopLevelElements';
import { QuestionniareInspector } from '../util/questionnaireInspector';
import {
Path,
createIdSuffix,
createPathForItem,
getAnswerFromResponseItem,
getRootQuestionnaireResponseItemFromData,
shouldRenderDeleteButton,
} from '../util/refero-core';
import { RenderContext } from '../util/renderContext';
import { shouldFormBeDisplayedAsStepView } from '../util/shouldFormBeDisplayedAsStepView';

type Props = {
runScoringCalculator: (newState: GlobalState) => void;
};

type StateProps = {
formDefinition?: FormDefinition | null;
formData?: FormData | null;
};

type DispatchProps = {
dispatch: ThunkDispatch<GlobalState, void, NewValueAction>;
path: Path[];
};

export const RenderFormItems = ({
pdf,
formDefinition,
resources,
formData,
promptLoginMessage,
path,
onChange,
dispatch,
runScoringCalculator,
onRequestAttachmentLink,
onOpenAttachment,
onDeleteAttachment,
onRequestHelpButton,
uploadAttachment,
onRequestHelpElement,
attachmentErrorMessage,
attachmentMaxFileSize,
attachmentValidTypes,
validateScriptInjection,
onRenderMarkdown,
fetchValueSet,
autoSuggestProps,
fetchReceivers,
}: Props & ReferoProps & StateProps & DispatchProps): JSX.Element | null => {
if (!formDefinition || !formDefinition.Content || !formDefinition.Content.item) {
return null;
}
const onAnswerChange = (
newState: GlobalState,
_path: Array<Path>,
item: QuestionnaireItem,
answer: QuestionnaireResponseItemAnswer
): void => {
console.log(newState.refero.form);
if (onChange && newState.refero.form.FormDefinition.Content && newState.refero.form.FormData.Content) {
const actionRequester = new ActionRequester(newState.refero.form.FormDefinition.Content, newState.refero.form.FormData.Content);

const questionnaireInspector = new QuestionniareInspector(
newState.refero.form.FormDefinition.Content,
newState.refero.form.FormData.Content
);

onChange(item, answer, actionRequester, questionnaireInspector);

for (const action of actionRequester.getActions()) {
dispatch(action);
}
}

runScoringCalculator(newState);
};
const contained = formDefinition.Content.contained;
const renderedItems: Array<JSX.Element> | undefined = [];
const isNavigatorEnabled = !!getNavigatorExtension(formDefinition.Content);
let isNavigatorBlindzoneInitiated = false;

const questionnaireItemArray: QuestionnaireItem[] | undefined = shouldFormBeDisplayedAsStepView(formDefinition)
? getTopLevelElements(formDefinition)
: formDefinition.Content.item;

questionnaireItemArray?.map(item => {
if (isHiddenItem(item)) return [];
const Comp = getComponentForItem(item.type, getCodingTextTableValues(item));
if (!Comp) {
return undefined;
}
let responseItems: Array<QuestionnaireResponseItem> | undefined;
if (formData) {
responseItems = getRootQuestionnaireResponseItemFromData(item.linkId, formData);
}

if (responseItems && responseItems.length > 0) {
responseItems.forEach((responseItem, index) => {
const repeatButton =
item.repeats && shouldRenderRepeatButton(item, responseItems, index) ? (
<div className="page_refero__repeatbutton-wrapper">
<RepeatButton
key={`item_${item.linkId}_add_repeat_item`}
resources={resources}
item={item}
responseItems={responseItems}
parentPath={path}
renderContext={new RenderContext()}
disabled={item.type !== ItemType.GROUP && !responseItem.answer}
/>
</div>
) : undefined;
const pathForItem = createPathForItem(path, item, responseItem, index);
// legg på blindzone rett over den første seksjonen
if (isNavigatorEnabled && item.type === ItemType.GROUP && !isNavigatorBlindzoneInitiated) {
isNavigatorBlindzoneInitiated = true;
renderedItems.push(<section id={NAVIGATOR_BLINDZONE_ID}></section>);
}
renderedItems.push(
<Comp
language={formDefinition.Content?.language}
pdf={pdf}
includeSkipLink={isNavigatorEnabled && item.type === ItemType.GROUP}
promptLoginMessage={promptLoginMessage}
key={`item_${responseItem.linkId}_${index}`}
id={'item_' + responseItem.linkId + createIdSuffix(pathForItem, index, item.repeats)}
item={item}
questionnaire={formDefinition.Content}
responseItem={responseItem}
answer={getAnswerFromResponseItem(responseItem)}
resources={resources}
containedResources={contained}
path={path}
headerTag={constants.DEFAULT_HEADER_TAG}
visibleDeleteButton={shouldRenderDeleteButton(item, index)}
repeatButton={repeatButton}
onRequestAttachmentLink={onRequestAttachmentLink}
onOpenAttachment={onOpenAttachment}
onDeleteAttachment={onDeleteAttachment}
uploadAttachment={uploadAttachment}
onRequestHelpButton={onRequestHelpButton}
onRequestHelpElement={onRequestHelpElement}
attachmentErrorMessage={attachmentErrorMessage}
attachmentMaxFileSize={attachmentMaxFileSize}
attachmentValidTypes={attachmentValidTypes}
validateScriptInjection={validateScriptInjection}
onAnswerChange={onAnswerChange}
renderContext={new RenderContext()}
onRenderMarkdown={onRenderMarkdown}
fetchValueSet={fetchValueSet}
autoSuggestProps={autoSuggestProps}
fetchReceivers={fetchReceivers}
/>
);
});
}
});
return <>{renderedItems}</>;
};
function mapStateToProps(state: GlobalState): StateProps {
return {
formDefinition: getFormDefinition(state),
formData: getFormData(state),
};
}

function mapDispatchToProps(dispatch: ThunkDispatch<GlobalState, void, NewValueAction>): DispatchProps {
return {
dispatch,
path: [],
};
}

const RenderFormItemsConnected = connect<StateProps, DispatchProps, ReferoProps>(mapStateToProps, mapDispatchToProps)(RenderFormItems);
export default RenderFormItemsConnected;
2 changes: 1 addition & 1 deletion src/components/formButtons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ interface FormButtonsInterface {
pauseButtonText: string;
submitButtonDisabled?: boolean;
pauseButtonDisabled?: boolean;
onSubmitButtonClicked?: () => void;
onSubmitButtonClicked?: (() => void) | ((e: React.FormEvent) => void);
onCancelButtonClicked?: () => void;
onPauseButtonClicked?: () => void;
isHelsenorgeForm?: boolean;
Expand Down
18 changes: 9 additions & 9 deletions src/components/formcomponents/attachment/attachment.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -167,15 +167,15 @@ const AttachmentComponent = ({
return '';
};

React.useMemo(() => {
const responseItemHasChanged = responseItem !== responseItem;
const helpItemHasChanged = isHelpOpen !== isHelpOpen;
const answerHasChanged = answer !== answer;
const resourcesHasChanged = JSON.stringify(resources) !== JSON.stringify(resources);
const repeats = item.repeats ?? false;

return responseItemHasChanged || helpItemHasChanged || resourcesHasChanged || repeats || answerHasChanged;
}, [responseItem, isHelpOpen, answer, resources, item]);
// React.useMemo(() => {
// const responseItemHasChanged = responseItem !== responseItem;
// const helpItemHasChanged = isHelpOpen !== isHelpOpen;
// const answerHasChanged = answer !== answer;
// const resourcesHasChanged = JSON.stringify(resources) !== JSON.stringify(resources);
// const repeats = item.repeats ?? false;

// return responseItemHasChanged || helpItemHasChanged || resourcesHasChanged || repeats || answerHasChanged;
// }, [responseItem, isHelpOpen, answer, resources, item]);

const subLabelText = getSublabelText(item, onRenderMarkdown, questionnaire, resources);

Expand Down
18 changes: 9 additions & 9 deletions src/components/formcomponents/boolean/boolean.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -86,15 +86,15 @@ const Boolean = ({
}
};

React.useMemo(() => {
const responseItemHasChanged = responseItem !== responseItem;
const helpItemHasChanged = isHelpOpen !== isHelpOpen;
const answerHasChanged = answer !== answer;
const resourcesHasChanged = JSON.stringify(resources) !== JSON.stringify(resources);
const repeats = item.repeats ?? false;

return responseItemHasChanged || helpItemHasChanged || resourcesHasChanged || repeats || answerHasChanged;
}, [responseItem, isHelpOpen, answer, resources, item]);
// React.useMemo(() => {
// const responseItemHasChanged = responseItem !== responseItem;
// const helpItemHasChanged = isHelpOpen !== isHelpOpen;
// const answerHasChanged = answer !== answer;
// const resourcesHasChanged = JSON.stringify(resources) !== JSON.stringify(resources);
// const repeats = item.repeats ?? false;

// return responseItemHasChanged || helpItemHasChanged || resourcesHasChanged || repeats || answerHasChanged;
// }, [responseItem, isHelpOpen, answer, resources, item]);

const labelText = `${renderPrefix(item)} ${getText(item, onRenderMarkdown, questionnaire, resources)}`;

Expand Down
16 changes: 8 additions & 8 deletions src/components/formcomponents/choice/choice.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -269,15 +269,15 @@ const Choice: React.FC<ChoiceProps & ValidationProps> = props => {
);
};

React.useMemo(() => {
const responseItemHasChanged = props.responseItem !== props.responseItem;
const helpItemHasChanged = props.isHelpOpen !== props.isHelpOpen;
const answerHasChanged = props.answer !== props.answer;
const resourcesHasChanged = JSON.stringify(props.resources) !== JSON.stringify(props.resources);
const repeats = props.item.repeats ?? false;
// React.useMemo(() => {
// const responseItemHasChanged = props.responseItem !== props.responseItem;
// const helpItemHasChanged = props.isHelpOpen !== props.isHelpOpen;
// const answerHasChanged = props.answer !== props.answer;
// const resourcesHasChanged = JSON.stringify(props.resources) !== JSON.stringify(props.resources);
// const repeats = props.item.repeats ?? false;

return responseItemHasChanged || helpItemHasChanged || resourcesHasChanged || repeats || answerHasChanged;
}, [props.responseItem, props.isHelpOpen, props.answer, props.resources, props.item]);
// return responseItemHasChanged || helpItemHasChanged || resourcesHasChanged || repeats || answerHasChanged;
// }, [props.responseItem, props.isHelpOpen, props.answer, props.resources, props.item]);

const { id, item, pdf, answer, containedResources, children, onRenderMarkdown } = props;
if (pdf || isReadOnly(item)) {
Expand Down
18 changes: 9 additions & 9 deletions src/components/formcomponents/date/date-time.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -157,15 +157,15 @@ const DateTime: React.FC<DateTimeProps & ValidationProps> = props => {
return date ?? text;
};

React.useMemo(() => {
const responseItemHasChanged = props.responseItem !== props.responseItem;
const helpItemHasChanged = props.isHelpOpen !== props.isHelpOpen;
const answerHasChanged = props.answer !== props.answer;
const resourcesHasChanged = JSON.stringify(props.resources) !== JSON.stringify(props.resources);
const repeats = props.item.repeats ?? false;

return responseItemHasChanged || helpItemHasChanged || resourcesHasChanged || repeats || answerHasChanged;
}, [props.responseItem, props.isHelpOpen, props.answer, props.resources, props.item]);
// React.useMemo(() => {
// const responseItemHasChanged = props.responseItem !== props.responseItem;
// const helpItemHasChanged = props.isHelpOpen !== props.isHelpOpen;
// const answerHasChanged = props.answer !== props.answer;
// const resourcesHasChanged = JSON.stringify(props.resources) !== JSON.stringify(props.resources);
// const repeats = props.item.repeats ?? false;

// return responseItemHasChanged || helpItemHasChanged || resourcesHasChanged || repeats || answerHasChanged;
// }, [props.responseItem, props.isHelpOpen, props.answer, props.resources, props.item]);

const getLocaleFromLanguage = (): LanguageLocales.NORWEGIAN | LanguageLocales.ENGLISH => {
if (props.language?.toLowerCase() === 'en-gb') {
Expand Down
18 changes: 9 additions & 9 deletions src/components/formcomponents/date/date.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -120,15 +120,15 @@ const DateComponent: React.FC<DateProps & ValidationProps> = props => {
return LanguageLocales.NORWEGIAN;
};

React.useMemo(() => {
const responseItemHasChanged = props.responseItem !== props.responseItem;
const helpItemHasChanged = props.isHelpOpen !== props.isHelpOpen;
const answerHasChanged = props.answer !== props.answer;
const resourcesHasChanged = JSON.stringify(props.resources) !== JSON.stringify(props.resources);
const repeats = props.item.repeats ?? false;

return responseItemHasChanged || helpItemHasChanged || resourcesHasChanged || repeats || answerHasChanged;
}, [props.responseItem, props.isHelpOpen, props.answer, props.resources, props.item]);
// React.useMemo(() => {
// const responseItemHasChanged = props.responseItem !== props.responseItem;
// const helpItemHasChanged = props.isHelpOpen !== props.isHelpOpen;
// const answerHasChanged = props.answer !== props.answer;
// const resourcesHasChanged = JSON.stringify(props.resources) !== JSON.stringify(props.resources);
// const repeats = props.item.repeats ?? false;

// return responseItemHasChanged || helpItemHasChanged || resourcesHasChanged || repeats || answerHasChanged;
// }, [props.responseItem, props.isHelpOpen, props.answer, props.resources, props.item]);

const subLabelText = getSublabelText(props.item, props.onRenderMarkdown, props.questionnaire, props.resources);

Expand Down
16 changes: 8 additions & 8 deletions src/components/formcomponents/date/time.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -191,15 +191,15 @@ const Time: React.FC<TimeProps & ValidationProps> = props => {
return '';
};

React.useMemo(() => {
const responseItemHasChanged = props.responseItem !== props.responseItem;
const helpItemHasChanged = props.isHelpOpen !== props.isHelpOpen;
const answerHasChanged = props.answer !== props.answer;
const resourcesHasChanged = JSON.stringify(props.resources) !== JSON.stringify(props.resources);
const repeats = props.item.repeats ?? false;
// React.useMemo(() => {
// const responseItemHasChanged = props.responseItem !== props.responseItem;
// const helpItemHasChanged = props.isHelpOpen !== props.isHelpOpen;
// const answerHasChanged = props.answer !== props.answer;
// const resourcesHasChanged = JSON.stringify(props.resources) !== JSON.stringify(props.resources);
// const repeats = props.item.repeats ?? false;

return responseItemHasChanged || helpItemHasChanged || resourcesHasChanged || repeats || answerHasChanged;
}, [props.responseItem, props.isHelpOpen, props.answer, props.resources, props.item]);
// return responseItemHasChanged || helpItemHasChanged || resourcesHasChanged || repeats || answerHasChanged;
// }, [props.responseItem, props.isHelpOpen, props.answer, props.resources, props.item]);

const { pdf, item, renderFieldset, id, onRenderMarkdown } = props;
const subLabelText = getSublabelText(props.item, props.onRenderMarkdown, props.questionnaire, props.resources);
Expand Down
Loading

0 comments on commit 15ebb08

Please sign in to comment.