Build a Livewire Comment System
This episode is for members only

Sign up to access "Build a Livewire Comment System" right now.

Get started
Already a member? Sign in to continue
Playing
16. Automatically updating relative dates

Episodes

0%
Your progress
  • Total: 1h 40m
  • Played: 0m
  • Remaining: 1h 40m
Join or sign in to track your progress

Transcript

00:00
Okay. So I've gone ahead and cleared out all of the comments that we have physically from the database, and we're going to go ahead and post a comment here and have
00:08
a look at the date that this was posted. We're using a human time, which means it will tell us how long this was ago. But the only problem is it's not updating itself. It will update when we do something because then Livewire will refresh this
00:23
data and we'll get the most up to date. For example, if I go ahead and edit this, that will reload that comment in, and then we actually see when this was posted, but we can do a little bit better than this. So what we're going to do is build out an Alpine plugin or a directive, which means
00:38
that we can pass in the date, time string, and then have this automatically update, even as the user just sits on the page. So let's get started with that and see what we can do. Okay.
00:51
So I'm going to head over to the database and just physically delete this comment that we've got here and let's start completely from scratch. Okay. So to do this, we need to modify the date that we've got here, and we're
01:02
going to add an additional date, time attribute to this div. Now that's absolutely fine because this is valid HTML, uh, but we need something that's the actual day. So we can basically just output the create that date here and we could do
01:18
to date, time string, and that will give us the date, time string that we need. If we just post another comment really quickly and check this out, let's have a look at what we've got here. You can see that this gives us the actual date, time.
01:31
So what we can do is now build out an Alpine plugin, which reads that date, time, we'll leave this in here as a fallback, just in case this doesn't work for any reason, but then we will insert this new updated time. Okay.
01:44
Let's get started. So to start with, we want to build out a directive to do this. We need to come over to our app.js file and manually start live wire. That means that in between here, we can then add anything we need onto Alpine.
01:59
So let's go ahead and import both LiveWire and Alpine. And we're going to bring that in from, we need to go into our vendor folder, into LiveWire, into LiveWire. Again, we need to go over to the distribution folder and we
02:13
need to pull in LiveWire.esm. What we can then do is manually start LiveWire. So use LiveWire star, but in between here, we can register directives with Alpine.
02:25
So for example, let's call this human date and let's just create out a closure in here. We'll pull it out to a separate file in just a minute and just say. Human date.
02:36
And now we have a human date directive for Alpine. There's one more step. We need to come over to our app.blade.php layout, and we need to go ahead and pull in the LiveWire script config directive.
02:49
And now the scripts for this is disabled and we have manually done this in here. Okay. Let's go over to our comment item and let's apply this directive to here. So we're going to use X human date.
03:01
And if we head over here and open up our console, sure enough for every single comment now, this will be pulled out. Great. Okay.
03:09
So let's go back over and let's start to actually build out this plugin. So we'll take the closure that we've created here, but instead we're going to go ahead and create out a new file in here. So let's create a directory called directives.
03:24
And inside of here, let's create out a JavaScript file and we'll just call this human date. And let's go ahead and export this object that we've just created into this, when we register a directive, we'll get the element that this has been applied to.
03:38
So let's just log that element out to make sure that that is working. And if we come back over to app.js, we can now just put in that human date directive and we don't need to invoke it. Okay.
03:49
That should work in exactly the same way. Once again, let's pull up our console and yeah, there we go. There is where we want to take this date time, transform it to a human date, and then go ahead and pop it directly into here to do this, we're going to use day JS.
04:03
So let's do an NPM install on day JS and just wait for that to finish. And once that's done, we can come over to the directive that we've just created and start to import everything that we need. So let's pull in day JS from day JS.
04:17
This is just a library that we use to manipulate dates, format dates on the client side. And there's a couple of other things we need, but let's just test this out for now. So the first thing that we want to do is pull out the date time from that attribute.
04:31
So on the element that we're working with, let's use get attribute and we want to pull out date time. That's now going to give it up to us. Now, if there isn't a date time added, we're going to go ahead and just do nothing.
04:43
So let's say if there's no date time, which by default will be a null value, let's just return. Now down here, what we can do is take the date and format it in the way that we need and then put it directly into there.
04:56
Let's just test this out for now and say the element that we're working with, set the inner text to the date time. So let's just set it to the date time, which we're eventually going to manipulate. And as you can see, we've got a little bit of a flicker there,
05:08
but it's not too much trouble. We are now seeing what we have inside of that attribute put out into the inner text of that element. So obviously rather than do this, we want to transform this and to do that, we're
05:20
going to pull in some plugins from date time. So we're going to pull in the relative time plugin. So let's pull that in from day JS plugin and relative time. And we're going to do the same thing for UTC because we are working with the UTC
05:37
time zone on the backend, and we also want to pull in the time zone plugin as well, seems a bit silly to pull all of these in, but the reason for this is that day JS by default is incredibly lightweight and we just pull in what we need. Okay.
05:52
Let's go and just extend day JS with all of these plugins that we've pulled in. So let's say extend relative time, and we'll do the same here for UTC and we'll do the same thing for time zone. So we're going to set a default time zone for all of our times in here.
06:10
So we're going to set the default to UTC. If you're unsure about this, if we head over to config and app and we search for time zone, you can see that by default, our application time zone is in UTC. Okay.
06:23
So now that's set, we can go ahead and transform this. So let's do this once and then we'll set up an interval. So if the user is just sitting on the page, this will always update and it will update for as long as they are sitting on the page.
06:37
So instead, we're going to set this to day JS. We want to use time zone. We want to enable this, and then we're going to say two, that's part of the relative time plugin.
06:46
We're going to grab day JS again, and we're going to grab this from the date time. So making sure that these two dates are in the correct time zone that we have set. The two part is going to give us that relative date, like three seconds ago or whatever you want to do.
07:01
There's also a humanized plugin that you can pull in, but I find this a little bit easier. Okay. Let's head over and check this out.
07:07
It looks like this is static. So let's have a look here and yeah. Okay. So what we've done here is invoke this rather than pulled it
07:15
out using the time zone method. Okay. Let's try that again. Give it a refresh and have a look and yeah, that looks good.
07:22
Okay. So this should now be the time zone that we've got. Of course we can prove that by just adding something onto the end of this. And yeah, there we go.
07:30
So we've actually got that new time zone in there. So now what about automatically updating this? Because if I post another comment, it's going to say a few seconds ago, but this will always say a few seconds ago, which isn't too much trouble if you think about
07:44
it, at least it doesn't say zero seconds ago, but we can do better. So what we're going to do is we're going to set up an interval. The first thing we want to do though, is invoke this the first time and then let the interval kick in.
07:57
So I'm going to go ahead and create out a set human time function in here, and that's going to do what we have just done in here, then we can go ahead and invoke that first of all, then we can go ahead and set up a interval. So let's set up an interval and you can customize this.
08:16
So I'm going to run this every 30 seconds. If you run it every one second, that's probably a little bit too much, but let's say set human time and run this every 30 seconds. So every 30 seconds, it will grab the new relative time for this
08:31
and it will update that element. Okay. So we can test this out. We have to sit and wait around for a little bit.
08:36
Let's just post another comment, click here, and I'm just going to wait on this page for a few seconds, just so this can get automatically updated. Okay. So you can see here that these two change, so that was automatically
08:48
updated without refreshing the page. And then there we go. That one just changed. So you can tweak this again to customize how often this updates.
08:56
You can even set it to a minute, although there would be a few inaccuracies, but at least it's better than what we had before, where it just showed zero seconds ago. And there we go. We now have automatically updating relative times on all of our comments.

Episode summary

In this episode, we're tackling a common UX detail: making those relative dates (like "2 minutes ago") automatically update themselves as the user sits on the page. Out of the box, we noticed these dates only update when Livewire refreshes the data—like when we add a new comment or perform some other action—but otherwise, they just get stale.

So here's what we do: First, we decide to create an Alpine.js directive (or plugin, as you hear it called) that will handle this process on the client side. We go through setting it up, making sure Alpine is ready for our custom directive, and registering everything inside our app.js file. We also set up our comment blade to include a proper datetime attribute.

Once the directive is hooked up, we use Day.js (a slick date manipulation library) to format these timestamps into readable relative dates. This involves pulling in and extending Day.js with the relative time, timezone, and UTC plugins, because we want the times displayed correctly no matter where the server or the user is.

After the initial transformation, we go a step further and set up a setInterval within our directive so that every 30 seconds, the displayed relative times are refreshed. This means the "a few seconds ago" turns into "a minute ago", and so on, all without the user needing to reload or trigger any events.

By the end of this video, you'll have a user interface where all comment timestamps update live and smoothly, giving your app that polished, modern feel!

Episode discussion

No comments, yet. Be the first!