This episode is for members only

Sign up to access "Build a Multi-room Realtime Chat with Livewire and Reverb" right now.

Get started
Already a member? Sign in to continue
Playing
14. Better dates and times

Transcript

00:00
Since we're working with a chat interface, it's probably a good idea to go ahead and update the dates so they're a little bit more readable. So here's what we're going to do. If a message was posted today, rather than show the date, we're going to show the word today and the same thing for yesterday as well. And then anything beyond that, we'll just set back to a default like the
00:23
current date. To do this, we're going to head over to the message model and create out an attribute. So to do this, we want to go ahead and define out a method and give this attribute a name, which we're going to be able to access directly on the property. Let's go ahead and call this createdAppedHuman. And we will go and make sure that this returns an attribute class
00:47
from Illuminate Database Eloquent Casts. Now from here, we just want to go ahead and make the attribute out. So let's use make. And we want a getter in here. And this will just be a closure that returns a value. OK, now that we've done that, let's go over to our message component and we'll go and just use this to output that new attribute. If we head over and give that a
01:12
refresh, sure enough, you can see that is now giving us the value that we provide. OK, so instead of doing this, we want to go ahead and add in some logic to output something more sensible. So let's go and create another method here, which we can use and we'll call this getCreatedAtHumanDate. And from here, we'll go ahead and return something else. And we'll just go ahead and reference that
01:36
and invoke it directly from there. So again, just moving that over to another method so we can add the logic that we need here. So to get this working, we're first of all going to start out with an empty string. We're going to return this at the bottom. So let's return that day. And then we're going to add on to this the timestamp. So the timestamp that we get from
01:58
createdAt, we can just grab using toTimeString. And then what we can do in here with a series of if statements is set the date to today and yesterday, or we can set it to a default of whatever we want if it's past yesterday. Now, we're going to be refactoring this as well, and I'm going to show you a really neat way to refactor this using a PHP match statement.
02:22
Let's leave it at this for now and just check out what we've got. And yeah, sure enough, we have just got the time in there. Now, I also want to get rid of the seconds. So let's pass minute into the argument, the precision argument in toTimeString. And that just gets rid of the seconds for us. It's not really useful. OK, so let's add a few if statements or
02:41
a couple of if statements here to access the createdAt date. And what we can do with Carbon is check if something is today or is yesterday. So if it's today, we're going to go ahead and set the day to today. And we'll just do exactly the same thing down here with, you guessed it, is yesterday. And we'll just set the text here to yesterday. So now if something is today,
03:06
we can see the output today. And then otherwise, we'll have yesterday and the day before and any time before that. Now, what we can do is just change over one of these to be yesterday, just so we can make sure this is working. And there we go. Great. OK, so for the default day, we just want that to be a date string. So let's go and grab the createdAt date.
03:28
And we'll just say to date string. And of course, that will get overridden by any of these methods or if statements in this case. OK, so this is working, but we can do a lot better than this if we had any other conditions that we wanted to add in here to override this default day. We're going to end up with a bunch of if statements, and things are going to start
03:48
to get really messy. So we're going to get rid of all of this and refactor this down to use a PHP match statement. Let's go ahead and see how this looks. So we're going to go and assign today much like we did using a match statement. And then we're going to do exactly the same thing and return day. Now, with this match statement, usually what we would do is pass a
04:10
value into this to compare within it and then return a specific value. In our case, we kind of want to treat this as a replacement for an if statement. So we can actually say match true, which, of course, will always go ahead and allow us to execute on any of the conditions inside of here. So what we're going to do, and let's just build this out, and then we'll take a look at
04:31
how this works. We're going to grab is today. So we are now comparing this value, because true just will always run, and we're going to return from this today. So we're effectively replacing out the thing that we're checking for here into each of these lines. So we're going to do that on both of these lines, and we'll do the same thing here as well, is yesterday, and swap out for
04:57
yesterday, and then with a match statement, we always need a default. Now, let's just leave that default as null or empty just for now, and then we'll look at how we can update this a few updates down here, and we'll be good to go. Okay, let's have a look at the difference, and you can see it pretty much works in exactly the same way. So the condition here has been met, it's returned the
05:17
value that we want, and of course we're returning that. Okay, so what we can do now really conveniently is for the default, use the initial value that we set up here in this temporary variable. So we can just say this created at two date string, or you could do human time, whatever you wanted, and then on the end of every single one, we always know that we want the time. So we can just add on
05:42
the created at date and the time string. So let's say two time string, and again we'll pass the minute in here as the precision. So now with this changed, we've avoided having to create a bunch of if statements and make this method really, really long, and if there are any other conditions that we want to add, we can just do these on a separate line inside of this match. Let's go over and just
06:06
check this out, and there we go. So you can see that we've got the date and time for anything beyond yesterday, but for yesterday and today, we have them times. So feel free to tweak this and add any other conditions in here that you want met, and we now have a much nicer way to show when a message was posted.
14 episodes1 hr 23 mins

Overview

Join a room and start chatting! This course covers building a multi-room text chat app with Livewire using Laravel Reverb for real-time updates.

Using presence channels and client-to-client whispering, we’ll also show who’s online, and who’s currently typing.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!