Creating the Deep Thoughts UI

[00:00:00]
>> Brian Holt: So we opened our starter project. I have a link there. You ran npm run install. That's all good. Let me open this. I did already open it. So I have a little server here. I have some deep thoughts. Some of these are deeply funny, and some of them are less funny, but again, generated by ChatGpt, and we are going to allow users, when they have a deep thought, to come in and type their deep thought and put it in, and then save it.

[00:00:33]
That's all the server does. So it just basically responds to deep thoughts. And we're also, I put in a 20% error rate, so that you can see what these look like. That's what everyone gets afraid of when like with these optimistic UI updates, is like what happens if there's a problem?

[00:00:49]
And the nice thing is this kind of whole thing kind of just takes cares of problems as we go. So I'll show you, but if you see errors that it's intentional, and I made that configurable here, so we have a delay of five seconds. Here, so you can see the updates happening, and this has an error rate of 20%, but feel free, like while you're developing this, you can turn it down to like 5% or just zero, or something like that.

[00:01:08]
I'll leave it at point two. Okay, so let's build a UI that shows deep thoughts. So open app.jsx here.
>> Brian Holt: And we are gonna say export thoughts and setThoughts, export, I don't know why export const rather = useState from react, so we gotta import that at the top and it'll be an empty array.

[00:01:49]
Our deepThoughts, I I just called this thoughts, so we'll just call that thoughts. Const thought and setThought. So this is gonna be actually what the user types into the form, equals use state, and it'll just be an empty string. And then async function PostDeepThought. We're gonna setThought to be empty when that happens, and then going to say const response = await Fetch thoughts, and we can give a configuration so the method will be POST.

[00:02:44]
>> Brian Holt: Headers will be, we just said that it's a content-Type:application/json.
>> Brian Holt: Okay.
>> Brian Holt: And body is JSON.stringify and thought. So this is how we're going to get thoughts back from the API, and we're gonna say, just so that we can really call out when we have an error, if response.ok or if not, if the response is not ok.

[00:03:31]
Rather, then we're gonna do the most lovely form of UI that exists in the browser. Day an alert and you're to say this thought was not deep enough.,
>> Brian Holt: Do better.
>> Brian Holt: And then we'll just return.
>> Brian Holt: And then we'll say const.
>> Brian Holt: Thoughts, newThoughts = await response.json and set thoughts to be new thoughts so I have it so that the API, every single time reach returns back all of the thoughts that exist in memory.

[00:04:24]
>> Brian Holt: Okay.
>> Brian Holt: So I should say that we're doing this just kind of the old way, which is what users are gonna type in something, they're gonna wait. And then once the API comes back, then they'll see everything, right? And you'll see it's kind of jarring that you enter something, and then you have to wait before you actually see your client-side information show up into the UI, okay?

[00:04:53]
And then we're going to return div, className = app, I forgot the effect here. Let's go back to that. We'll do that first. So let's do the effect. We're gonna say use effect. And notice that this imported that at the top, use effect.
>> Brian Holt: Okay, and then we're just gonna fetch thoughts.

[00:05:27]
And then I didn't even bother to make this async. I just did it with promises. Then res.json, then data.
>> Brian Holt: Set, thoughts, data.
>> Brian Holt: You could make this async if you wanted to, but this was so short, I was like, no, I'm just gonna do this directly with promises.

[00:06:00]
>> Brian Holt: Okay, empty array. We're only gonna run this at the beginning, and then now we can do our markup. Return div, className = "app" and h1 Deep Thoughts. This was in, but I had just watched the latest SNL, and they had deep thoughts with Jack Handy. Does anyone remember those?

[00:06:25]
I loved those when I was a kid, and so that's what inspired these. form on submit, we'll do a function here. And e.preventDefault as you do, cuz you don't want to actually submit the page. And then you will do a postDeepThought.
>> Brian Holt: Okay, and then we'll have a label htmlForThought.

[00:07:06]
What's on your mind?
>> Brian Holt: Okay, and then you'll have a text area.
>> Brian Holt: id = thought. name = thought.
>> Brian Holt: Rows = 5.
>> Brian Holt: Calls = 33 just think I messed around with these a little bit until they got right. value = thought and on change = e setThought, e.target.value.

[00:07:52]
I think that's it for that. Yep, then we'll have a button type = submit.
>> Brian Holt: You could put something like here, like submit or direct my thoughts into the ether, up to you. It depends on how deep you want to get with this, okay? And then after that, we're just going to have a UL of all of our thoughts.

[00:08:26]
So thoughts.map. And then you'll have thought and index. And then we will have that return an Li with a key of thought and thought. Actually, no, I'm thinking technically these thoughts don't have to be unique, so you probably just want to do this with index either or though, okay?.

[00:09:04]
>> Brian Holt: So I don't think anything here just looks particularly surprising, but let's see how we do let's open our app here. Are we running our server? We're not running our server. Make sure you're on your server, and NPM run dev you need dev server first, and then I need to open another one and say, NPM run dev client.

[00:09:31]
Okay, now we should be able to run this. So, deep thoughts, what's on your mind, and some of these are quite funny. This one really caught me. If debugging is the process of removing bugs, and programming must be the process of adding them. I'm an excellent programmer. Some of these are funny, some of them are not.

[00:09:57]
I thought the world was cruel and unfair, then I tried to vertically center a div cool. So, if I put like LOL or something like that in here, and I say direct my thoughts into the ether. Notice it's just gonna sit there for a while, and then eventually it's gonna show up.

[00:10:19]
Here, that thought wasn't deep enough try that again.
>> Brian Holt: Wow, what did I do here? I must have said this to be setThought, right? And it's actually supposed to be setThoughts. That's hilarious [LAUGH]. So line 21 here. Make sure inside of your post deepThought that this is supposed to be I put set thought here you're supposed to setThoughts.

[00:10:59]
The dangers of calling these the same thing, right? This is not the first time this happened to me. Okay, let me try that again.
>> Brian Holt: One sentence is gonna work. 20% it could happen pretty much of the time. Yeah, there it is, right? So then it eventually shows up there.

[00:11:27]
So, we can absolutely engineer around this, right? We could optimistically ourselves add it into the thoughts, and then if there's an error case, then we go back and remove it, right? I'm sure you're Function, you're going through your head of like, how could I do this without additional machinery?

[00:11:46]
I'm gonna show you how to make this a bit easier with the use of use optimistic.