List users reusing array-store

src/containers/users.js

@@ -25,20 +25,33 @@ import { Button, Modal, Glyphicon } from 'react-bootstrap';
 
 import AppDispatcher from '../app-dispatcher';
 import UserStore from '../stores/user-store';
+import UsersStore from '../stores/users-store';
 
 import Table from '../components/table';
 import TableColumn from '../components/table-column';
-import NewProjectDialog from '../components/dialog/new-project';
-import EditProjectDialog from '../components/dialog/edit-project';
+// import NewUserDialog from '../components/dialog/new-user';
+// import EditUserDialog from '../components/dialog/edit-user';
 
-class Projects extends Component {
+class Users extends Component {
   static getStores() {
-    return [ UserStore ];
+    return [ UserStore, UsersStore ];
   }
 
-  static calculateState() {
+  static calculateState(prevState, props) {
+
+    let tokenState = UserStore.getState().token;
+
+    // If there is a token available and this method was called as a result of loading users
+    if (!prevState && tokenState) {
+      AppDispatcher.dispatch({
+        type: 'users/start-load',
+        token: tokenState
+      });
+    }
+
     return {
-      users: UserStore.getState().users,
+      token: tokenState,
+      users: UsersStore.getState(),
 
       newModal: false,
       editModal: false,
@@ -47,18 +60,12 @@ class Projects extends Component {
     };
   }
 
-  componentWillMount() {
-    AppDispatcher.dispatch({
-      type: 'users/start-load'
-    });
-  }
-
   // closeNewModal(data) {
   //   this.setState({ newModal: false });
 
   //   if (data) {
   //     AppDispatcher.dispatch({
-  //       type: 'projects/start-add',
+  //       type: 'users/start-add',
   //       data: data
   //     });
   //   }
@@ -95,8 +102,6 @@ class Projects extends Component {
   // }
 
   render() {
-    
-    this.state.users.map( (user) => console.log('User: %o', user));
 
     return (
       <div>
@@ -108,11 +113,11 @@ class Projects extends Component {
           <TableColumn width='70' editButton deleteButton onEdit={index => this.setState({ editModal: true, modalData: this.state.users[index] })} onDelete={index => this.setState({ deleteModal: true, modalData: this.state.users[index] })} />
         </Table>
 
-        {/*<Button onClick={() => this.setState({ newModal: true })}><Glyphicon glyph='plus' /> Project</Button>
+        <Button onClick={() => this.setState({ newModal: true })}><Glyphicon glyph='plus' /> User</Button>
 
-        <NewProjectDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} simulations={this.state.simulations} />
+        {/*<NewUserDialog show={this.state.newModal} onClose={(data) => this.closeNewModal(data)} />*/}
 
-        <EditProjectDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} project={this.state.modalData} simulations={this.state.simulations} />
+        {/*<EditProjectDialog show={this.state.editModal} onClose={(data) => this.closeEditModal(data)} project={this.state.modalData} simulations={this.state.simulations} />
 
         <Modal show={this.state.deleteModal}>
           <Modal.Header>
@@ -133,4 +138,4 @@ class Projects extends Component {
   }
 }
 
-export default Container.create(Projects);
+export default Container.create(Users);

src/data-managers/users-data-manager.js

@@ -59,12 +59,12 @@ class UsersDataManager extends RestDataManager {
   getUsers(token) {
     RestAPI.get(this.makeURL('/users'), token).then(response => {
       AppDispatcher.dispatch({
-        type: 'users/users-loaded',
-        users: response.users
+        type: 'users/loaded',
+        data: response.users
       });
     }).catch(error => {
       AppDispatcher.dispatch({
-        type: 'users/users-load-error',
+        type: 'users/load-error',
         error: error
       });
     });

src/stores/user-store.js

@@ -79,21 +79,7 @@ class UserStore extends ReduceStore {
 
         }
 
-        return state;
-    
-      case 'users/start-load':
-        console.log('Sending request');
-        UsersDataManager.getUsers(state.token);
-
-        return state;
-
-      case 'users/users-loaded':
-      
-        return Object.assign({}, state, { users: action.users });
-      
-      case 'users/users-load-error':
-        // Users couldn't be loaded. Keep same state
-        return state;
+        return state;    
 
       default:
         return state;

src/stores/users-store.js

@@ -0,0 +1,45 @@
+/**
+ * File: users-store.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 15.03.2017
+ *
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import ArrayStore from './array-store';
+import UsersDataManager from '../data-managers/users-data-manager';
+
+class UsersStore extends ArrayStore {
+  constructor() {
+    super('users', UsersDataManager);
+  }
+
+  reduce(state, action) {
+    switch (action.type) {
+
+      // Override ArrayStore's start-load to pass token
+      case 'users/start-load':
+        UsersDataManager.getUsers(action.token);
+        return state;
+
+      default:
+        return super.reduce(state, action);
+    }
+  }
+
+}
+
+export default new UsersStore();