Next.js + Kirimase - Adding A New Feature (Code Along)

I mentioned in my tweet at how Kirman gets you 75% of the way there and then you just bring the UI to show this I've got an idea that I want to add to this application um I haven't planned how we're going to do it but I want to record how I would go around building it and show you how all of the building blocks that we already have built out for us make it incredibly fast to to build um so first things first I'll explain I want to now have the ability once I've completed a book to review it um and the idea that I have is that as soon as you mark a book is completed we had that field uh in the books model uh then there will be a UI element that pops up to create a new review and once you've created that review that will disappear and that review maybe we'll show in the in the books page uh so let's first maybe um make a commit here just so we have a clear delineation and I can upload this later so let's say in it command and generate right uh clear here and let's check out uh a new I think this is Big B I never remember uh feat SL reviews great awesome so first things first I'm going to run a new generate command to generate the reviews um reviews table uh the reviews model sorry uh so each review is going to have content yep require oh see I messed that up sometimes and that's a product feature that's going to have to come soon um so let's try that again reviews every review is going to have a Content field uh is this field required yes I do want to add another field and that's going to be a reference to the book itself um I do want this to Cascade on delete no other fields no index I do want timestamps and I do want this model to belong to the user yes yes uh no CH models uh and I want to add reviews to the side bar great so let's run quickly let's just see that it works Bond DB generate Bond DB migrate bonev head over to the um back to the browser so we got a book here um if we head to reviews we should be able to write a new review and see the book uh again this is like a classic um thing that we need to change if we search the project for to-do and we head to the review form you'll see that it Flags right away that select item and we can say book title thank you typescript for telling us what we need to do and then if we select a book here we've got build so this is our rough review page but this isn't really great this isn't how we want to do it what I would like to do is if we head over to the books page here we are here um I'd like to once I Mark completed as true maybe have a button here to deliv New review so let's try let's see let's see what we can do um so I think we're going to have to do a few things first we're we're probably going to have to make a new query that for the book to get reviews um maybe we do a left join so let's go to queries for the books um let's go down to get book by ID and I think here if we save it it should format a little bit nicer let's maybe make uh let's add a new left join here and this is going to be reviews we'll pull that in and we'll say books dot or we'll say uh books. ID equals reviews. ID so that should be good to go and then the last thing we'll want to do is add here uh review and we'll say um oh I'm doing this in the wrong function funny funny that I wasn't really paying attention uh so if I go down we wanted to do it here so yes we want to do it here let's do the same thing as we did before but we need to remove that semicolon save uh we're going to pull in again review we're going to join left join with reviews we're going to say book. ID equals reviews do um book ID great and then in here we're going to pull in the review as row dot um oh yeah we got to put it in the select as well we're going to say review is reviews great and then now if we go there row. uh review so in theory now if we were to go to the book and we um if we head to the book ID page we can do it I think let's do it in the nested page so we're going to do it here and let's I hate when I tap the wrong place let's go we're going to go back to authors and let's go to the book where it exists within the author great great it's right here cool um and let us pop it into very quickly let's let's just stringify what we're getting back if we go back to here we should be able to um let get authors here we've got get book by ID and we've done it in the wrong function so we'll want to add it to that function now um we could just do the call to no let's do it yeah let's do let's update it so these things happen uh when you're building and you're not really you never really done it before so we're going to add that there uh right this should all be fine uh we want to take this uh VT here and we're going to pop it in this select field there great we'll remove it bit from here and now we should be able to I've probably broken quite a lot here very possible very likely um so book quotes book so that's our book quotes and there our book Reflections and maybe let's do one more called book reviews we'll call this book b we'll say uh r. revie r. revie and this is going to be a complete review let's see yeah that looks that looks about right reviews um and BR let's see have we broken everything this is the this is always the question so reviews pull them in nothing broken yet uh let's pop it to the well let's pop it actually under the optimistic book let's add a pre Json stringify and pull in our reviews and see what we got nothing because we got no reviews obviously if we create a new review testing and we head back to this page look at that so again kind of very relatively straightforward but now that we have this should be relatively easy to do the rest so what do we want to do we want to basically say um con has review um and we'll say reviews. length is greater than zero uh reviews is possibly undefined that is true so if reviews uh then it's otherwise it is false great okay uh so we want want to say let's again let's just add it to the top for ease we're going to in here we're going to say if has review if has review equals false and um book do completed equals true then we'll I don't know print needs review otherwise nothing so our book's completed we need to get rid of our review like last time so let's go in here let us delete this in theory now when we go to our authors and our book here we should say needs review great so um and I think actually I am going to go like this I'm going to return some react code otherwise no uh great and then in here what do we want to do we probably want a an H3 maybe let's do border border border a bit convoluted but now that adds that great and H3 that says uh leave uh write a review about book. tile great um CN we're going to do text to Excel and um font um semi bold how's that no that's too big uh let's say Excel and then let's just say font medium cool and then in here all we have to do now this is where things get cool is you put the review form import that see what we need we need uh we have no review so that's fine books we're going to fill this just empty array we give it a book ID and this is where things get really cool if we put in book. ID uh and then we we also have a post success function which we'll look at in a second um but now ah right because this is a client component and we don't have the client boundary set on here so if we go up here and we just set use Cent there we go look at that so looks pretty trash but what we can do is in this area we can just add a ton of padding uh maybe around here a padding let's say eight how's that going to be cool and actually we can bring in the H3 as well uh so look at that um you could say something like now that you've finished the book what did you think um I hate those ARS uh that's what [Music] and qu is that it yeah okay great so now we can leave a review here let's give it go I really loved this book want to read more like it and if I submit if I hit enter look at that we've got a review and perhaps instead of no we can do uh a I don't know a div with an H3 again maybe we copy this H3 in vit paste that in um corresponding yeah we need uh your review H3 great and then in here we just have a P tag and we say book or uh reviews Z dot content look at that I mean like okay maybe this took 15 minutes cuz I wasn't thinking about this but like is crazy that was the the pieces are there already so if we do second book not completed because you're reading it right now of course because uh reviews doesn't exist um so we say if reviews otherwise no don't know why we need to uh right has review let's just do that need to refresh server look at that so uh we shouldn't be printing actually that has review um maybe we do book do completed first yeah okay we'll do that and then basically it would be something like like We'll add one more here and that's if has review is false then we do that otherwise we do that otherwise no um that should wrap around like this is that going to work that should work now great okay A bit of City quick code but let's say ah you're writing around you finished your book you complete save now you can write your review I really enjoyed it save and now you got your review there like it's really and then all your reviews are here and we could if we wanted to go to our review list I can go down um I can go down to the review component come come down here and then let's say in review. content we actually want to pull in the review. book. tile and so now we can see the review right there like this is it's just it's fast you think oh that's what I want to do and and you do it the the hard stuff is already kind of coded for you so sorry this was very long-winded very long not very not thought out or anything but I hope it shows you that fast you can start iterating with with kiras and uh so yeah please make some cool stuff and and show me what you make thanks a lot

Channel: Nico Albanese

Views: 2,154

Keywords:

Id: 7vSxfElwnKU

Length: 14min 38sec (878 seconds)

Published: Wed Feb 07 2024