From ca53a94977cbe49c90ce325b2e1f92f83861b9aa Mon Sep 17 00:00:00 2001 From: pirupius Date: Thu, 25 Apr 2024 13:22:02 +0300 Subject: [PATCH] (fix) Improvements following code refactor/rename --- src/api/api.ts | 2 +- .../content-switcher.component.tsx | 10 +++++++--- .../multi-select/multi-select.component.tsx | 15 +++++++++------ .../inputs/tooltip/tooltip.component.tsx | 12 +++++------- .../ui-select-extended.component.tsx | 6 +++--- .../ui-select-extended.test.tsx | 12 ++++++------ .../value/view/field-value-view.component.tsx | 5 ++--- src/hooks/useClobData.tsx | 4 ++-- src/hooks/useFormJson.tsx | 4 ++-- .../inbuilt-components/inbuiltControls.ts | 6 +++--- .../inbuilt-components/template-component-map.ts | 10 +++++----- src/submission-handlers/base-handlers.ts | 4 ++-- 12 files changed, 47 insertions(+), 43 deletions(-) diff --git a/src/api/api.ts b/src/api/api.ts index fa33546bd..ee9c5d887 100644 --- a/src/api/api.ts +++ b/src/api/api.ts @@ -113,7 +113,7 @@ export async function fetchOpenMRSForm(nameOrUUID: string): Promise} - A Promise that resolves to the fetched ClobData or null if not found. */ -export async function fetchClobdata(form: OpenmrsForm): Promise { +export async function fetchClobData(form: OpenmrsForm): Promise { if (!form) { return null; } diff --git a/src/components/inputs/content-switcher/content-switcher.component.tsx b/src/components/inputs/content-switcher/content-switcher.component.tsx index 8fcd29b7e..eaede4b3b 100644 --- a/src/components/inputs/content-switcher/content-switcher.component.tsx +++ b/src/components/inputs/content-switcher/content-switcher.component.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useMemo, useState } from 'react'; import classNames from 'classnames'; -import { FormGroup, ContentSwitcher as Switcher, Switch } from '@carbon/react'; +import { FormGroup, ContentSwitcher as CdsContentSwitcher, Switch } from '@carbon/react'; import { useField } from 'formik'; import { isInlineView } from '../../../utils/form-helper'; import { isEmpty } from '../../../validators/form-validator'; @@ -69,7 +69,11 @@ export const ContentSwitcher: React.FC = ({ question, onChange, [styles.errorLegend]: errors.length > 0, [styles.boldedLegend]: errors.length === 0, })}> - + {question.questionOptions.answers.map((option, index) => ( = ({ question, onChange, disabled={question.disabled} /> ))} - + ) ); diff --git a/src/components/inputs/multi-select/multi-select.component.tsx b/src/components/inputs/multi-select/multi-select.component.tsx index ce82b3dc1..a552259f5 100644 --- a/src/components/inputs/multi-select/multi-select.component.tsx +++ b/src/components/inputs/multi-select/multi-select.component.tsx @@ -42,12 +42,15 @@ export const MultiSelect: React.FC = ({ question, onChange, hand } }, [question['submission']]); - const initiallySelectedQuestionItems = []; - question.questionOptions.answers.forEach((item) => { - if (field.value?.includes(item.concept)) { - initiallySelectedQuestionItems.push(item); - } - }); + const initiallySelectedQuestionItems = useMemo(() => { + const selectedItems = []; + question.questionOptions.answers.forEach((item) => { + if (field.value?.includes(item.concept)) { + selectedItems.push(item); + } + }); + return selectedItems; + }, [question, field.value]); const handleSelectItemsChange = ({ selectedItems }) => { setTouched(true); diff --git a/src/components/inputs/tooltip/tooltip.component.tsx b/src/components/inputs/tooltip/tooltip.component.tsx index 525a88455..a006465c2 100644 --- a/src/components/inputs/tooltip/tooltip.component.tsx +++ b/src/components/inputs/tooltip/tooltip.component.tsx @@ -12,12 +12,10 @@ interface TooltipProps { export const Tooltip: React.FC = ({ field }) => { const { t } = useTranslation(); return ( - - - - - + + + ); }; diff --git a/src/components/inputs/ui-select-extended/ui-select-extended.component.tsx b/src/components/inputs/ui-select-extended/ui-select-extended.component.tsx index f722b2d02..32b09569f 100644 --- a/src/components/inputs/ui-select-extended/ui-select-extended.component.tsx +++ b/src/components/inputs/ui-select-extended/ui-select-extended.component.tsx @@ -15,10 +15,10 @@ import { isInlineView } from '../../../utils/form-helper'; import RequiredFieldLabel from '../../required-field-label/required-field-label.component'; import styles from './ui-select-extended.scss'; -const UISelectExtended: React.FC = ({ question, handler, onChange, previousValue }) => { +const UiSelectExtended: React.FC = ({ question, handler, onChange, previousValue }) => { const { t } = useTranslation(); const [field, meta] = useField(question.id); - const { setFieldValue, encounterContext, layoutType, workspaceLayout, fields } = React.useContext(FormContext); + const { setFieldValue, encounterContext, layoutType, workspaceLayout } = React.useContext(FormContext); const [items, setItems] = useState([]); const [warnings, setWarnings] = useState([]); const [errors, setErrors] = useState([]); @@ -181,4 +181,4 @@ const UISelectExtended: React.FC = ({ question, handler, onChang ); }; -export default UISelectExtended; +export default UiSelectExtended; diff --git a/src/components/inputs/ui-select-extended/ui-select-extended.test.tsx b/src/components/inputs/ui-select-extended/ui-select-extended.test.tsx index b9c9d1106..886f197d2 100644 --- a/src/components/inputs/ui-select-extended/ui-select-extended.test.tsx +++ b/src/components/inputs/ui-select-extended/ui-select-extended.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { render, fireEvent, waitFor, act, screen } from '@testing-library/react'; -import UISelectExtended from './ui-select-extended.component'; +import UiSelectExtended from './ui-select-extended.component'; import { EncounterContext, FormContext } from '../../../form-context'; import { Formik } from 'formik'; import { ObsSubmissionHandler } from '../../../submission-handlers/base-handlers'; @@ -59,7 +59,7 @@ const renderForm = (intialValues) => { isSubmitting: false, formFieldHandlers: { obs: ObsSubmissionHandler }, }}> - + )} , @@ -87,7 +87,7 @@ jest.mock('../../../registry/registry', () => ({ }), })); -describe('UISelectExtended Component', () => { +describe('UiSelectExtended Component', () => { it('renders with items from the datasource', async () => { await act(async () => { await renderForm({}); @@ -101,7 +101,7 @@ describe('UISelectExtended Component', () => { expect(question.value).toBe(null); }); - //Click on the UISelectExtendedWidget to open the dropdown + //Click on the UiSelectExtendedWidget to open the dropdown fireEvent.click(uiSelectExtendedWidget); // Assert that all three items are displayed @@ -118,7 +118,7 @@ describe('UISelectExtended Component', () => { // setup const uiSelectExtendedWidget = screen.getByLabelText('Transfer Location'); - //Click on the UISelectExtendedWidget to open the dropdown + //Click on the UiSelectExtendedWidget to open the dropdown fireEvent.click(uiSelectExtendedWidget); // Find the list item for 'Naguru' and click it to select @@ -150,7 +150,7 @@ describe('UISelectExtended Component', () => { // setup const uiSelectExtendedWidget = screen.getByLabelText('Transfer Location'); - //Click on the UISelectExtendedWidget to open the dropdown + //Click on the UiSelectExtendedWidget to open the dropdown fireEvent.click(uiSelectExtendedWidget); // Type 'Nag' in the input field to filter items diff --git a/src/components/value/view/field-value-view.component.tsx b/src/components/value/view/field-value-view.component.tsx index 189205a1c..1d5f94943 100644 --- a/src/components/value/view/field-value-view.component.tsx +++ b/src/components/value/view/field-value-view.component.tsx @@ -11,15 +11,14 @@ interface FieldValueViewProps { } export const FieldValueView: React.FC = ({ label, conceptName, value, isInline }) => ( <> - {isInline && ( + {isInline ? (
{value ? : }
- )} - {!isInline && ( + ) : (
diff --git a/src/hooks/useClobData.tsx b/src/hooks/useClobData.tsx index 67706d43a..d1874836f 100644 --- a/src/hooks/useClobData.tsx +++ b/src/hooks/useClobData.tsx @@ -3,7 +3,7 @@ import { useMemo } from 'react'; import { FormSchema, OpenmrsForm } from '../types'; import useSWRImmutable from 'swr/immutable'; -export function useClobdata(form: OpenmrsForm) { +export function useClobData(form: OpenmrsForm) { const valueReferenceUuid = useMemo( () => form?.resources?.find(({ name }) => name === 'JSON schema').valueReference, [form], @@ -16,6 +16,6 @@ export function useClobdata(form: OpenmrsForm) { return { clobdata: data?.data, clobdataError: error || null, - isLoadingClobdata: (!data && !error) || false, + isLoadingClobData: (!data && !error) || false, }; } diff --git a/src/hooks/useFormJson.tsx b/src/hooks/useFormJson.tsx index 52269ec97..96c51c5c7 100644 --- a/src/hooks/useFormJson.tsx +++ b/src/hooks/useFormJson.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'; import { FormSchemaTransformer, FormSchema, FormSection, ReferencedForm } from '../types'; import { isTrue } from '../utils/boolean-utils'; import { applyFormIntent } from '../utils/forms-loader'; -import { fetchOpenMRSForm, fetchClobdata } from '../api/api'; +import { fetchOpenMRSForm, fetchClobData } from '../api/api'; import { getRegisteredFormSchemaTransformers } from '../registry/registry'; import { moduleName } from '../globals'; @@ -49,7 +49,7 @@ export async function loadFormJson( formSessionIntent?: string, ): Promise { const openmrsFormResponse = await fetchOpenMRSForm(formIdentifier); - const clobDataResponse = await fetchClobdata(openmrsFormResponse); + const clobDataResponse = await fetchClobData(openmrsFormResponse); const transformers = await getRegisteredFormSchemaTransformers(); const formJson: FormSchema = clobDataResponse ? { ...clobDataResponse, uuid: openmrsFormResponse.uuid } diff --git a/src/registry/inbuilt-components/inbuiltControls.ts b/src/registry/inbuilt-components/inbuiltControls.ts index 8fd741334..592ee049b 100644 --- a/src/registry/inbuilt-components/inbuiltControls.ts +++ b/src/registry/inbuilt-components/inbuiltControls.ts @@ -18,7 +18,7 @@ import Markdown from '../../components/inputs/markdown/markdown.component'; import FixedValue from '../../components/inputs/fixed-value/fixed-value.component'; import ExtensionParcel from '../../components/extension/extension-parcel.component'; import WorkspaceLauncher from '../../components/inputs/workspace-launcher/workspace-launcher.component'; -import UISelectExtended from '../../components/inputs/ui-select-extended/ui-select-extended.component'; +import UiSelectExtended from '../../components/inputs/ui-select-extended/ui-select-extended.component'; /** * @internal @@ -103,8 +103,8 @@ export const inbuiltControls: Array { return null; }, - getInitialValue: (encounter: any, field: FormField) => { + getInitialValue: (encounter: { location: { name: string; uuid: string } }, field: FormField) => { return { display: encounter.location.name, uuid: encounter.location.uuid, }; }, - getDisplayValue: (field: FormField, value) => { + getDisplayValue: (field: FormField, value: { display: string }) => { return value.display; }, };