React + Flash Messages?

react
1

I recently made the change from blaze to React and It’s fine so far however, I am unsure how to implement flash messages in react. In blaze i was using this package: https://atmospherejs.com/mrt/flash-messages . I’m praying I won’t have to create flash messages myself.

Any pointers or tips on how I can convert this package over to react? Or on how I can make my own flash messages. ( I was thinking of a client side collection that expires after several seconds but I couldn’t quite pull off the expiring part).

Thanks!!

2

Here’s Nova’s flash message code:

const Messages = {
  // Local (client-only) collection
  collection: new Meteor.Collection(null),

  flash(content, type) {
    type = (typeof type === 'undefined') ? 'error': type;
    // Store errors in the local collection
    this.collection.insert({content:content, type:type, seen: false, show:true});
  },

  markAsSeen(messageId) {
    this.collection.update(messageId, {$set: {seen:true}});
  },

  clearSeen() {
    this.collection.update({seen:true}, {$set: {show:false}}, {multi:true});
  }
};

Which goes together with a FlashContainer container to get the data:

const FlashContainer = React.createClass({

  mixins: [ReactMeteorData],
  
  getMeteorData() {
    return {
      messages: Messages.collection.find({show: true}).fetch()
    };
  },

  render() {
    return (
      <div className="flash-messages">
        {this.data.messages.map((message, index) => <Flash key={index} message={message} />)}
      </div>
    );
  }

});

And a Flash component to display an individual message:

const Flash = React.createClass({

  componentDidMount() {
    Messages.markAsSeen(this.props.message._id);
  },

  render() {
    return (
      <div className={`flash-message page-message page-message--${this.props.message.type}`}>
        <div className="page-message__text">{this.props.message.content}</div>
      </div>
    )
  }
});

(I left out import/export module stuff)

1 Like
3

Thanks! I got this to work with inspiration from your method. I did it as follows:

FlashContainer = React.createClass({
    mixins: [ReactMeteorData],
    getMeteorData(){
        return {
            flashes: Flashes.collection.find({show: true}).fetch()
        }
    },
    render() {
        if (this.data.flashes.length == 0){
            return(
                <span></span>
            )
        }else{
            return (
                <div>
                    {this.data.flashes.map(function(x, index){
                        return (
                            <div key={index}>
                                <Flash id={x._id} content={x.content} />
                            </div>
                        )
                    })}
                </div>
            )
        }
    }

});

Then I did this

Flashes = {
  collection: new Meteor.Collection(null),

  flash(content, type) {
    type = (typeof type === 'undefined') ? 'error': type;
    this.collection.insert({content:content, type:type, seen: false, show:true});
  }
};

Then to make each one with a fade out i did this

Flash = React.createClass({
	componentDidMount() {
	  $("#" + this.props.id).fadeOut(5000);
	},
	render() {
	  return (
	      <h1 id={this.props.id}>
	          {this.props.content}
	      </h1>
	  )
	}
})

I didn’t need the mark as read status part. It was a bit overkill. Hopefully this helps anyone after me!

1 Like
4

A link to Nova's flash message code or something showing the imports and exports would be nice. It’s much easier to figure out what goes where with those included.

1 Like