Avoid creating multiple forms

cBioPortal · Nov 19, 2019 · aa786e3 · aa786e3
1 parent 4789052
commit aa786e3
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 35 deletions.
diff --git a/src/pages/patientView/trialMatch/TrialMatchFeedback.tsx b/src/pages/patientView/trialMatch/TrialMatchFeedback.tsx
@@ -1,33 +1,37 @@
 import * as React from "react";
 import * as _ from 'lodash';
 import {Modal} from "react-bootstrap";
+import { ISelectedTrialFeedbackFormData } from "./TrialMatchTable";
 
 interface ITrialMatchFeedbackProps {
     show: boolean;
+    data?: ISelectedTrialFeedbackFormData;
     isTrialFeedback?: boolean;
     title: string;
     userEmailAddress: string;
-    nctId?: string;
-    protocolNo?: string;
     onHide: () => void;
 }
 
 export default class TrialMatchFeedback extends React.Component<ITrialMatchFeedbackProps, {}> {
-    public render()
-    {
+    public render() {
         let src = '';
-        if (!_.isUndefined(this.props.isTrialFeedback) && this.props.isTrialFeedback) {
-            const url = "https://docs.google.com/forms/d/e/1FAIpQLSfcoLRG0iWO_qUb4hfzWFQ1toP575EKCTwqPcXE9DmMzuS34w/viewform";
-            const nctIdParam = `entry.1070287537=${this.props.nctId || ''}`;
-            const protocolNoParam = `entry.699867040=${this.props.protocolNo || ''}`;
-            const userParam = `entry.1655318994=${this.props.userEmailAddress || ''}`;
-            const uriParam = `entry.1782078941=${encodeURIComponent(window.location.href)}`;
-            src = `${url}?${userParam}&${uriParam}&${nctIdParam}&${protocolNoParam}&embedded=true`;
-        } else {
-            const url = "https://docs.google.com/forms/d/e/1FAIpQLSes1WuMattmo_aT8-34LaPRTC47vVzvdWMgYZ5tSuw8EHoLZw/viewform";
-            const userParam = `entry.251841421=${this.props.userEmailAddress || ''}`;
-            const uriParam = `entry.1295500928=${encodeURIComponent(window.location.href)}`;
-            src = `${url}?${userParam}&${uriParam}&embedded=true`;
+        if (this.props.show) {
+            if (!_.isUndefined(this.props.isTrialFeedback) && this.props.isTrialFeedback) {
+                const url = "https://docs.google.com/forms/d/e/1FAIpQLSfcoLRG0iWO_qUb4hfzWFQ1toP575EKCTwqPcXE9DmMzuS34w/viewform";
+                const userParam = `entry.1655318994=${this.props.userEmailAddress || ''}`;
+                const uriParam = `entry.1782078941=${encodeURIComponent(window.location.href)}`;
+                src = `${url}?${userParam}&${uriParam}&embedded=true`;
+                if (!_.isUndefined(this.props.data)) {
+                    const nctIdParam = `entry.1070287537=${this.props.data.nctId || ''}`;
+                    const protocolNoParam = `entry.699867040=${this.props.data.protocolNo || ''}`;
+                    src = `${url}?${userParam}&${uriParam}&${nctIdParam}&${protocolNoParam}&embedded=true`;
+                }
+            } else {
+                const url = "https://docs.google.com/forms/d/e/1FAIpQLSes1WuMattmo_aT8-34LaPRTC47vVzvdWMgYZ5tSuw8EHoLZw/viewform";
+                const userParam = `entry.251841421=${this.props.userEmailAddress || ''}`;
+                const uriParam = `entry.1295500928=${encodeURIComponent(window.location.href)}`;
+                src = `${url}?${userParam}&${uriParam}&embedded=true`;
+            }
         }
 
         return (
@@ -48,4 +52,4 @@ export default class TrialMatchFeedback extends React.Component<ITrialMatchFeedb
             </Modal>
         );
     }
-}
+}
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;
 }
 
+export 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.openCloseFeedbackForm({nctId: trial.nctId, protocolNo: trial.protocolNo})}>Feedback</Button>
                 </span>
             </div>
         ),
@@ -196,6 +192,11 @@ export default class TrialMatchTable extends React.Component<ITrialMatchProps> {
         );
     }
 
+    @action
+    public openCloseFeedbackForm(data?: ISelectedTrialFeedbackFormData) {
+        this.selectedTrialFeedbackFormData = data;
+    }
+
     public getGenomicMatch(matches: IGenomicMatchType) {
         return (
             <React.Fragment>
@@ -329,12 +330,24 @@ export default class TrialMatchTable extends React.Component<ITrialMatchProps> {
         return (
             <div>
                 <p style={{marginBottom: '0'}}>Curated genomic and clinical criteria from open clinical trials at Memorial Sloan Kettering. Please <a href="mailto:team@oncokb.org">contact us</a> or submit <a onClick={() => this.showGeneralFeedback=true}>feedback form</a> if you have any questions.</p>
-                <TrialMatchFeedback
-                    show={this.showGeneralFeedback}
-                    onHide={() => this.showGeneralFeedback = false}
-                    title="OncoKB Matched Trials General Feedback"
-                    userEmailAddress={AppConfig.serverConfig.user_email_address}
-                />
+                {!_.isUndefined(this.showGeneralFeedback) &&
+                    <TrialMatchFeedback
+                        show={this.showGeneralFeedback}
+                        onHide={() => this.showGeneralFeedback = false}
+                        title="OncoKB Matched Trials General Feedback"
+                        userEmailAddress={AppConfig.serverConfig.user_email_address}
+                    />
+                }
+                {this.selectedTrialFeedbackFormData &&
+                    <TrialMatchFeedback
+                        show={!!this.selectedTrialFeedbackFormData}
+                        data={this.selectedTrialFeedbackFormData}
+                        onHide={() => this.openCloseFeedbackForm()}
+                        isTrialFeedback={true}
+                        title="OncoKB Matched Trial Feedback"
+                        userEmailAddress={AppConfig.serverConfig.user_email_address}
+                    />
+                }
                 <TrialMatchTableComponent
                     data={this.props.detailedTrialMatches}
                     columns={this._columns}