Move functions out of constructor into renderForm()

concord-consortium · Aug 29, 2024 · 2e10484 · 2e10484
1 parent f2fcc13
commit 2e10484
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 30 deletions.
diff --git a/cypress/e2e/workspace.test.ts b/cypress/e2e/workspace.test.ts
@@ -8,7 +8,7 @@ context("Test the overall app", () => {
 
   describe("Desktop functionalities", () => {
     it("renders with text", () => {
-      ae.getApp().invoke("text").should("include", "Allow others to join your table");
+      ae.getApp().invoke("text").should("include", "Begin sharing a table");
     });
   });
 });
diff --git a/src/App.tsx b/src/App.tsx
@@ -22,16 +22,6 @@ let database: DB;
 
 export default class App extends Component {
 
-  constructor() {
-    super({});
-    this.setState = this.setState.bind(this);
-    this.handleJoinShareIdChange = this.handleJoinShareIdChange.bind(this);
-    this.handleDataLabelChange = this.handleDataLabelChange.bind(this);
-    this.joinShare = this.joinShare.bind(this);
-    this.handleDataContextChange = this.handleDataContextChange.bind(this);
-    this.initiateShare = this.initiateShare.bind(this);
-  }
-
   public state: IState = {
     id: "",
     availableDataContexts: [],
@@ -90,25 +80,32 @@ export default class App extends Component {
     const showShareTableOptions = shareTable && !joinTable && noSelectedSubOptions;
     const showJoinTableOptions = !shareTable && joinTable && noSelectedSubOptions;
 
+    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 = () => this.initiateShare();
+
     const availableContextOptions = availableDataContexts.map((dc: DataContext) =>
       <option key={dc.name} value={dc.name}>{dc.title}</option>
     );
     const selectedContextOption = selectedDataContext || lastSelectedDataContext || kNewSharedTable;
 
     if (showFirstStep) {
       return (
-        <FirstPage updateState={this.setState} />
+        <FirstPage updateState={setState} />
       )
     } else if (showJoinTableOptions) {
       return (
         <JoinOptions
-          updateState={this.setState}
+          updateState={setState}
         />
       )
     } else if (showShareTableOptions) {
       return (
         <ShareOptions
-          updateState={this.setState}
+          updateState={setState}
         />
       )
     } else if (joinAndMergeTable) {
@@ -117,11 +114,11 @@ export default class App extends Component {
             joinShareId={this.state.joinShareId}
             personalDataLabel={this.state.personalDataLabel}
             lastPersonalDataLabel={this.state.lastPersonalDataLabel}
-            handleJoinShareIdChange={this.handleJoinShareIdChange}
-            handleDataLabelChange={this.handleDataLabelChange}
-            handleDataContextChange={this.handleDataContextChange}
-            joinShare={this.joinShare}
-            updateState={this.setState}
+            handleJoinShareIdChange={handleJoinShareIdChange}
+            handleDataLabelChange={handleDataLabelChange}
+            handleDataContextChange={handleDataContextChange}
+            joinShare={joinShare}
+            updateState={setState}
             selectedContextOption={selectedContextOption}
             availableContextOptions={availableContextOptions}
            />
@@ -132,10 +129,10 @@ export default class App extends Component {
             joinShareId={this.state.joinShareId}
             personalDataLabel={this.state.personalDataLabel}
             lastPersonalDataLabel={this.state.lastPersonalDataLabel}
-            handleJoinShareIdChange={this.handleJoinShareIdChange}
-            handleDataLabelChange={this.handleDataLabelChange}
-            joinShare={this.joinShare}
-            updateState={this.setState}
+            handleJoinShareIdChange={handleJoinShareIdChange}
+            handleDataLabelChange={handleDataLabelChange}
+            joinShare={joinShare}
+            updateState={setState}
           />
         )
       } else if (shareExistingTable) {
@@ -145,21 +142,21 @@ export default class App extends Component {
             availableContextOptions={availableContextOptions}
             personalDataLabel={this.state.personalDataLabel}
             lastPersonalDataLabel={this.state.lastPersonalDataLabel}
-            handleDataContextChange={this.handleDataContextChange}
-            handleDataLabelChange={this.handleDataLabelChange}
-            initiateShare={this.initiateShare}
-            updateState={this.setState}
+            handleDataContextChange={handleDataContextChange}
+            handleDataLabelChange={handleDataLabelChange}
+            initiateShare={initiateShare}
+            updateState={setState}
           />
         )
     } else if (createNewTable) {
       return (
         <ShareNewTable
           newTableName={this.state.newTableName || ""}
-          updateState={this.setState}
+          updateState={setState}
           personalDataLabel={this.state.personalDataLabel}
           lastPersonalDataLabel={this.state.lastPersonalDataLabel}
-          handleDataLabelChange={this.handleDataLabelChange}
-          initiateShare={this.initiateShare}
+          handleDataLabelChange={handleDataLabelChange}
+          initiateShare={initiateShare}
         />
       )
     }