Build a Multi-room Realtime Chat with Livewire and Reverb
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

Episodes

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

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.

Episode summary

In this episode, we focus on making the dates and times in our chat interface a lot more readable and user-friendly. Instead of always showing the full date and time for messages, we upgrade things so that messages from today display "today", those from the previous day display "yesterday", and anything older falls back to a normal date string.

We kick things off by creating a new accessor attribute on the message model, which is responsible for returning our improved, human-readable date string. First, we use a simple set of if statements to check whether a message was created today or yesterday using Carbon's handy methods. Depending on the result, we set the label accordingly and append just the hours and minutes (no one needs those seconds!). Otherwise, we fall back to displaying the plain old date.

After confirming that's working, we realize that piling on more and more if statements could get messy. So, we refactor the code to use PHP's new match statement to keep things concise and scalable. This way, it's super easy to add more conditions down the line and our code stays clean and readable.

By the end of the episode, we've got a much better way to display message times in our chat app, making the whole experience a bit nicer for users.

Episode discussion

No comments, yet. Be the first!