Entry Search UI

[00:00:00]
>> So what we wanna do now is we wanna add in a search bar right here where we can ask questions about our journals and do things. So let's talk about the architecture behind that, some of the AI stuff that we need, and then also the UI stuff that we need.

[00:00:13]
So it's a search bar, so people's typing into something, and then they're clicking a button. If you've known Next.js 13, you can use server actions to submit forms to the server. So we could do that, but I wanna show the response after you submit that form. You can also do that with a server action.

[00:00:30]
I just don't like how you have to do it. So I'm gonna use client-side component for that, because it's just easier to do that. So let's do that. We're gonna make a client component here. I'm gonna call it question, so you can ask a question And it's gonna be pretty simple, it's just a form, doesn't really take any args, it's a client component.

[00:01:05]
Sort of returning a form here. And yeah, we have the input, and has a place holder that says, Ask a question. We got that, we have a button here that just says Ask, and then we just need some states. So we'll say value and setValue, because you state default to a string.

[00:01:45]
Bind that value to the input like it typically would do, and that will make up on change handler. So onChange, I'm just gonna get the event object and event.preventDefault. Stop the form from reloading the whole page when it submits to a server, and then we'll do things here.

[00:02:12]
Lastly, just to add in the onChange handler to the function. Of course, I want this to look good, so I'm gonna add a class name. I'm going to give this a border, and then a border-blak of 20. I'm gonna give it a px of 8, or, I'm sorry, 4, py of 6, font or text of large, rounded of large.

[00:02:54]
Should be good enough. And for the button, This has to be type=submit, so we can hit Enter. So I have a class name of background. I don't know, pick a color, blue-400. We'll also have some padding on the left and right of 2 or actually more on that, 4 and then 2 on the y.

[00:03:27]
It's also rounded of large and texts, we'll make it the same of large, cool.
>> Need a C in the className on line 2, a slack.
>> Thank you. All right, and let's bring that into our layout. We'll just do it, no, it's not layout, where is it?

[00:04:07]
It's this page. So the journal page/journal/page.ts, we'll just drop it right here after our h2, before our grid with the cards. Let's put a new div here, and let's bring in question. Let's add some margin to the div, my, drop like 8. And you'll get this ugly looking form.

[00:04:46]
Probably went a little crazy on the padding, it's a little bit.
>> The button is so cute.
>> The button's cute, yeah.
>> Yes.
>> I might pull that padding back a little bit. Just keep it real a little bit. There we go, that's a little better. Cool, you can make this full width too, but it's fine for me right now.

[00:05:12]
>> Before you leave this, you wanna move your onChanged to the form submit.
>> That's right. Yeah, I'm like, man, I've been doing server actions too long. There we go, that makes way more sense. I'm like, what is going on here? I'm just rename this, That's still gonna stay onChange, we just need to handle submit.

[00:05:39]
There we go. I'm like, what? handleSubmits, and that's a preventDefault. I guess that's the benefit of server components or server actions. And I guess for this onChange in here, it's just setValue, e.target.value.
>> And if it were a server action, you would just swap out the on submit online 17 first action, right?

[00:06:20]
>> Yeah, if it was a server action, I wouldn't even need to bind a value or onChange to input. These would just go, I wouldn't need a state, and I would just have an action here, and that would call a function on the server. Yeah, I just haven't written a client-side form other than this curriculum so long that's been deep in server actions.