Merged contents of MoreDirectChannelsModal and ChannelMembersModal into UserList

1 files changed, 29 insertions, 186 deletions

diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx
index 3b72b251c..c85b5e9c5 100644
--- a/web/react/components/more_direct_channels.jsx
+++ b/web/react/components/more_direct_channels.jsx
@@ -2,36 +2,24 @@
 // See License.txt for license information.
 
 const Modal = ReactBootstrap.Modal;
+import FilteredUserList from './filtered_user_list.jsx';
 import UserStore from '../stores/user_store.jsx';
 import * as Utils from '../utils/utils.jsx';
 
-import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
+import {FormattedMessage} from 'mm-intl';
 
-const holders = defineMessages({
-    member: {
-        id: 'more_direct_channels.member',
-        defaultMessage: 'Member'
-    },
-    search: {
-        id: 'more_direct_channels.search',
-        defaultMessage: 'Search members'
-    }
-});
-
-class MoreDirectChannels extends React.Component {
+export default class MoreDirectChannels extends React.Component {
     constructor(props) {
         super(props);
 
-        this.handleFilterChange = this.handleFilterChange.bind(this);
         this.handleHide = this.handleHide.bind(this);
         this.handleShowDirectChannel = this.handleShowDirectChannel.bind(this);
         this.handleUserChange = this.handleUserChange.bind(this);
 
-        this.createRowForUser = this.createRowForUser.bind(this);
+        this.createJoinDirectChannelButton = this.createJoinDirectChannelButton.bind(this);
 
         this.state = {
             users: this.getUsersFromStore(),
-            filter: '',
             loadingDMChannel: -1
         };
     }
@@ -67,32 +55,20 @@ class MoreDirectChannels extends React.Component {
     }
 
     onShow() {
-        if (Utils.isMobile()) {
-            $(ReactDOM.findDOMNode(this.refs.userList)).css('max-height', $(window).height() - 250);
+        // TODO ugh
+        /*if (Utils.isMobile()) {
+            $(ReactDOM.findDOMNode(this.refs.modal)).css('max-height', $(window).height() - 250);
         } else {
-            $(ReactDOM.findDOMNode(this.refs.userList)).perfectScrollbar();
-            $(ReactDOM.findDOMNode(this.refs.userList)).css('max-height', $(window).height() - 300);
-        }
-    }
-
-    handleFilterChange() {
-        const filter = ReactDOM.findDOMNode(this.refs.filter).value;
-
-        if ($(window).width() > 768) {
-            $(ReactDOM.findDOMNode(this.refs.userList)).scrollTop(0);
-        }
-
-        if (filter !== this.state.filter) {
-            this.setState({filter});
-        }
+            console.log(ReactDOM.findDOMNode(this.refs.modal));
+            console.log($(ReactDOM.findDOMNode(this.refs.modal)));
+            $(ReactDOM.findDOMNode(this.refs.modal)).css('max-height', $(window).height() - 300);
+        }*/
     }
 
     handleHide() {
         if (this.props.onModalDismissed) {
             this.props.onModalDismissed();
         }
-
-        this.setState({filter: ''});
     }
 
     handleShowDirectChannel(teammate, e) {
@@ -120,145 +96,34 @@ class MoreDirectChannels extends React.Component {
         this.setState({users: this.getUsersFromStore()});
     }
 
-    createRowForUser(user) {
-        const details = [];
-
-        const fullName = Utils.getFullName(user);
-        if (fullName) {
-            details.push(
-                <span
-                    key={`${user.id}__full-name`}
-                    className='full-name'
-                >
-                    {fullName}
-                </span>
-            );
-        }
-
-        if (user.nickname) {
-            const separator = fullName ? ' - ' : '';
-            details.push(
-                <span
-                    key={`${user.nickname}__nickname`}
-                >
-                    {separator + user.nickname}
-                </span>
-            );
-        }
-
-        let joinButton;
+    createJoinDirectChannelButton({user}) {
         if (this.state.loadingDMChannel === user.id) {
-            joinButton = (
+            return (
                 <img
                     className='channel-loading-gif'
                     src='/static/images/load.gif'
                 />
             );
-        } else {
-            joinButton = (
-                <button
-                    type='button'
-                    className='btn btn-primary btn-message'
-                    onClick={this.handleShowDirectChannel.bind(this, user)}
-                >
-                    <FormattedMessage
-                        id='more_direct_channels.message'
-                        defaultMessage='Message'
-                    />
-                </button>
-            );
         }
 
         return (
-            <tr key={'direct-channel-row-user' + user.id}>
-                <td
-                    key={user.id}
-                    className='direct-channel'
-                >
-                    <img
-                        className='profile-img pull-left'
-                        width='38'
-                        height='38'
-                        src={`/api/v1/users/${user.id}/image?time=${user.update_at}&${Utils.getSessionIndex()}`}
-                    />
-                    <div className='more-name'>
-                        {user.username}
-                    </div>
-                    <div className='more-description'>
-                        {details}
-                    </div>
-                </td>
-                <td className='td--action lg'>
-                    {joinButton}
-                </td>
-            </tr>
+            <button
+                type='button'
+                className='btn btn-primary btn-message'
+                onClick={this.handleShowDirectChannel.bind(this, user)}
+            >
+                <FormattedMessage
+                    id='more_direct_channels.message'
+                    defaultMessage='Message'
+                />
+            </button>
         );
     }
 
     render() {
-        const {formatMessage} = this.props.intl;
-        if (!this.props.show) {
-            return null;
-        }
-
-        let users = this.state.users;
-        if (this.state.filter) {
-            const filter = this.state.filter.toLowerCase();
-
-            users = users.filter((user) => {
-                return user.username.toLowerCase().indexOf(filter) !== -1 ||
-                    user.first_name.toLowerCase().indexOf(filter) !== -1 ||
-                    user.last_name.toLowerCase().indexOf(filter) !== -1 ||
-                    user.nickname.toLowerCase().indexOf(filter) !== -1;
-            });
-        }
-
-        const userEntries = users.map(this.createRowForUser);
-
-        if (userEntries.length === 0) {
-            userEntries.push(
-                <tr key='no-users-found'><td>
-                    <FormattedMessage
-                        id='more_direct_channels.notFound'
-                        defaultMessage='No users found :('
-                    />
-                </td></tr>);
-        }
-
-        let memberString = formatMessage(holders.member);
-        if (users.length !== 1) {
-            memberString += 's';
-        }
-
-        let count;
-        if (users.length === this.state.users.length) {
-            count = (
-                <FormattedMessage
-                    id='more_direct_channels.count'
-                    defaultMessage='{count} {member}'
-                    values={{
-                        count: users.length,
-                        member: memberString
-                    }}
-                />
-            );
-        } else {
-            count = (
-                <FormattedMessage
-                    id='more_direct_channels.countTotal'
-                    defaultMessage='{count} {member} of {total} Total'
-                    values={{
-                        count: users.length,
-                        member: memberString,
-                        total: this.state.users.length
-                    }}
-                />
-            );
-        }
-
         return (
             <Modal
-                dialogClassName='more-modal'
+                dialogClassName='more-modal more-direct-channels'
                 show={this.props.show}
                 onHide={this.handleHide}
             >
@@ -270,30 +135,11 @@ class MoreDirectChannels extends React.Component {
                         />
                     </Modal.Title>
                 </Modal.Header>
-                <Modal.Body ref='modalBody'>
-                    <div className='filter-row'>
-                        <div className='col-sm-6'>
-                            <input
-                                ref='filter'
-                                className='form-control filter-textbox'
-                                placeholder={formatMessage(holders.search)}
-                                onInput={this.handleFilterChange}
-                            />
-                        </div>
-                        <div className='col-sm-6'>
-                            <span className='member-count'>{count}</span>
-                        </div>
-                    </div>
-                    <div
-                        ref='userList'
-                        className='user-list'
-                    >
-                        <table className='more-table table'>
-                            <tbody>
-                                {userEntries}
-                            </tbody>
-                        </table>
-                    </div>
+                <Modal.Body>
+                    <FilteredUserList
+                        users={this.state.users}
+                        actions={[this.createJoinDirectChannelButton]}
+                    />
                 </Modal.Body>
                 <Modal.Footer>
                     <button
@@ -313,9 +159,6 @@ class MoreDirectChannels extends React.Component {
 }
 
 MoreDirectChannels.propTypes = {
-    intl: intlShape.isRequired,
     show: React.PropTypes.bool.isRequired,
     onModalDismissed: React.PropTypes.func
 };
-
-export default injectIntl(MoreDirectChannels);