[00:00:21] But there's still a huge amount of utility libraries that are compatible. So one of these is state functions. So I like to use these functions for formatting dates. So it's basically utility library and it has a lot of different help and methods for interacting with dates. So getting whether they just in the past or the future or how many days or seconds in between.
[00:01:15] And in this case, we don't even need to rerun the packager it will just work Now let's make our dates follow the following format. So 29 Sep, year and then at and then add the current time. So if we go to the format documentation which is here they have a reference for how you actually format each of the dates so let's start with the simple one so we want 29 as the current day So let's have a look to day of month.
[00:02:03] Okay, so we just want D. Okay, so in our mood picker, so let's go to home where we have our date. So let's import format from date functions. And here we have our timestamp let's wrap this in format. So the first argument or format is the date that you want to format.
[00:02:35] Get your remove to string here and then a second argument is the way that you want to format. So if I just add this D It's going to be fresh. So all these say 28, because there's a day today now for the month that's fine month. Okay, so we can see that this format will be MMM.
[00:03:07] So if I do space and I get Sep. So I'll just copy this or have a reference of what I'm going to. Okay, so I think you just do a comma. Yeah, so you can just add the comma there. And then we want the year. Just look up here.
[00:03:34] Calendar year. Okay, so calendar year will be full wise. Okay? Then we want add, so to add arbitrary text, we use single quotes. So let's do adds. An ad shows up here and then we want the hours and minutes so let's find hours Okay, hours in two digits, so that's HH, and minutes in two digits, that's MM and finally we want the AM or PM, and this is just AAA.
[00:04:24] So again, add it to the end And now we get the format that we were looking for. Now, finally, we want to style the mood item growth as per this beautiful design. So you'll notice that we have an additional color here. So we use this lavender color for the date.
[00:04:43] So added the color here on the theme so called color lavender. So if you copy this and add it to your theme.ts and then we can use it anywhere in our application So in components, let's create a new file called mood item, for that TSX. And I'm just going to copy this file from here And in our home, I'm going to update our map to use the mood item row instead.
[00:05:27] So mood, let's stop map, and it's over towing a text. Let's return a mood item row. And let's pass in item. To be the item and don't forget to use the key. So key is item.timestamp. So don't worry about these going off the page. We're going to fix that later.
[00:06:01] Let's just remove things we don't need. And there was a key warning somewhere. So it seems so there's always the top level element that needs to have the key. So because we reflected this just didn't have a key so let's do key = option.emoji. Yeah, so the key warnings don't show up when you're hot reload all the time.
[00:06:29] So sometimes it's handy to do a fresh reload to find them. Excellent, we got to the end of the UI elements recap. So now let's talk about how to handle data.