use react components for ICardForm page one and two

src/simplified/cardEditor.tsx

@@ -27,13 +27,22 @@ interface ExpressionOption {
     libraryIdentifier: string,
     libraryUrl: string,
 }
+
+export interface pageOneProps {
+    fieldElements: JSX.Element[],
+}
+
+export interface pageTwoProps {
+    conditions: PlanDefinitionActionCondition[],
+}
+
 export interface ICardForm {
     resourceType: FriendlyResourceListEntry;
     textBoxFields: Map<string, textBoxProps>;
     dropdownFields: Map<string, string[]>;
     cardFieldLayout: cardLayout;
-    pageOne: (fieldElements: JSX.Element[]) => JSX.Element[];
-    pageTwo: (fieldElements: JSX.Element[]) => JSX.Element[];
+    pageOne: React.FunctionComponent<pageOneProps> | React.ComponentClass<pageOneProps>;
+    pageTwo: React.FunctionComponent<pageTwoProps> | React.ComponentClass<pageTwoProps>;
     pageThree: (fieldElements: JSX.Element[]) => JSX.Element[];
 }
 
@@ -176,12 +185,16 @@ export const CardEditor = (props: CardEditorProps) => {
 
     const innerCardForm = getInnerCardForm();
 
+    // Read existing conditions
+    const pdConditions: PlanDefinitionActionCondition[] = [];
+
     return (
         <div>
             <Form key={actResourceType.FHIR + "-form"} style={{ color: "#2a6b92" }} id="commonMetaDataForm" target="void" onSubmit={handleSaveResource}>
                 <OuterCardForm
                     sageNode={actNode}
                     fieldHandlers={fieldHandlers}
+                    pdConditions={pdConditions}
                     resourceType={actResourceType}
                     elementList={fieldElementListForType(innerCardForm, fieldHandlers, actNode)}
                     innerCardForm={innerCardForm}

src/simplified/medicationRequestForm.tsx

@@ -64,33 +64,31 @@ export class MedicationRequestForm implements ICardForm {
 
         };
 
-    pageOne = (fieldElements: JSX.Element[]): JSX.Element[] => {
+    pageOne: ICardForm['pageOne'] = (props) => {
         const placeHolderElem =
             <Form.Group key='placeholder-formGroup' as={Col} >
             </Form.Group>;
         return (
-            [
+            <div>{
                 ...this.cardFieldLayout.cardColumns.map((cr, i: number) => {
                     return (
                         <Row key={"row-" + i} className="mb-3">
                             {cr.map(field =>
                                 [
                                     placeHolderElem,
-                                    ...fieldElements
+                                    ...props.fieldElements
                                 ].find(elem =>
                                     elem.key?.toString().startsWith(field + "-")))}
                         </Row>
                     )
-                }),
-            ]
+                })
+            }</div>
         );
     }
 
-    pageTwo = (fieldElements: JSX.Element[]) => {
+    pageTwo: ICardForm['pageTwo'] = (props) => {
         return (
-            [
-                <div key="page2">To be implemented</div>
-            ]
+            <div key="page2">{props.conditions}</div>
         );
     }
 

src/simplified/outerCardForm.tsx

@@ -1,5 +1,6 @@
 import { faCaretLeft, faCaretRight } from '@fortawesome/pro-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { PlanDefinitionActionCondition } from 'fhir/r4';
 import React from "react";
 import State, { SageNodeInitializedFreezerNode } from '../state';
 import { ICardForm } from './cardEditor';
@@ -27,6 +28,7 @@ export type CardFormProps = {
     sageNode: SageNodeInitializedFreezerNode,
     fieldHandlers: any[][],
     resourceType: FriendlyResourceListEntry,
+    pdConditions: PlanDefinitionActionCondition[],
     elementList: JSX.Element[]
     innerCardForm: ICardForm,
 }
@@ -96,11 +98,14 @@ export class OuterCardForm extends React.Component<CardFormProps, CardFormState>
     resetForm = () => { this.setState({ step: 1 }) }
 
     render() {
+        const PageOne = this.innerCardForm.pageOne; // https://reactjs.org/docs/jsx-in-depth.html#choosing-the-type-at-runtime
+        const PageTwo = this.innerCardForm.pageTwo;
+
         return (
             <div>
                 <div>{this.pageTitles.get(this.state.step)}</div>
-                <div>{this.state.step == 1 ? this.innerCardForm.pageOne(this.props.elementList) : null}</div>
-                {this.state.step == 2 ? this.innerCardForm.pageTwo([]) : null}
+                <div>{this.state.step == 1 ? <PageOne fieldElements={this.props.elementList} /> : null}</div>
+                {this.state.step == 2 ? <PageTwo conditions={this.props.pdConditions}/> : null}
                 {this.state.step == 3 ? this.innerCardForm.pageThree([]) : null}
                 <div><>
                     {this.state.step > 1 ? this.leftNavButton() : null}