Sign up to access "Build a Realtime Chat with Laravel, Vue and Pinia" right now.

Get started

Already a member? Sign in to continue

Playing

21. Better formatted dates

Source code

Episodes

Your progress

Total: 1h 41m
Played: 0m
Remaining: 1h 41m

Join or sign in to track your progress

Transcript

00:00

Let's make the dates that we're outputting a little bit more visually appealing. The moment we're just dumping out the created at date and includes loads

00:07

of information that we don't need. We'll take this a little step further and we'll create a method in here, which returns either the string today, yesterday, or if it was before yesterday, we'll just output the date and time.

00:20

Okay. So all we need in here is just a method to grab this. So let's call this created at human. Of course, call that whatever you want.

00:28

And let's just return anything in here and swap this over. So if we head over to our message resource, we can go ahead and swap this out now for that created at human method. And of course, that's going to give us ABC.

00:41

Okay. So now into the method, let's look at how we can do this. Now we can do this really conveniently with a PHP match statement. Let's go ahead and return match true.

00:53

And actually let's assign this first of all, because we're always going to want to add on the time at the end of this. And if we match true, what we can do is use carbon to work out. If we are today, yesterday, or if not, we'll output the date and time string.

01:09

So what we can do is the condition. We can say this created out, which is the carbon date. We can say is today. Well, if that's the case, we want day to be today.

01:18

So we can just output the string today. We can do the same thing for yesterday as well. So we can say is yesterday and we can output in here yesterday. Now by default, what's going to happen if we just define the default

01:32

out is we just want the date string. So we can just say this created at, and to date string, and that will format that properly. Okay.

01:43

So now that we've done this, let's just return the day and let's just see what happens. So if we head back over, you can see that all of these were posted a little while ago, let's just write hello in here.

01:53

You can see this now says today, if it was yesterday, of course it would show yesterday. Now we always want the time on the end of each of these. So what we can now do is just return day.

02:04

We've already done that down there, but let's just do that again. And we can just add on a space and then we can say this created at two time string. Now by default, the time string will always have the seconds, which might not be useful.

02:22

So what we can do is we can go ahead and set in here the precision and we just want that to be on the minute. Let's go over, give that a refresh. And there we go.

02:32

So obviously if this was yesterday at a certain time, it would show that. Otherwise we get the full day. So feel free to tweak this, but that's a much better way than just dumping out the entire created at string.

21 episodes•1 hr 41 mins•9 months ago

Overview

Using the power of Reverb, let’s build a realtime multi-room chat with Laravel and Vue with Inertia, pulling in Pinia for state management.

We’ll cover:

Using the Intersection Observer API to automatically load previous chat messages
State management with Pinia
Using presence channels to show online users for each room
Client-to client communication to show who’s typing
Using flexbox tricks to keep messages scrolled into view as they roll in

Alex Garrett-Smith

Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!