Merge pull request #100 from concord-consortium/188279613-fix-join-ex…

…isting 188279613 Fix Joining with Merge
concord-consortium · Sep 16, 2024 · 64154b8 · 64154b8
2 parents 78fffcb + a39b1e5
commit 64154b8
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -62,6 +62,11 @@ export default class App extends Component {
     }
   }
 
+  private get selectedContextOption() {
+    return this.state.selectedDataContext || this.state.lastSelectedDataContext ||
+      this.state.availableDataContexts[0]?.name;
+  }
+
   public render() {
     if (!this.state.shareId) {
       Codap.resizePlugin(kInitialDimensions.width, kInitialDimensions.height);
@@ -73,7 +78,7 @@ export default class App extends Component {
   }
 
   renderFormPage() {
-    const { availableDataContexts, selectedDataContext, lastSelectedDataContext, shareTable, joinTable,
+    const { availableDataContexts, shareTable, joinTable,
       shareExistingTable, joinAndMergeTable, createNewTable, joinWithoutMerging } = this.state;
     const showFirstStep = !shareTable && !joinTable;
     const noSelectedSubOptions = !shareExistingTable && !createNewTable && !joinAndMergeTable && !joinWithoutMerging;
@@ -83,7 +88,6 @@ export default class App extends Component {
     const setState = (state: Partial<IState>) => this.setState(state);
     const handleJoinShareIdChange = (event: ChangeEvent<HTMLInputElement>) => this.handleJoinShareIdChange(event);
     const handleDataLabelChange = (event: ChangeEvent<HTMLInputElement>) => this.handleDataLabelChange(event);
-    const joinShare = () => this.joinShare();
     const handleDataContextChange = (event: ChangeEvent<HTMLSelectElement>) => this.handleDataContextChange(event);
     const initiateShare = (selectedContext?: string) => {
       if (selectedContext) {
@@ -95,7 +99,6 @@ export default class App extends Component {
     const availableContextOptions = availableDataContexts.map((dc: DataContext) =>
       <option key={dc.name} value={dc.name}>{dc.title ?? dc.name}</option>
     );
-    const selectedContextOption = selectedDataContext || lastSelectedDataContext || availableDataContexts[0]?.name;
 
     if (showFirstStep) {
       return (
@@ -122,9 +125,9 @@ export default class App extends Component {
           handleJoinShareIdChange={handleJoinShareIdChange}
           handleDataLabelChange={handleDataLabelChange}
           handleDataContextChange={handleDataContextChange}
-          joinShare={joinShare}
+          joinShare={this.joinShare}
           updateState={setState}
-          selectedContextOption={selectedContextOption}
+          selectedContextOption={this.selectedContextOption}
           availableContextOptions={availableContextOptions}
           />
        )
@@ -136,14 +139,14 @@ export default class App extends Component {
           lastPersonalDataLabel={this.state.lastPersonalDataLabel}
           handleJoinShareIdChange={handleJoinShareIdChange}
           handleDataLabelChange={handleDataLabelChange}
-          joinShare={joinShare}
+          joinShare={this.joinShare}
           updateState={setState}
         />
       )
     } else if (shareExistingTable) {
       return (
         <ShareExistingTable
-          selectedContextOption={selectedContextOption}
+          selectedContextOption={this.selectedContextOption}
           availableContextOptions={availableContextOptions}
           personalDataLabel={this.state.personalDataLabel}
           lastPersonalDataLabel={this.state.lastPersonalDataLabel}
@@ -383,8 +386,8 @@ export default class App extends Component {
 
   joinShare = async () => {
     await this.updatePersonalDataLabelAndKey();
-    const {joinShareId: shareId, personalDataKey, personalDataLabel, selectedDataContext,
-      joinAndMergeTable } = this.state;
+    const {joinShareId: shareId, personalDataKey, personalDataLabel, joinAndMergeTable } = this.state;
+    const selectedDataContext = this.selectedContextOption
 
     this.setState({ isInProcessOfSharing: true });
     try {

diff --git a/src/ui-pages/join-and-merge-table.tsx b/src/ui-pages/join-and-merge-table.tsx
@@ -26,13 +26,13 @@ export const JoinAndMergeTable = (props: JoinAndMergeTableProps) => {
       <div className="select-stack">
         <div>{SELECT_TABLE_TO_MERGE}</div>
         {availableContextOptions.length > 0
-            ? <select value={selectedContextOption} onChange={handleDataContextChange}>
-                {availableContextOptions}
-              </select>
-            : <div className="warning">
-                {NO_TABLES_TO_MERGE}
-              </div>
-          }
+          ? <select value={selectedContextOption} onChange={handleDataContextChange}>
+              {availableContextOptions}
+            </select>
+          : <div className="warning">
+              {NO_TABLES_TO_MERGE}
+            </div>
+        }
       </div>
       <div className="input-stack">
         <div>{PROVIDE_NAME_OR_LABEL}</div>
@@ -51,7 +51,9 @@ export const JoinAndMergeTable = (props: JoinAndMergeTableProps) => {
         </button>
         <button
           disabled={!selectedContextOption || !joinShareId || (!personalDataLabel && !lastPersonalDataLabel)}
-          onClick={joinShare}>{BEGIN_COLLABORATION}
+          onClick={joinShare}
+        >
+            {BEGIN_COLLABORATION}
         </button>
       </div>
     </div>