Check out a free preview of the full Build an AI-Powered Fullstack Next.js App, v3 course

The "Connecting the Sidebar UI" Lesson is part of the full, Build an AI-Powered Fullstack Next.js App, v3 course featured in this preview video. Here's what you'd learn in this lesson:

Scott uses the include property to pull in the data from the analysis table when selecting a unique journal entry. The analysis data is added to the sidebar UI.


Transcript from the "Connecting the Sidebar UI" Lesson

>> Let's work on bringing all that down to the UI. And then we'll work on the update of the autosave. So all right, this one's easy, right. So cuz it's a server component, so all we have to do is go to this page, journal > page. You see where we have getEntries.

Well we also just want to get the analysis for this entry, we can do this in like three lines of code. We actually don't need to do another query with prisma. We can just say hey, for this entry we can just do this thing called includes or include, and we wanna include an analysis to be true.

So this will work for the one that we just created, but the other ones won't have an analysis because we didn't have an analysis for them cuz they were created before we had analysis. So I might go back and just delete those from the database just so it works.

But yeah, it'll work for the one I just made cuz it has analysis, and any one going forward. Cool, so now we have that analysis. All right, am I on the right page? I'm on the wrong page, I'm sorry, I need to go on the one that has ID on it.

I'm like, wait, why does it say entries? You need to go to journal ID page, that makes more sense. Same thing though, underneath where I just put include analysis. This is like a join table in SQL or MySQL, this is like a population in Mongo. All right, and now, We can just replace these values, right.

So we could just say cool, this will be entry. Actually let me just, I'll just write them, nah, I don't feel like writing them out, I'm gonna do structure. That's just, I can't do it. [LAUGH] So we'll say mood, summary. Can you stop capitalizing that please, there we go.

color, subject, and then negative) = entry?.analysis. And now we just pass those in here, so this will be summary, this will be subjects, this will be mood, and this will be color. And then I guess the other one that I didn't add was, let me see. Mood, subject, summary.

>> Is negative color?
>> Negative, yeah, I don't know why I did that. Yeah, I'm sorry, I'm like, what? Negative and then color. Yeah, I guess color goes down here, right, color is bound to this. Where is that, right here, it's bound to this, right. So you basically just get rid of this CSS class.

And then you add a style tag I need to say backgroundColor, and then you would just say color. Cool, I'll save that. This thing's just freaking out cuz it's off sype script. So hopefully we're good here, let's see what happens, boom. Looks good. So the only one that's messed up is the negative one, and that's because it's trying to render a boolean.

So you'll just say like, if it is negative put the word true, or false if it's not. Or I'm sorry, yeah, that way, yeah. So if it is negative, negative is true, otherwise it's false, as a string and it'll show. Cool, pretty awesome. So right now obviously when we update this it's not going to update in real time because we didn't go back and add that analysis function on the update API call.

But we'll do that after after we come back.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now