Want this course?
Adding a flash message
We need to give feedback to the user when the user clicks a button. We add a message box that disappears after a time.
Hello, my name is Eric Normand and we are building a markdown editor called markdown a fi. In the last episode, we made it nice and by directional I can edit the markdown and I can edit the HTML and whichever one I edit the preview is right. And the other editor, it's right. Um, I do want to say there are probably some, um.
[00:00:30] settings that we could set up in this converter, uh, which we're not going to do here, but in case you wanted to be able to, uh, in code more stuff in the markdown. Markdown is a lossy format. HTML can do much more, and so sometimes things get lost. So, you know, if I add an ID here. I don't think it adds it right.
[00:00:57] It doesn't add it to the Mark down, but maybe there is a setting in the converter that will preserve that somehow. So you should, you should investigate if you're interested in that. To me, this is, this is pretty good. I kinda like it. Lossy you know, I want to be able to paste something in here, get the markdown out, edited a little bit.
[00:01:19] Uh, and I wanted to lose information so that the markdown is nice and clean. So we'll leave it like that. But what we are going to do in this lesson is give some feedback to the user. When they click the button, there's no feedback. Very common app pattern is to make a flash message that shows up on the top.
[00:01:43] It's unobtrusive, it just kind of pops up. Boris, you know, comes into into view from the top. And it just tells you something like, Hey, you just copied something, right? Like, it worked because it's kind of rude. You press a button and nothing, it doesn't look like anything happens. You don't know if you clicked it hard enough, you know that you want to have some kind of feedback for the user.
[00:02:09] So let's do it. Alright. I'm going to put it way up at the top. Um, we are going to store the current message as an Adam,
[00:02:25] and I really love, uh, how reagent makes this so easy to just store state, um, you know, in react. Um. And when people are writing react and Java script, they have state kind of spread out all over in all of their components. And sometimes that's right, it's what you should do. But very often you want the state to be some other central place because you have multiple components that need to access it.
[00:02:57] And that becomes kind of a big deal in react. But in reagent. Um, we use react mostly just for this virtual Dom, just as a view of our state, right? We take our state and we just project it onto a virtual Dom. React handles the Dom. And so that's a nice thing, uh, is that we have this reactive state that takes a lot of work to get right in react.
[00:03:29] You need redox and reducers and all sorts of stuff. We just have it. We just make an Adam, Oh, you wanted more state. Here's another Adam. And it works for small apps like this. If you're going to have a bigger app, you probably want something like reagent, I mean, a re reframe, uh, that, um, gives you a lot more structure for building an app.
[00:03:52] But for something small like this, a few, um, few atoms are just all you need. Okay? So let's make a function. And it's going to take the text. Uh, let's, let's do it like this. So we can flash some text and it's just going to use, the default is going to call flash text with three seconds. That's 3000 milliseconds.
[00:04:21] Okay? So you might be familiar with this pattern where I'm setting a default value for. This function for this argument? Two, 3000 it's a very common pattern. Okay, so what do we want to do? Well, the first thing is we want to get a flash message in there, so I'm just going to do that right now. I'm just going to set the flash message, Adam to text because I don't want it to disappear while I'm like writing code to see it.
[00:04:54] I can't even see it yet. So let's go down here and where do we have our copy to clipboard? I'm going to make this into a function and I'm going to copy, I'm going to a flash. I'm going to do the flash after I copy to clipboard. So I want to say flash, a markdown copied to clipboard. All right, so now I'm going to go into my.
[00:05:25] Browser. I'm going to click the button. So now, uh, oops. Now I should have it in there. It should be in there. Here. Let's use this. I can delete all this and I'll do flash message. What's in there? Yes. So I have the flash message in my state right now, but I need to put it in a box somewhere on the, on the, in the dumb.
[00:05:53] So let's do that right now.
[00:05:57] So I'm going to put a div down here. This'll be the flash message. Div. Actually, I can just do this like that. okay. But we don't want it there. We want to style it a little bit. Style, uh, position. Absolute. I don't want it to change. The layout of the page. Right. And now that I have this, I don't need this.
[00:06:22] Oops. I do need that. Okay. Position absolute. Um, let's see. Going to do a little little debugging here. Just want to know, right? So it doesn't have, when you make something absolute, the width of it is just whatever is needed. Whereas if you make a dif, that's not absolute. It will take up whatever space it needs.
[00:06:51] So I want it centered. So I'm going to say margin. Auto. Okay. That is not enough, but I'll do left zero. Right? Zero. That should be enough. I don't know how I know this. Oh, not enough. I'm sure I picked this stuff up just through the years.
[00:07:19] Yup. It's not, not quite doing what I wanted to do. Um, so I've set a margin auto position absolute. Oh, right. I need to send her the text text align. Center. . There we go. So now the div stretches from the left, zero to the right, zero with whatever margin it needs. And I've texted align center, and so now it should be good.
[00:07:48] Let's see if I, if I inspect the element. Yeah. Yeah. Obviously it's too small to see anything. There you can see outlined in blue that the element is the whole width now. Uh, okay. So we don't want it to be the whole width. Um, I think we want to max with on it of 200, let's say. Okay. And now we want to make it a little bigger padding to em.
[00:08:24] That's okay. Maybe one M.
[00:08:30] yeah. Okay. And then we want the background color.
[00:08:41] did that. There we go. Okay. Right. And just for good measure Z index. 100 so it should appear above other stuff. Now there's a little thing where it's not quite touching the top. I don't know what that has to do with where is that space coming from? And this is where you have to just use your, Oh, I see.
[00:09:09] Somehow the body has a margin on it. From the user agent. Well, we could get rid of that. Uh, just for now, buddy. No, sorry. Margin zero. There we go. That looks good. Uh, right.
[00:09:37] So we will probably have to get rid of that some other way. Not going to worry about that. Uh, get rid of that. Boom. Okay. Now we have our flash message. Maybe it could be a little bigger just to be a little more prominent, but it's yellow. It's easy to see. Maybe make it a little, I need a close it up so I can do this.
[00:10:03] Nice flow. A border radius bottom. Is going to be 10 10 like that. Oh, took some time to compile there. Did that work? See, this is where I'm just guessing right now, border radius bottom is not a thing. Border bottom radius. Oh, there is no border bottom radius.
[00:10:55] well, we'll just leave it as a box. I could, I could wait. Border bottom left radius 10. Did that work very hard to see when it's yellow,
[00:11:11] right? Right. Yes. Okay. There we go. I think that works. Just zooming in with my, my eyes here. All right, so now we have that in there. Okay. We are displaying it, but it, uh, doesn't disappear. We want it to disappear. How can we make this thing go away? Well, one thing you can do is after you set the flash message, you can set a timeout,
[00:11:47] and what we're going to do is just reset the flash message to nil after. Yes. Okay, so now I'll click it. We wait three seconds. And now it should be no. Right. We don't want it to show if it's nil. Right? Hmm. All right. So I did some searching. I w I have it probably still open. Well, no, I don't. Uh, there's a,
[00:12:22] no, I don't have it. There's several ways to make a box disappear. One is just not put it in the Dom, but then if you do that, you don't get animation. I want this thing to animate. One thing you can do is some trick with the max height, but there's a better trick that we're going to use. It's called a trends form.
[00:12:50] Okay? So if we have a flash message. We're going to just scale the Y by one, which changes nothing, right? It's just normal scale. But if we don't have a flash message, we're going to transform it by zero, which means multiply it out of existence, right? So there, that's why it went away. So if I click boom, now it shows up here.
[00:13:17] Let me, let's get some more room here. Click it. After three seconds, it's going to disappear, right? So that's good. But we wanted to animate, so we're going to put a transition on there. We're going to transition a transform. So this transform corresponds to this. We're saying transition the transforms, and we want 0.2 seconds.
[00:13:42] Ease out. So we want it to kind of slowly ease out when we transitioned. So there we go. That's our nice little pop up. You know what? Maybe we can just do a border radius all around, since it's a few pixels away from the edge and it's zooming out from the center. There we go. Okay. And if I let me put thing in the copy, HTML, do this thing plash.
[00:14:18] Boom, boom, boom. Make this into a button. So I have to recopy it. HTML copy to clipboard, right? Sorry. Click this one. clipboard. Mark down. Copy to clipboard.
[00:14:39] So here's, here's I think a problem. Then I'm thinking of I, if I click copy HTML and I counted to one, two, then I click this one. It doesn't last for three whole seconds, one, two. It just gets rid of it right away because what's happening is this is setting, this is a setting the flash message, and then setting a timeout for three seconds, and then if something happens within those three seconds.
[00:15:13] That same timeout is still gonna run and set it to nil. Okay? So we need to have something a little bit smarter to kinda cancel the original timeout. We're, I'm trying to make it happen again. So before this dies, he saw that it wasn't, it didn't last for three seconds. I want every message to last for three seconds.
[00:15:40] So I'm going to do a little trick, little trick. So we have this flash message we need to store. Let me, let me back up. One second. Set timeout returns a value. We're throwing it away right now, but set timeout does return a value and that value is, is a handle that you can use to cancel the timeout before it happens.
[00:16:48] So that's fine. It just does nothing. So now let's try it. If I click copy HTML and I way, if you'd say, and then I click markdown copy to clipboard, it still gets its full three seconds of fame. Of lifetime, it has a full lifespan. And if you played around with it, you'd, you'd notice that, uh, it should always be three seconds.
[00:17:13] Okay? So we've done a little bit of styling. We've created this, a flash message that can, can disappear and appear. Uh, and. It's actually a pretty neat system. You could use this for other messages, for other notifications that you want to. Um, a cool extension would be to have multiple messages. So not just one message that gets overwritten, but you could have, you know, a thing that like adds to the bottom and they each live for three seconds and then go away.
[00:17:50] So they kind of queue up and then pop out of existence. Um. We're not going to do that. That's, that's up to you if you want to have that. Uh, but it seems like a fun thing to play with, but we are now at the end of our app. Okay. Let's just review everything we've done. Um, developing our app. We're still gonna deploy it, so we have our HTML rendered with reagent.
[00:18:24] We have two text boxes that work in a bi-directional way. We can copy to clipboard and we get a nice flash message. Okay, this app looks ready for prime time. It's useful. I mean, I would use this if I had to, like right. A document that needed eventually to be turned into HTML, but I want to write it in markdown.
[00:18:51] This is very convenient. I can see what it's going to look like before I even, you know, run the, generate HTML command much better than working at the command line from a text file. So, um, I'm going to deploy this to net lo-fi and we're going to do that in the next lesson. All right. See you there.