EntryCard Component UI

[00:00:00]
>> All right, well, let's see if we can style these EntryCards a little bit. We'll need some more information to truly get them where we want them to be, but we'll style them as much as we can. And then we will work on getting the editor for the entry.

[00:00:19]
So when you click on it, you go to the actual page, there's an editor there on which you can edit the entry. We'll get that smooth going with auto-saving and stuff like that, and then we can hook up the AI part to it, which does the analysis on it.

[00:00:34]
So, okay, let's start with that then. First thing first is, let me just close all these windows, is, yeah, let's work on making that EntryCard look a little better. So I already have some CSS for that as well. I'm gonna go to this little EntryCard I have here.

[00:00:59]
Just gonna copy this, come here. And I'm just gonna just paste it in here in my EntryCard. A few things happen in here, kind of talk about it, but, I mean, it's mostly just CSS, right? There's only some JavaScript about the date, and I'll tell you why I did that.

[00:01:18]
But yeah, I mean, it's just a card with a rounded corner, background, and shadow, just like the other card, and a bunch of padding. This right here where it says, small colon, this is for responsiveness. So it's like, hey, when you're on a small screen, do px instead.

[00:01:34]
I'm actually just gonna take all this off. I think at one point I was gonna make this responsive, and then I was like, I'm not doing this. [LAUGH] So, I didn't, this is not a design class, this is not gonna happen. So you don't need that, and I'll just put the date, analysis, and analysis.mood.

[00:01:53]
We don't have these yet, so this is probably going to freak out. Right, so I'm just going to put something else in here for now that just says summary, and then mood. We will have date, though. So the reason I had to do this with a date, because date itself is a date object.

[00:02:16]
You can't render an object in React, it'll get an error. It'll say, you tried to render an object, we expected a React component. And then if you just throw the date in there that's dateToString(), it looks like crap. So this is just a really quick way to format it.

[00:02:33]
You don't need to install Moment.js, which is 12 gigabytes, in order to-
>> [LAUGH]
>> Format a date string. date-fns is actually a really good package you can use, but even then, I don't need to use those anymore, I just use the regular date object. It's come a long way, you can format some stuff pretty well with it.

[00:02:51]
So we got that, and, yeah, let's see what that looks like. It should already be on the page, so yeah, there we go. Looking much better, looking much better. The last thing we wanna do is be able to click on this and have it go to that page, right?

[00:03:07]
So let's set that up. So what we can do is just basically wrap these in a Link. I'm not gonna do them here, I'm gonna do them in the component that's rendering them, which will be the journal page. So in the journal page here, these EntryCards, I'll wrap them in a Link, like so.

[00:03:31]
That way, if I wanna reuse these cards somewhere else and not have them link somewhere, I can do that. If I were to put the Link in the card itself, it's always gonna be linking somewhere. That defeats the point of having something flexible as a component. So for the href, pretty simple.

[00:03:51]
We're just going to say /journal/${entry.id}. We can take this key prop and move it upward one, so it can leave us alone. And that's it. And now we can navigate to a page that we didn't make yet. So if you hover over it, you can see it will try to navigate there.

[00:04:16]
And it works.