Skip to content
Permalink
Browse files

Cope with large teams

Ember does not cope with rendering hundreds of users, so force people to
filter their user list before even trying.

Also, `computed.min` and `computed.max` don't work with lots of data, so
replace them with a manual implementation.
  • Loading branch information
alisdair committed Jul 6, 2015
1 parent 5f9ed41 commit 7390bc0120c24674863a5829556a0ca209294a65
Showing with 41 additions and 5 deletions.
  1. +27 −3 app/components/timezone-collection.js
  2. +3 −1 app/controllers/index.js
  3. +11 −1 app/templates/index.hbs
@@ -14,10 +14,34 @@ export default Ember.Component.extend({
users: null,

offsets: Ember.computed.mapBy('users', 'tzOffset'),
earliest: Ember.computed.min('offsets'),
latest: Ember.computed.max('offsets'),

columns: Ember.computed('users.@each', 'earliest', 'latest', function() {
earliest: Ember.computed('offsets.@each', function() {
let min = Infinity;
let offsets = this.get('offsets');

for (let i = 0; i < offsets.length; i++) {
if (offsets[i] < min) {
min = offsets[i];
}
}

return min;
}),

latest: Ember.computed('offsets.@each', function() {
let max = -Infinity;
let offsets = this.get('offsets');

for (let i = 0; i < offsets.length; i++) {
if (offsets[i] > max) {
max = offsets[i];
}
}

return max;
}),

columns: Ember.computed('earliest', 'latest', function() {
let users = this.get('users');
let start = timezoneStart(this.get('earliest'));
let stop = timezoneNext(timezoneStart(this.get('latest')));
@@ -7,6 +7,8 @@ export default Ember.Controller.extend({

users: Ember.computed.readOnly('model'),

tooManyUsers: Ember.computed.gt('filteredUsers.length', 100),

filteredUsers: Ember.computed('search', 'users.{name,realName}', function() {
let users = this.get('users');
let search = this.get('search').toLowerCase();
@@ -19,5 +21,5 @@ export default Ember.Controller.extend({
return users.filter(user => {
return matches(user.get('name')) || matches(user.get('realName'));
});
})
}).readOnly()
});
@@ -1 +1,11 @@
{{timezone-collection users=filteredUsers}}
{{#if tooManyUsers}}
<div class="text-content text-content--cta">
<h2>Whoa, too many users!</h2>

<p>Sorry, this app doesn't cope well with huge Slack teams! Found <strong>{{pluralize filteredUsers.length 'user'}}</strong>.</p>

<p>Please search for people by name to reduce the number of users.</p>
</div>
{{else}}
{{timezone-collection users=filteredUsers}}
{{/if}}

0 comments on commit 7390bc0

Please sign in to comment.