Display message after mongo update with meteor-react

help
1

Hi guys,

I’m just starting to learn meteor / react and have some issues, I’m trying to show a success / error message after an update operation, I’ve tried several ways with no luck, here is my App.jsx:

class App extends Component {
    getProfile(){
        return this.props.profile.map((item)=>(
            <div>
                <Profile key={item.owner} profile={item} />
            </div>
        ));
    }

    render() {
        return (
            <div className="container">
                <header>
                    <AccountsUIWrapper />
                    <h1>Customer Portal</h1>
                </header>

                <div>
                    {this.getProfile()}
                </div>
            </div>
        );
    }
}


App.propTypes = {
    profile: PropTypes.array.isRequired,
    currentUser: PropTypes.object,
};

export default createContainer(() => {
    return {
        profile: Customers.find({"owner": Meteor.userId()}).fetch(),
        currentUser: Meteor.user(),
    };
}, App);

This is the profile component:

export default class Profile extends Component {
  handleUpdate(event){
        event.preventDefault();
        var temp = Customers.find({"owner": Meteor.userId()}).fetch();

        Customers.update({_id : temp[0]._id}, {$set: { agents: this.refs.agents.value, account: this.refs.account.value, token: this.refs.token.value } }, function(error, affectedDocs) {
          if (error) {
            console.log(error);
            throw new Meteor.Error(500, error.message);
          } else {
            console.log("SUCCESS");
          }
        });
    }
  render() {
    return (
      <div>
        <li>Account Id: {this.props.profile.owner}</li>
        <li>Zendesk Account:{this.props.profile.account}</li>
        <li># of Agents: {this.props.profile.agents}</li>
        <li>Authorization Token: {this.props.profile.token}</li>
        <br /><br /><br />
        <div className="profile-edit">
          <form id="profileForm" onSubmit={this.handleUpdate.bind(this)}>
              <table className="profile-edit-table">
                  <tbody>
                      <tr>
                          <td>Account ID:</td>
                          <td>{this.props.profile.owner}<input type="hidden" ref="pId" value={this.props.profile._id} /></td>
                      </tr>
                      <tr>
                          <td>Zendesk Account:</td>
                          <td><input type="text" ref="token" defaultValue={this.props.profile.token} /></td>
                      </tr>
                      <tr>    
                          <td>Number of Agents:</td>
                          <td><input type="text" ref="account" defaultValue={this.props.profile.account} /></td>
                      </tr>
                      <tr>    
                          <td>Authorization Token:</td>
                          <td><input type="text" ref="agents" defaultValue={this.props.profile.agents} /></td>
                      </tr>
                      <tr>
                        <td><div ref="message">show message here somehow</div></td>
                        <td className="text-right"><input type="submit" value="save" /></td>
                      </tr>
                  </tbody>
              </table>
          </form>
        </div>
      </div>
    );
  }
}
 
Profile.propTypes = {
  profile: PropTypes.object.isRequired
};

Any help is appreciated, I’ve been looking at examples and tutorials all day without luck.

2

Have a look at meteor-react-start-app.
Let me know if you have any questions relating this example to your code above.

3

Thanks, I went through the code (and I did the tutorial from the meteor site) but I still can’t seem to get this to work.

4

Do you mean to show your success message in the field below?[quote=“murtez, post:1, topic:31102”]
<td><div ref=“message”>show message here somehow</div></td>
[/quote]

5

Hi there. I also had same question after reading tutorial and github todos app. But after reading through guide & docs :slight_smile: found a solution: errors & success messages are like globals, happen in different components, but responsible to display messages is a specialised component. So who is global & reactive? Docs says the SESSION variables :slight_smile: So the error helper callback, would set a SESSION var errorMsg or successMsg: Session.set('errorMsg', msg), specialised component would peak with Session.get('errorMsg'). I use material-ui Snackbar component to display message.

Container (~ Redux Design Pattern)

const Methods = {
    addDay({activityId, date, done}) {
        insertDay.call(
            {activityId, date, done},
            (err) => {
                handleError(err, 'Day added!')
            })
    },
...

Error Helper

import { Session } from 'meteor/session'

export const handleError = (error, successMsg) => {

    if(error){
        const msg = error.reason ? error.reason : error.error
        Session.set('errorMsg', msg)
    }
    else {
        // SUCCESS
        Session.set(
            'successMsg',
            successMsg ? successMsg : 'Operation succeeded!')
    }
}

ErrorSuccessMsg Container & Component

...
errorMsg: Session.get('errorMsg'),
successMsg: Session.get('successMsg'),
...
render() {
    return (
      <div>
        <Snackbar
          open={!!(this.props.successMsg)}
          message={this.props.successMsg || ''}
          autoHideDuration={4000}
          onRequestClose={this.handleRequestClose}
          className='successMsg'
        />
...