
// CSS
import styles from './style.css';

import React from 'react';
import PureComponent from 'react-pure-render/component';
import classNames from 'classnames';

class UserList extends PureComponent {

    constructor() {
        super();
        this._renderList = this._renderList.bind(this);
        this._onNameClick = this._onNameClick.bind(this);
        this._onChangeRoleClick = this._onChangeRoleClick.bind(this);
    }

    render() {
        return (
            <div ref="root" className={styles.wrap}>
                <div className={styles.bird}></div>
                <div className={styles.list}>
                    {this._renderList()}
                </div>
            </div>
        );
    }

    _renderList() {
        const { users } = this.props;
        let list = [];
        users.forEach((user, idx) => {
            const name = (
                <a
                    className="link ut-name"
                    data-id={idx}
                    onClick={this._onNameClick}
                >{user.username}</a>);
            const tr = (
                <tr key={idx}>
                    <td className={styles.name}>
                        {name}
                    </td>
                    <td className={`${styles.role} ut-role`}>
                        <div
                            className={styles.roleBtn}
                            onClick={this._onChangeRoleClick}
                            data-id={idx}
                        >
                            <span className={classNames(this._generateClass('Admin', user.role))}>
                                admin
                            </span>
                            <span
                                className={classNames(this._generateClass('Designer', user.role))}
                            >
                                designer
                            </span>
                            <span className={classNames(this._generateClass('User', user.role))}>
                                user
                            </span>
                        </div>
                    </td>
                </tr>
            );
            list.push(tr);
        });
        return (
            <table className={styles.listTb}>
                <thead>
                    <tr>
                        <th className={styles.name}>
                            <span>Name</span>
                        </th>
                        <th className={styles.role}>
                            <span>Role</span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {list}
                </tbody>
            </table>
        );
    }

    _generateClass(_role, _userRole) {
        return {
            [`ut-${_role.toLowerCase()}`]: true,
            [`${styles.active}`]: _userRole === _role
        };
    }

    _onNameClick(e) {
        const { users, usersActions, webpageActions } = this.props;
        usersActions.setSelectedUser(users[e.currentTarget.getAttribute('data-id')]);
        webpageActions.setWebpage('userSurvey');
    }

    _onChangeRoleClick(e) {
        const idx = e.currentTarget.getAttribute('data-id');
        const role = e.target.innerHTML.replace(/[a-z]/, (a) => a.toUpperCase());
        this.props.usersActions.changeUserRole(idx, role);
    }
}

export default UserList;

@@ -804,16 +804,69 @@
    users
+.sort((a, b) =%3E a.username %3E b.username)%0A            
 .forEach
@@ -891,24 +891,28 @@
             
+    
 const name =
@@ -934,11 +934,19 @@
     
+   
+ 
 %3Ca%0A
+    
     
@@ -998,32 +998,36 @@
                 
+   
+ 
 data-id=%7Bidx%7D%0A  
@@ -1016,32 +1016,36 @@
   data-id=%7Bidx%7D%0A
+    
                 
@@ -1068,32 +1068,36 @@
 s._onNameClick%7D%0A
+    
                 
@@ -1119,16 +1119,254 @@
 %7D%3C/a%3E);%0A
+                const role = %5B%0A                    this._generateClass('Admin', user.role),%0A                    this._generateClass('Designer', user.role),%0A                    this._generateClass('User', user.role)%0A                %5D;%0A    
         
@@ -1378,24 +1378,28 @@
 onst tr = (%0A
+    
             
@@ -1429,32 +1429,36 @@
                 
+  
+  
 %3Ctd className=%7Bs
@@ -1494,16 +1494,20 @@
         
+    
 %7Bname%7D%0A 
@@ -1517,38 +1517,46 @@
                 
+   
+ 
 %3C/td%3E%0A
+    
                 
@@ -1629,13 +1629,21 @@
     
+   
+ 
 %3Cdiv%0A
+    
     
@@ -1693,16 +1693,20 @@
 oleBtn%7D%0A
+    
         
@@ -1779,32 +1779,36 @@
                 
+    
 data-id=%7Bidx%7D%0A  
@@ -1797,32 +1797,36 @@
   data-id=%7Bidx%7D%0A
+    
                 
@@ -1855,32 +1855,36 @@
                 
+    
 %3Cspan className=
@@ -1899,51 +1899,23 @@
 mes(
-this._generateClass('Admin', user.
 role
-)
+%5B0%5D
 )%7D%3E%0A
+    
     
@@ -1948,16 +1948,20 @@
   admin%0A
+    
         
@@ -2020,14 +2020,22 @@
     
+    
 %3Cspan%0A
+    
     
@@ -2088,50 +2088,15 @@
 mes(
-this._generateClass('Designer', user.
 role
-)
+%5B1%5D
 )%7D%0A 
@@ -2114,34 +2114,42 @@
                 
+  
-%3E%0A
+  %3E%0A    
                 
@@ -2197,32 +2197,36 @@
             
+  
+  
 %3C/span%3E%0A
             
@@ -2205,32 +2205,36 @@
         %3C/span%3E%0A
+    
                 
@@ -2277,50 +2277,23 @@
 mes(
-this._generateClass('User', user.
 role
-)
+%5B2%5D
 )%7D%3E%0A
+    
     
@@ -2345,32 +2345,36 @@
                 
+    
 %3C/span%3E%0A        
@@ -2381,39 +2381,47 @@
                 
+    
 %3C/div%3E%0A
+    
                 
@@ -2438,38 +2438,46 @@
                 
+    
 %3C/tr%3E%0A
+    
             );%0A 
@@ -2487,16 +2487,20 @@
         
+    
 list.pus
@@ -2506,16 +2506,20 @@
 sh(tr);%0A
+    
         

Order user list by username