Storing Timer History

[00:00:00]
>> Kadi Kraman: So far, whenever we used async storage, we've used it from a single screen. But as mentioned, the async storage is based on the key that you use. So, you can access the same key of the same async storage in a different component or a different screen. So, recall that a while ago we've added this little history screen here.

[00:00:24]
And we can use this history screen to show a log of all the times that you've done the thing and hit this, I've done the thing button.
>> Kadi Kraman: So, let's export this countdownStorageKey, constant, and the type from our index file so we could use it in our history screen.

[00:01:24]
>> Kadi Kraman: [COUGH] So in our history screen, let's go in here.
>> Kadi Kraman: Do I have a log? Okay, so this is what we want it to look like. So, we just want to have a list of items in a scrollable list. So, we're gonna end up with an array map again.

[00:01:49]
So, we're going to do a FlatList, but initially we want to fetch the data from storage. So let's do a countdownState. So actually this will be the same as we did in our countdown index file. So, this will be a countdownState, setCountdownState, and we'll use a useState.
>> Kadi Kraman: And the type of this will be a persisted countdownState.

[00:02:26]
>> Kadi Kraman: [COUGH]
>> Kadi Kraman: And we'll do a useEffect. So, same as what we did here where we get the value from storage, and we set it as our countdownState. So, it goes from storage, this was our utility function to get from async storage storage, and the countdownStorageKey, we'll import it from our index file.

[00:03:00]
And we don't have the setState here and import useEffect from React.
>> Kadi Kraman: And setCountdownState(value).
>> Kadi Kraman: So here we want to render a large list of items, so our go-to for that is of course a FlatList. So we'll import FlatList from React Native.
>> Kadi Kraman: And the data in the FlatList is going to be countdownState completed at timestamps.

[00:03:50]
And we can default to an empty array. I think it actually is fine if this is undefined, we'll just get the list empty. And let's do a renderItem.
>> Kadi Kraman: So this will be for each of the timestamps. So again, this takes a function, and this will be a destructured item.

[00:04:21]
>> Kadi Kraman: And we'll keep it simple and do a View and some Text.
>> Kadi Kraman: And to test it, would do, yeah, so this item is actually just the timestamp. All right, and actually, if you ever end up with this, where you've done a function and nothing is rendering. It's because you probably used the wrong braces, or you forgot to return, which is what I did.

[00:04:57]
Okay, so I'm actually using implicit return here.
>> Kadi Kraman: There we go. Okay, so I've got two timestamps here, and I do another one, and we got a third one. So, we probably want to format this as an actual date. So recall, that's why we installed date functions, because I don't want to figure out how to format this as an actual date.

[00:05:22]
But date functions know how, and we can actually copy this full date format from the diff, which looks like this. It doesn't need to be back ticks and we'll say that this will be format. So, the format will be from date functions. And we can pass in a date or a timestamp.

[00:05:52]
So, we can pass in our item as is, and then the format string, which will be our fullDateFormat. There you go, and now it looks much more sensible and readable.
>> Kadi Kraman: And finally, we want to add some styling to this.
>> Kadi Kraman: So, let's give the FlatList a style of styles.list, and let's say the List has a flex: 1 and background color of white.

[00:06:43]
>> Kadi Kraman: So remember, you shouldn't add paddings to our style in the FlatList, so we want to use a contentContainer style, styles.contentContainer. So, this is just so that the top element wouldn't be against the wall here. So let's do contentContainer. Let's do a marginTop: 8.
>> Kadi Kraman: And let's style each of these items.

[00:07:23]
So, let's do a style, so this is on the view on the randerItem. So let's do style is styles.listItem.
>> Kadi Kraman: And the usual things, let's add some background color, so this can be the LightGrey, I think, a nice one. And let's add some margin, so it's not against the walls, so, marginHorizontal.

[00:07:59]
So step 8, okay, and padding: 12,.
>> Kadi Kraman: And [COUGH] borderRadius: 6, my favorite. And we also want to add some margin at the bottom of them so they're not squished together. So, marginBottom: 8, looks all right. And maybe let's make the text a little bit bigger, so style={styles.listItemText},
>> Kadi Kraman: And I'll just increase the font size to 18.

[00:08:55]
Okay, I think that looks good. And we can also add a ListEmpty component here. In fact, we can copy this component from our shopping list. It is nice to add as a default. We have items in our story, but it's always good to think of the default items before anything has been added.

[00:09:18]
So, whenever you do something like that, you build it, then uninstall your app, and then try it from scratch to make sure it still works. Right, so what's in here. For our shopping list, I guess, so we have a ListEmpty component. I'm just gonna copy this
>> Kadi Kraman: And the ListEmpty container style as well.

[00:09:52]
>> Kadi Kraman: And some text, so let's say, No history. And you can always check that it works by just changing this data to be an empty array, or undefined, undefined should work as well. Lovely, now, we have our countdown. We have our notification and then when we do the thing we also have a history where each of the previous times we did the thing will be listed here