Avoid creating multiple forms

cBioPortal · Nov 19, 2019 · d0cd18b · d0cd18b
1 parent 8d13933
commit d0cd18b
Showing 1 changed file with 27 additions and 12 deletions.
diff --git a/src/pages/patientView/trialMatch/TrialMatchTable.tsx b/src/pages/patientView/trialMatch/TrialMatchTable.tsx
@@ -6,7 +6,7 @@ import {
     IClinicalGroupMatch, IGenomicGroupMatch, IGenomicMatch, IDetailedTrialMatch, IArmMatch, IGenomicMatchType
 } from "../../../shared/model/MatchMiner";
 import styles from './style/trialMatch.module.scss';
-import { computed, observable } from "mobx";
+import { action, computed, observable } from "mobx";
 import LazyMobXTable from "../../../shared/components/lazyMobXTable/LazyMobXTable";
 import SampleManager from "../SampleManager";
 import DefaultTooltip, { placeArrowBottomLeft } from "../../../public-lib/components/defaultTooltip/DefaultTooltip";
@@ -21,6 +21,11 @@ export type ITrialMatchProps = {
     containerWidth: number;
 }
 
+type ISelectedTrialFeedbackFormData = {
+    nctId: string;
+    protocolNo: string;
+}
+
 enum ColumnKey {
     TITLE = 'Title',
     MATCHING_CRITERIA = 'Matching Criteria',
@@ -47,7 +52,7 @@ export default class TrialMatchTable extends React.Component<ITrialMatchProps> {
         };
     }
 
-    @observable showTrialFeedback = false;
+    @observable selectedTrialFeedbackFormData: ISelectedTrialFeedbackFormData | undefined;
     @observable showGeneralFeedback = false;
 
     private _columns = [{
@@ -131,16 +136,7 @@ export default class TrialMatchTable extends React.Component<ITrialMatchProps> {
                     <span className={styles.statusBackground}>{trial.status}</span>
                 </a>
                 <span className={styles.feedback}>
-                    <Button type="button" className={"btn btn-default btn-sm btn-xs " + styles.feedbackButton} onClick={() => this.showTrialFeedback=true}>Feedback</Button>
-                    <TrialMatchFeedback
-                        show={this.showTrialFeedback}
-                        onHide={() => this.showTrialFeedback = false}
-                        isTrialFeedback={true}
-                        title="OncoKB Matched Trial Feedback"
-                        userEmailAddress={AppConfig.serverConfig.user_email_address}
-                        nctId={trial.nctId}
-                        protocolNo={trial.protocolNo}
-                    />
+                    <Button type="button" className={"btn btn-default btn-sm btn-xs " + styles.feedbackButton} onClick={() => this.openFeedbackForm(trial.nctId, trial.protocolNo)}>Feedback</Button>
                 </span>
             </div>
         ),
@@ -196,6 +192,14 @@ export default class TrialMatchTable extends React.Component<ITrialMatchProps> {
         );
     }
 
+    @action
+    public openFeedbackForm(nctId: string, protocolNo: string) {
+        this.selectedTrialFeedbackFormData = {
+            nctId: nctId,
+            protocolNo: protocolNo
+        };
+    }
+
     public getGenomicMatch(matches: IGenomicMatchType) {
         return (
             <React.Fragment>
@@ -335,6 +339,17 @@ export default class TrialMatchTable extends React.Component<ITrialMatchProps> {
                     title="OncoKB Matched Trials General Feedback"
                     userEmailAddress={AppConfig.serverConfig.user_email_address}
                 />
+                {   this.selectedTrialFeedbackFormData &&
+                    <TrialMatchFeedback
+                        show={!!this.selectedTrialFeedbackFormData}
+                        onHide={() => !!(this.selectedTrialFeedbackFormData=undefined)}
+                        isTrialFeedback={true}
+                        title="OncoKB Matched Trial Feedback"
+                        userEmailAddress={AppConfig.serverConfig.user_email_address}
+                        nctId={this.selectedTrialFeedbackFormData!.nctId}
+                        protocolNo={this.selectedTrialFeedbackFormData!.protocolNo}
+                    />
+                }
                 <TrialMatchTableComponent
                     data={this.props.detailedTrialMatches}
                     columns={this._columns}