Work on user add/remove from scenarios: use async dispatches instead of function calls; list of users updates now after adding/removing a user, a notification is shown upon error #220

src/scenario/scenario-store.js

@@ -18,6 +18,7 @@
 
 import ScenariosDataManager from './scenarios-data-manager';
 import ArrayStore from '../common/array-store';
+import NotificationsDataManager from "../common/data-managers/notifications-data-manager";
 
 
 class ScenarioStore extends ArrayStore{
@@ -25,58 +26,18 @@ class ScenarioStore extends ArrayStore{
     super('scenarios', ScenariosDataManager);
   }
 
-  // calls to VILLASweb backend
-  getUsers(token, id) {
-    ScenariosDataManager.getUsers(token, id);
-  }
-
-  addUser(token, id, username) {
-    ScenariosDataManager.addUser(token, id, username);
-  }
-
-  deleteUser(token, id, username) {
-    ScenariosDataManager.deleteUser(token, id, username);
-  }
-
-  /* store functions, called when calls to backend have returned */
-
+  // store function, called when calls to backend have returned
   // save users after they are loaded ('getUsers' call)
   storeUsers(state, action) {
     let scenarioID = action.scenarioID;
     state.forEach((element, index, array) => {
       if (element.id === scenarioID) {
         array[index]["users"] = action.users;
-        this.__emitChange();
-        return state;
       }
     })
-  }
+    this.__emitChange();
+    return state;
 
-  // save new user after it was added to scenario ('addUser' call)
-  storeUser(state, action) {
-    let scenarioID = action.scenarioID;
-    state.forEach((element, index, array) => {
-      if (element.id === scenarioID) {
-        array[index]["users"].push(action.user);
-        this.__emitChange();
-        return state;
-      }
-    })
-  }
-
-  // remove user from ScenarioStore
-  removeUser(state, action) {
-    let scenarioID = action.scenarioID;
-    state.forEach((element, index, array) => {
-      if (element.id === scenarioID) {
-        const userindex = array[index]["users"].indexOf(action.user);
-        if (index > -1) {
-          array[index]["users"].splice(userindex, 1);
-          this.__emitChange();
-        }
-        return state;
-      }
-    })
   }
 
   reduce(state, action) {
@@ -112,14 +73,33 @@ class ScenarioStore extends ArrayStore{
           return super.reduce(state, action);
         }
 
-      case 'scenarios/users':
+      case 'scenarios/start-load-users':
+        this.dataManager.getUsers(action.token, action.data);
+        return super.reduce(state, action);
+
+      case 'scenarios/users-loaded':
         return this.storeUsers(state, action);
 
-      case 'scenarios/user-added':
-        return this.storeUser(state, action);
+      case 'scenarios/add-user':
+        this.dataManager.addUser(action.token, action.data, action.username);
+        return super.reduce(state, action);
 
-      case 'scenarios/user-deleted':
-        return this.removeUser(state, action);
+      case 'scenarios/remove-user':
+        this.dataManager.deleteUser(action.token, action.data, action.username)
+        return super.reduce(state, action);
+
+      case 'scenarios/users-error':
+        if (action.error && !action.error.handled && action.error.response) {
+
+          const SCENARIO_USERS_ERROR_NOTIFICATION = {
+            title: 'Failed to modify scenario users ',
+            message: action.error.response.body.message,
+            level: 'error'
+          };
+          NotificationsDataManager.addNotification(SCENARIO_USERS_ERROR_NOTIFICATION);
+
+        }
+        return super.reduce(state, action);
 
       default:
         return super.reduce(state, action);

src/scenario/scenario.js

@@ -108,7 +108,6 @@ class Scenario extends React.Component {
   }
 
   componentDidMount() {
-    ScenarioStore.getUsers(this.state.sessionToken, this.state.scenario.id);
 
     //load selected scenario
     AppDispatcher.dispatch({
@@ -117,6 +116,13 @@ class Scenario extends React.Component {
       token: this.state.sessionToken
     });
 
+
+    AppDispatcher.dispatch({
+      type: 'scenarios/start-load-users',
+      data: this.state.scenario.id,
+      token: this.state.sessionToken
+    });
+
     // load ICs to enable that component configs and dashboards work with them
     AppDispatcher.dispatch({
       type: 'ics/start-load',
@@ -129,12 +135,23 @@ class Scenario extends React.Component {
   ############################################## */
 
   addUser() {
-    ScenarioStore.addUser(this.state.sessionToken, this.state.scenario.id, this.userToAdd);
+    AppDispatcher.dispatch({
+      type: 'scenarios/add-user',
+      data: this.state.scenario.id,
+      username: this.userToAdd,
+      token: this.state.sessionToken
+    });
   }
 
   closeDeleteUserModal() {
     this.setState({ deleteUserModal: false });
-    ScenarioStore.deleteUser(this.state.sessionToken, this.state.scenario.id, this.state.deleteUserName);
+
+    AppDispatcher.dispatch({
+      type: 'scenarios/remove-user',
+      data: this.state.scenario.id,
+      username: this.state.deleteUserName,
+      token: this.state.sessionToken
+    });
   }
 
   /* ##############################################
@@ -404,36 +421,6 @@ class Scenario extends React.Component {
     return <div className='section'>
       <h1>{this.state.scenario.name}</h1>
 
-      {/*Scenario Users table*/}
-      <h2 style={tableHeadingStyle}>Users</h2>
-      <div>
-        <Table data={this.state.scenario.users}>
-          <TableColumn title='Name' dataKey='username' link='/users/' linkKey='id' />
-          <TableColumn title='Mail' dataKey='mail' />
-          <TableColumn
-            title=''
-            width='200'
-            deleteButton
-            onDelete={(index) => this.setState({ deleteUserModal: true, deleteUserName: this.state.scenario.users[index].username, modalUserIndex: index })}
-          />
-        </Table>
-
-        <InputGroup style={{ width: 400, float: 'right' }}>
-          <FormControl
-            placeholder="Username"
-            onChange={(e) => this.userToAdd = e.target.value}
-          />
-          <InputGroup.Append>
-            <Button
-              type="submit"
-              onClick={() => this.addUser()}>
-              Add User
-            </Button>
-          </InputGroup.Append>
-        </InputGroup><br/>
-      </div>
-
-      <DeleteDialog title="user" name={this.state.deleteUserName} show={this.state.deleteUserModal} onClose={(c) => this.closeDeleteUserModal(c)} />
 
 
       {/*Component Configurations table*/}
@@ -544,6 +531,38 @@ class Scenario extends React.Component {
       <DeleteDialog title="dashboard" name={this.state.modalDashboardData.name} show={this.state.deleteDashboardModal} onClose={(e) => this.closeDeleteDashboardModal(e)} />
 
 
+      {/*Scenario Users table*/}
+      <h2 style={tableHeadingStyle}>Users sharing this scenario</h2>
+      <div>
+        <Table data={this.state.scenario.users}>
+          <TableColumn title='Name' dataKey='username' link='/users/' linkKey='id' />
+          <TableColumn title='Mail' dataKey='mail' />
+          <TableColumn
+            title=''
+            width='200'
+            deleteButton
+            onDelete={(index) => this.setState({ deleteUserModal: true, deleteUserName: this.state.scenario.users[index].username, modalUserIndex: index })}
+          />
+        </Table>
+
+        <InputGroup style={{ width: 400, float: 'right' }}>
+          <FormControl
+            placeholder="Username"
+            onChange={(e) => this.userToAdd = e.target.value}
+          />
+          <InputGroup.Append>
+            <Button
+              type="submit"
+              onClick={() => this.addUser()}>
+              Add User
+            </Button>
+          </InputGroup.Append>
+        </InputGroup><br/><br/>
+      </div>
+
+      <DeleteDialog title="user from scenario:" name={this.state.deleteUserName} show={this.state.deleteUserModal} onClose={(c) => this.closeDeleteUserModal(c)} />
+
+
     </div>;
   }
 }

src/scenario/scenarios-data-manager.js

@@ -28,9 +28,9 @@ class ScenariosDataManager extends RestDataManager {
   }
 
   getUsers(token, id) {
-    RestAPI.get(this.makeURL('/scenarios/' + id + '/users/'), token).then(response => {
+    RestAPI.get(this.makeURL('/scenarios/' + id + '/users'), token).then(response => {
       AppDispatcher.dispatch({
-        type: 'scenarios/users',
+        type: 'scenarios/users-loaded',
         users: response.users,
         scenarioID: id
       });
@@ -46,10 +46,11 @@ class ScenariosDataManager extends RestDataManager {
     let path = id + '/user';
     RestAPI.put(this.requestURL('load/add', path, '?username=' + username), null, token).then(response => {
       AppDispatcher.dispatch({
-        type: 'scenarios/user-added',
-        user: response.user,
-        scenarioID: id
+        type: 'scenarios/start-load-users',
+        data: id,
+        token: token
       });
+
     }).catch(error => {
       AppDispatcher.dispatch({
         type: 'scenarios/users-error',
@@ -62,10 +63,11 @@ class ScenariosDataManager extends RestDataManager {
     let path = id + '/user';
     RestAPI.delete(this.makeURL(this.url + '/' + path + '?username=' + username), token).then(response => {
       AppDispatcher.dispatch({
-        type: 'scenarios/user-deleted',
-        user: response.user,
-        scenarioID: id
+        type: 'scenarios/start-load-users',
+        data: id,
+        token: token
       });
+
     }).catch(error => {
       AppDispatcher.dispatch({
         type: 'scenarios/users-error',

src/user/login-store.js

@@ -79,13 +79,6 @@ class LoginStore extends ReduceStore {
         }
         return state;
 
-      case 'scenarios/users':
-        state.scenarioUsers = action.users;
-        return state;
-
-      case 'scenarios/users-error':
-        return state;
-
       default:
         return state;
     }