Ember js service and filterBy

Question

i have a service to manage all the errors and alerts in my app. and the code looks like this

Service

import Ember from 'ember';

export default Ember.Service.extend({
messages: null,

init() {
    this._super(...arguments);
    this.set('messages', []);
},

add: function (severity, msg, messageType) {
    if (severity === 'error') {severity = 'danger';}

    var msgObject ={
        severity: severity,
        messageType: messageType,
        msg: msg,
        msgId: new Date()
    };      
    this.get('messages').pushObject(msgObject);
},

remove(msgId) {     
    this.get('messages').removeObject(msgId);
},

empty() {
    this.get('messages').clear();
}
});

Component

import Ember from 'ember';

export default Ember.Component.extend({
messageType:'global',
messageHandler: Ember.inject.service(),

messages: function(){
    return this.get('messageHandler.messages').filterBy('messageType',this.get('messageType'));
}.property('messageHandler.messages'),

actions : {
    dismissAllAlerts: function(){
        this.get('messageHandler').empty();
    },
    dismissAlert: function(msgId){
        this.get('messageHandler').remove(msgId);
    }
}    
}); 

Initializer

export function initialize(container, application) {
application.inject('component', 'messageHandler', 'service:message-handler');
}

export default {
name: 'message-handler',
initialize : initialize
};

Template

import Ember from 'ember';

export default Ember.Component.extend({
messageType:'global',
messageHandler: Ember.inject.service(),

messages: function(){
    return this.get('messageHandler.messages');
}.property('messageHandler.messages'),

actions : {
    dismissAllAlerts: function(){
        this.get('messageHandler').empty();
    },
    dismissAlert: function(msgId){
        this.get('messageHandler').remove(msgId);
    }
}    
}); 

and whenever there is an error i will add it like this

this.get('messageHandler').add('error',"Unable to get ossoi details","global");

my problem is the filterBy in the component is not working. if i remove the filterBy() it works and i can see the error in the template. am kinda new to ember so if anyone can help me figure out what am missing here or if there is a better way of doing this please let me know

Answer 1

filterBy usage is good and it should be working well. but messages computed property will not be recomputed whenever you add/remove item from messageHandler.messages.

messages: Ember.computed('messageHandler.messages.[]', function() {
        return this.get('messageHandler.messages').filterBy('messageType', this.get('messageType'));
    }),

In the above code I used messageHandler.messages.[] as dependant key for the messages computed property so that it will be called for add/remove items.

Refer:https://guides.emberjs.com/v2.13.0/object-model/computed-properties-and-aggregate-data/

Computed properties dependent on an array using the [] key will only update if items are added to or removed from the array, or if the array property is set to a different array.