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.