This course is archived!

While the concepts of this course are still largely applicable, it's built using an older version of Symfony (4) and React (16).

> JavaScript Frameworks & Tools > React with Symfony
Login to bookmark this video
Buy Access to Course
33.

Success Messages + The Style Attribute

Share this awesome video!

|

Keep on Learning!

Start your All-Access Pass

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

When you a have a super-fancy, AJAX-powered app like we do, success messages and loading animations are essential to having a beautiful user experience. Of course, you will choose how fancy you want to get: more fancy just means more complexity.

Let's look at one rough spot. Watch carefully: there's a delay between when we submit the form and when the new row appears. Sure, that was pretty quick - but if it is ever any slower, it's going to look broken.

The delay is because we are not doing an optimistic UI update: we don't set the state until after the AJAX called finishes. Let's smooth this out: let's add a "loading" row at the bottom of the table while we're saving.

Adding the "saving" State

To do this, our app needs to know whether or not a new rep log is currently being saved. So, we need new state! And this state will definitely live in RepLogApp, because it's the only component that is even aware that AJAX is happening. Call it isSavingNewRepLog and initialize it to false.

97 lines | assets/js/RepLog/RepLogApp.js
// ... lines 1 - 7
constructor(props) {
// ... lines 9 - 10
this.state = {
// ... lines 12 - 15
isSavingNewRepLog: false
};
// ... lines 18 - 22
}
// ... lines 24 - 97

Down below, before we call createRepLog(), add this.setState() to change isSavingNewRepLog to true. And after the AJAX call finishes, let's break this onto multiple lines and then set this same key back to false.

97 lines | assets/js/RepLog/RepLogApp.js
// ... lines 1 - 38
handleAddRepLog(item, reps) {
// ... lines 40 - 44
this.setState({
isSavingNewRepLog: true
});
// ... line 48
createRepLog(newRep)
.then(repLog => {
this.setState(prevState => {
// ... lines 52 - 53
return {
repLogs: newRepLogs,
isSavingNewRepLog: false
};
})
})
;
}
// ... lines 62 - 97

That felt great! Adding and managing new state in our smart component continues to be very simple.

Passing & Using the Prop

Next: where do we need to use this value? The tbody lives in RepLogList: this is where we'll add a temporary row. So, we need to, once again, do the fancy prop-passing dance. First, all state is already passed from RepLogApp to RepLogs. Inside that component, define a new prop type: isSavingNewRepLog as a required bool. Above, destructure it and then, find RepLogList and pass it down.

99 lines | assets/js/RepLog/RepLogs.js
// ... lines 1 - 17
export default function RepLogs(props) {
const {
// ... lines 20 - 28
isSavingNewRepLog
} = props;
// ... lines 31 - 36
return (
// ... lines 38 - 48
<table className="table table-striped">
// ... lines 50 - 57
<RepLogList
// ... lines 59 - 63
isSavingNewRepLog={isSavingNewRepLog}
/>
// ... lines 66 - 73
</table>
// ... lines 75 - 83
);
}
// ... line 86
RepLogs.propTypes = {
// ... lines 88 - 96
isSavingNewRepLog: PropTypes.bool.isRequired,
};

Copy the new prop type and also put it into RpeLogList. In render(), destructure the new variable.

64 lines | assets/js/RepLog/RepLogList.js
// ... lines 1 - 3
export default function RepLogList(props) {
const { highlightedRowId, onRowClick, onDeleteRepLog, repLogs, isLoaded, isSavingNewRepLog } = props;
// ... lines 6 - 53
}
// ... line 55
RepLogList.propTypes = {
// ... lines 57 - 61
isSavingNewRepLog: PropTypes.bool.isRequired
};

Ok! Now we're ready. Move down to after the map function so that our new tr appears at the bottom of the table. To print the new row only when we need it, use the trick we learned earlier: isSavingNewRepLog &&, then open a set of parentheses. Now, just add the tr and td: "Lifting to the database...". Give that a colSpan=4 and className="text-center".

64 lines | assets/js/RepLog/RepLogList.js
// ... lines 1 - 22
return (
// ... lines 24 - 40
{isSavingNewRepLog && (
<tr>
<td
colSpan="4"
className="text-center"
// ... lines 46 - 48
>Lifting to the database ...</td>
</tr>
)}
// ... line 52
);
// ... lines 54 - 64

The style Prop

And, hmm... it might look better if we lower the opacity a bit. Do that with a style prop. But, the style prop works a bit different than the style HTML attribute: instead of being a string of styles, React expects an object of the styles we want. This is actually easier, but the syntax looks a bit nuts. First, we use {} to move into JavaScript mode. Then, we add another set of {} to define an object, with opacity: .5.

64 lines | assets/js/RepLog/RepLogList.js
// ... lines 1 - 45
style={{
opacity: .5
}}
// ... lines 49 - 64

The double {{ almost looks like Twig code. But really, we're doing two separate things: entering JavaScript and then creating an object.

Try it! Move over, refresh, fill out the form and... watch closely. There it was! It was beautiful!

Success Message

While we're adding some little "touches" to make the UI better, let's add a new success message when the new rep log API call finishes.

Once again, in RepLogApp, we need new state for this message. Give it a generic name - successMessage. We may be able to use this in a few other places, like when deleting a rep log.

99 lines | assets/js/RepLog/RepLogApp.js
// ... lines 1 - 7
constructor(props) {
// ... lines 9 - 10
this.state = {
// ... lines 12 - 16
successMessage: ''
};
// ... lines 19 - 23
}
// ... lines 25 - 99

Below, after createRepLog() finishes, update this state: successMessage set to "Rep Log Saved!".

99 lines | assets/js/RepLog/RepLogApp.js
// ... lines 1 - 49
createRepLog(newRep)
.then(repLog => {
this.setState(prevState => {
// ... lines 53 - 54
return {
// ... lines 56 - 57
successMessage: 'Rep Log Saved!'
};
})
})
// ... lines 62 - 99

Cool! This time, I want to print the message right on top of the app, above the table. That markup lives in RepLogs. Go straight into that component and define the new prop type: successMessage as a string that's required.

109 lines | assets/js/RepLog/RepLogs.js
// ... lines 1 - 95
RepLogs.propTypes = {
// ... lines 97 - 106
successMessage: PropTypes.string.isRequired
};

Destructure that variable... then, after the input, use our trick: successMessage && open parentheses. Render a div with a few bootstrap classes: alert alert-success text-center. Inside, print the text!

109 lines | assets/js/RepLog/RepLogs.js
// ... lines 1 - 17
export default function RepLogs(props) {
const {
// ... lines 20 - 29
successMessage
} = props;
// ... lines 32 - 37
return (
// ... lines 39 - 51
{successMessage && (
<div className="alert alert-success text-center">
{successMessage}
</div>
)}
// ... lines 57 - 92
);
}
// ... lines 95 - 109

I love it! Head back to your browser and refresh! Let's delete a few rep logs to clean things up. Then, lift your coffee cup 12 times and, submit! Boom! There is our new message.

The only problem is that the message stays up there... forever! That should probably disappear after a few seconds. Let's do that next!