From 2d9807ee9ce4502d87f460209e4f843b6fa151dc Mon Sep 17 00:00:00 2001
From: Kaustav Banerjee <kaustav@opencraft.com>
Date: Mon, 12 Aug 2024 18:02:41 +0530
Subject: [PATCH] feat: remove child components from state and use data instead

---
 .../masquerade-widget/MasqueradeWidget.jsx    | 43 +++++++++++--------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx b/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx
index 0808f0ec41..1b834cdfca 100644
--- a/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx
+++ b/src/instructor-toolbar/masquerade-widget/MasqueradeWidget.jsx
@@ -22,7 +22,8 @@ class MasqueradeWidget extends Component {
     this.state = {
       autoFocus: false,
       masquerade: 'Staff',
-      options: [],
+      active: {},
+      available: [],
       shouldShowUserNameInput: false,
       masqueradeUsername: null,
     };
@@ -58,12 +59,30 @@ class MasqueradeWidget extends Component {
   }
 
   onSuccess(data) {
-    const options = this.parseAvailableOptions(data);
+    const { active, available } = this.parseAvailableOptions(data);
     this.setState({
-      options,
+      active,
+      available,
     });
   }
 
+  getOptions() {
+    const options = this.state.available.map((group) => (
+      <MasqueradeWidgetOption
+        groupId={group.groupId}
+        groupName={group.name}
+        key={group.name}
+        role={group.role}
+        selected={this.state.active}
+        userName={group.userName}
+        userPartitionId={group.userPartitionId}
+        userNameInputToggle={(...args) => this.toggle(...args)}
+        onSubmit={(payload) => this.onSubmit(payload)}
+      />
+    ));
+    return options;
+  }
+
   clearError() {
     this.props.onError('');
   }
@@ -80,19 +99,6 @@ class MasqueradeWidget extends Component {
     const data = postData || {};
     const active = data.active || {};
     const available = data.available || [];
-    const options = available.map((group) => (
-      <MasqueradeWidgetOption
-        groupId={group.groupId}
-        groupName={group.name}
-        key={group.name}
-        role={group.role}
-        selected={active}
-        userName={group.userName}
-        userPartitionId={group.userPartitionId}
-        userNameInputToggle={(...args) => this.toggle(...args)}
-        onSubmit={(payload) => this.onSubmit(payload)}
-      />
-    ));
     if (active.userName) {
       this.setState({
         autoFocus: false,
@@ -105,14 +111,13 @@ class MasqueradeWidget extends Component {
     } else if (active.role === 'student') {
       this.setState({ masquerade: 'Learner' });
     }
-    return options;
+    return { active, available };
   }
 
   render() {
     const {
       autoFocus,
       masquerade,
-      options,
       shouldShowUserNameInput,
       masqueradeUsername,
     } = this.state;
@@ -126,7 +131,7 @@ class MasqueradeWidget extends Component {
               {masquerade}
             </Dropdown.Toggle>
             <Dropdown.Menu>
-              {options}
+              {this.getOptions()}
             </Dropdown.Menu>
           </Dropdown>
         </div>