Live Code: Astro Course Prep Site (Full CRUD app)

[Music] [Music] [Music] [Music] [Music] [Music] well hell hello I hope you're doing okay today let me know where you're watching from and I'm excited to get started here and we're going to be building out this uh Dev Links full crud app uh it's actually for my course it's one of the modules I'm going to have or at least a section of a module I haven't decided exactly how I'm going to break this up but I figured I'm going to be coding this this morning so why not code it uh in public so that's what we're going to be doing but I hope you're doing okay and wherever you're watching from know a lot of times because of the timing of these streams I end up catching people uh in Europe and uh and uh not usually in the US so it's always really fun to to figure out where people are watching from all right well I'm going to go ahead and uh jump straight in um we don't actually have a design I just kind of quickly threw something together when I when I did that so uh we don't actually have a design currently and that's some of what we're going to be doing as well but I'll probably mostly function focus on functionality uh but if you can let me know if you can hear me okay and uh audio is okay as far as levels are concerned tooo that would be awesome UK all right awesome Stone hat thanks for joining all right Bosnia awesome all right uh let me go ahead and get stuff transitioned over hi officially uh if you joined my streams before you know that I do these things live California wow extra early welcome Christina okay welcome all right uh this is the the course I'm working on this learn AST course and right now I'm on this section and I've got a lot of the basic stuff done but the sample project is what I want to build out and I was going to make it really small and Tiny But I'm like hey let's uh let's make it more advanced um maybe not Advanced but do a little bit more with it hi K how you doing uh so I did actually start working on this yesterday which is not something I typically do ahead of time but I didn't I only spent like 30 minutes so I just decided let me scratch that and I'll jump straight in today and we'll do it from scratch um because I hadn't done that much already but usually I don't spend any time thinking at a time of these live streams but uh I don't want to have to um I don't I didn't want to have to jump in 30 minutes into a project so uh it was early enough that I could just restart all right uh so back over this way let's go ahead and create a new project I'm going to use pmpm just because I typically do when I'm working on my machine and then for the course I'll probably use mpm but just because it saves space and that kind of stuff so do PPM creete Astro and let's call this thing like uh Dev Lang crud app or something I should build it in right here hey welcome I'd love to know what you're working on too if you all have projects going on these days uh that would be cool start with the empty one yes will write typescript strict is fine install dependencies go for it initialize new repository sure uh yeah why not I'm not really going to be committing stuff as we go and I don't know if I'll throw the code up um but yeah South Africa Johannesburg [Music] welcome col Duba I read your name as Colin dude to start with so I apologize welcome [Music] though I should mention I do probably plan after I release this module to increase the price of my course uh slowly kind of as I reach the final course price so if you're interested in it I would would jump on it soon the later so just a note all right let me transition this over just so I don't remember exactly what I have on my machine here so uh the way I'm going to set this up so I'm going to do that real fast and I'll be right back with you all [Music] right I'm just about got it set up and we'll jump in officially [Music] okay cool all right uh let me move this back over here we are today Prisma AST newsletter n SEO awesome I like that okay um so so like I mentioned we're going to be building this thing out for this eth project or eight module and it's the sample project at the end and I want it to be like a an app where you can save links as a Dev that's kind of the idea so we're going to do a couple things um like I mentioned we're at Early Access right now so it's still at 50 bucks but I plan to raise that here pretty soon so I'm going to actually come over here and split this because I want a couple things to happen so I'd rather use warp than the the built-in terminal because we'll have a little bit more room and this is what I typically do when I'm coding by myself anyhow so um some of this will change and that's all right um but for right now we're going to do pmpm Astro ad and then net lifei react tail and Y let's actually do all those and then I want to add um Json server because I'm going to build this thing out with Json server as kind of the fake database I don't know I've tried to keep it real simple and mostly the the idea here is just to focus on the skill in Astro and not on the whole backend stuff we we'll have a project or two that do that does actually build something that you can use in production but again there's lots of stuff out there and I plan to release a lot of stuff on my Channel with like Firebase and Astro and you know all this kind of stuff I don't want my course to be focused on a product that I have to then update every time they do anything um which will happen it's already happened um and so I'd rather focus on like kind of core Astro Concepts and if you know enough about your database all you have to do is change out the actual fetch to a database uh from the API route that we'll create so that's kind of the the plan all right back over this way um not sure I've got so many oh I never even cded into it okay so let's let's come back over here let's go into my which also means this is all wrong get out of here let's restart life um let's go over here and go into the dev links cred app and do the same thing Dev CD Dev links cred app and let's restart this whole thing and I'm also going to restart this thing and this is going to be awesome okay now let me get this thing up and running and I'll be back with you sorry so back over this way I'm going to reopen up everything and then I'll switch my screen back over okay here okay all start okay so here we are uh this stuff's installing over here I'm going to come over this way inside the CR app and we're going to create a file called dp. Json this will just be for um we'll call this like links and right here is where we'll have our links so this will be our little Json server if you haven't used it before basically you can spin up a little fake server that acts as like a database too um it's all just local I started using codium on my personal um account I'm not let see let me get rid of this here just so it stops yelling at me um I've been impressed with it it's free um so it's like uh GitHub co-pilot but it's free and it's really fast so and it does some cool stuff I like the interface a lot more too so I don't know if you're interested in something like that um I check it out it seems to do a pretty good job all right over this way continue here and yes and yes and yes okay so I just updated all my configs and installed stuff for me then what I want to do is I'm just going to Json server db. Json in fact what I'll do is I don't like to remember these commands so let's just come over here and we'll do like a server script we'll paste that in and then let me come back over here Jon to server get that spinning up uh let's also come to my Astro config trying to think if I want this whole thing I think I'm probably going to make this hybrid instead once again that's kind of my default so that everything is I I don't know you're adding links live let's keep it at server I'm not sure how I'll end up doing this in the long run but that essentially means pmpm runev we can get that right now we'll just start with surface side rendered everywhere is the idea and then we can always limit it if we want to later okay so as you can see we get a little resource link right here where this is our fake server endpoint uh right now obviously there's nothing here but if I would add anything here it would show up over this way and that's what we'll be doing with our little end points okay um we've also got tail on this project so let me do some just one customization to start with which is the container class I typically make this thing centered um because that's kind of the reason I use it and then we'll do padding 1.5 Rim so it's one of the few classes in Astro that doesn't or in tail one that doesn't map one to one to a CSS property instead it it maps to kind of like a several CSS properties all right let's come over this way and what I want to start with is to get some kind of form so we can add stuff so I'm going to go and add a new page called add. asro and I also want to add a layouts folder just so we can have some consistent layouts so we'll say Bas layout. Astro and then I'm going to come over here and grab this and drop it in here right here we're going to have um right now we'll just have a basic nav tag that has an anchor link that points home and then we'll have a main tag and here is where we're going to have a slot I'm not going to explain all this since I'm just building this stuff out live right now but let's have a title have a meta with the name of description and the content will be whatever description I pass in I don't know that we're going to be super concerned about SEO for this since it's just a personal Dev link site it's kind of the idea uh let's take in a title and a description and this will be from as. props all right and then I will probably have and I know I'm work moving fast but again I'm just trying to build out something for my course so I'm going to move fast that's all right we'll do uh like site links or something like that TS uh site data I mean site data export const like base data or something like this how about like meta data title will be Dev links and description be um what do we want to call this uh I don't know give me 160 character description for a site that is about saving links you find on the web easier to ask chat GPT than have to think this early in the morning wow thanks for that super helpful let's just write it ourselves uh save links you find on the web for web development was that that hard Chris no okay so we're going to pull in the site data here import base what do we call it metad data temp says I have to reload the window come on hey welcome narobi welcome or welcome from narobi that is site data uh so what we're going to do is initialize these where we're going to set them to my my metadata do title and that way if I don't pass something in it will use those otherwise it it will use whatever I pass in metadata. description all right so eventually when we use this layout which I'm going to do right now we have our base layout and then close this off I'll say like homepage all right and now it says Dev links because I haven't passed anything if I want to I can pass in a title that says like home and it will override that default so for right now I'm not going to do that on this page because we'll use that as our homepage and then I'm just going to copy all this and we'll do the same thing over here typically I like to in my Json config add a couple things here uh let's see base was it base something help me out P RL be that and then what I want is oops what's the other what's that thing called um I think I actually have it on my clipboard somewhere paths that's right um then you can set this up as like a basic Alias so what I would do is is so I'm going to do like this and then whatever comes after and this will be the same as see let me just find out on my clipboard because I just did this yesterday for some other project okay so like this is going to be anything inside my SRC to start with that way I can move stuff around if I need to and it won't throw everything off so I'm just going to come in here I'll change this out to layouts and we'll do this same thing over here and then we'll say add page okay um I guess Also let's come to base layout forgive me just talking to myself right now but again I'm just building up this thing like I normally would do add like this so this will take me to add this will take me home perfect uh now I probably want some kind of Link component eventually I don't want to get distracted with this stuff now though so for now since I'm using Tailwind uh let's just do like text blue 500 500 something like that underline and call it a day okay uh let's also come in here what does it like about this cannot find a really okay well this one seems fine oh never mind I spoke too soon I don't know let's not worry about it all right class let's go flex justify between and we'll do items Center there we go um and finally let's put this all inside of a container and we'll probably do the same thing here so glass container okay um anything else I want to do let's throw a grid Gap like six on here we'll do the same thing here grid Gap six if you have haven't used tail when you're basically just one for one choosing classes for the CSS properties and there's a little bit of learning curve but like mostly you're using padding and GAP and just you know flex and you know it's not like I'm not typing every single CSS property in the book um so it's not too hard to learn once you once you get started and I figured I need to do some kind of project probably with Astro or with uh um tailin in my course so that's kind of the idea here okay um so over here let's not worry about this or this let's come over here to the ad and here I'm just going to have a simple form so let's go to the ad page uh P layout let's add a little padding here too actually um let's do py4 just to not override that container stuff okay I think we're good there uh we're going to have an input type of text that's fine I need a name so I can grab it off the form data let's think about the structure of what we want to so I'm going to have a types folder where we have uh link do yeah that's fine link do links. type TS so have a uh export con export type link yeah let's uh links type I guess I don't know um this is going to have a title which will be string an ID which will be a string um what else do we want probably some kind of description which will be a string uh a URL which would be a string I probably should like validate this with Zod and a bunch of stuff I don't want to make it too complex cuz then we kind of stop paying attention to Astro and start paying attention to all this other stuff which eventually you need but again again I want the course to be mostly about Astro title description URL what else would I want um like red or something maybe I get I have like already red property um I could have a rating this would be a number like 1 to 10 and this would be a bulling anyhow all right I think that sounds good all right so let's steal all this and the IDS will be added by Json server automatically um but this will act as a Guiding Light down here and let's see um let me go and add there's a Tailwind thing that would make our lives a little bit easier Tailwind forms right here here we go so let's come back over here let's kill this and we're just going to pmpm add tail and forms and then get this back up and running and I do need to add it as a plugin here for Tailwind so let's do that and then we should be good to go and it'll just add some styling to the form like there see so I don't have to do all that like it's that much but again I'm trying to focus mostly on Astro so I don't want to spend a ton of time on CSS especially since I'm writing tail in here look how white this picture is what's going on okay there we go uh so let's say description and should this be like a text area I know that seems kind of excessive uh doesn't it like close off like that right yeah I think so okay um let's see this should probably be wrapped in like a grid that's fine and then we're going to have a label and this will point to my title which this ID will be like title as well uh the label should say something about like link title or something like that yeah okay so let's do the same thing here we're going to have a grid for description this will say like description for link like what it is basically and then can this Max can this have like a max length yeah so we do like 160 characters something like that [Music] um that way it's clear this should also be required and we'll make this required too all right I think that's good let's come up here and add a grid Gap four something like that all right uh we got those things uh title string okay so URL will be my next one let's go and grab this since it will most likely reflect that more than anything else link URL I also need this ID on here for description so that these two things are linked all right here we're going to change this title to URL uh that's fine let's copy down again red Boolean and radiant okay so here let's have these things in oops inside of another one that's a Flex Gap six Flex wrap um say Max width is fit on here and this needs to be type of number I'll have to say like rating or something like that which to start with I'm guessing would be so this is something we need to think about because we're going to need a form for adding and a form for updating so for right now I'm just hardcoding this here it'll probably be its own component but um so should I show the radio to start with I guess if you're like saving it and you maybe I should show both all the time to you can check off whether you've read it and stuff like that I'm not really sure U let's see I'm realizing I can't see any of the chat oh okay no one said anything all right um let's go and leave it then like this and we're going to call this uh rating We'll add one more um except this will be input type of checkbox and let's see see we're going to call this uh red or is how about is red just since it's a bullion that's typically what I would do so we'll change that around too okay um and then I mean uh red already red is red we'll just leave like that okay and let's see these things should oh I have to actually add Flex on here there we go okay so is red rating these are our numbers um let's set a Max on this so we say Max is five and then you can set a Min right on here as well yeah would be one Z seems kind of harsh right um sure okay so I can't do like negative one or it'll yell at me probably should add a bunch of validation if we want this form to be like intense but again I'm trying to kind of stay focused on Astro so I don't think I'm going to do that okay final thing is a button uh let's just say like add link or something like that and for right now let's add a few basic classes again I'll probably come back to this eventually and like extract this out into its own component maybe maybe not not sure let's do like blue 500 and text blue 50 padding to Max width of fit content all right change this a little bit padding X6 maybe and we'll call that good okay so again I want to keep the styling super basic for the site especially since I'm hardcoding all the CSS as we go since we're using Tailwind all right so now we've got this thing hooked up we need an endpoint to actually hit so let's come back over here and in my Pages directory we're going to have an API folder and in here we're going to have a route it's called like add link. asro do json. TS so this is a dynamic endpoint you can create these in Astro I did pull this up ahead of time but um basically since we're using SSR mode we have access to things like uh get and post and delete and all this kind of stuff so I'm going to just drop this thing in here and grab this Helper and then what we want to do is hit our API endpoint now our API endpoint is right over here this Dev server and the way it works is if you hit it with the post request then you get back um well then you can add to it yeah so what I want first of all is to get my data this will be for my request. body maybe so just like that you have to wait it let's see a sync like this all right so let's just see what's going on here this will all be server side because everything in these uh routes with server side and then let's come over here and let's write a basic script tag probably just leave this on the page let's grab the form itself so we give this ID of like add form and let's come down here const uh add add form equals document. query selector and we're going to grab the ad form and this will be HTML form element like that okay so on ad form whenever we have an event listener where it submits then I want to grab the event and first of all prevent the default so it doesn't refresh and try to submit to that page secondly uh we should probably have a try catch here and we'll just console. error the E for now uh this try what are we going to do with this try um I also installed react I guess we could use react somewhere not sure where I'd want it maybe we can have like a filter system I don't know maybe we shouldn't use react keep this real simple there's not like a ton for react to do here honestly it's just like submitting a form so I hate to use react just to use it but I don't know okay um first of all let's go ahead and await so this needs to be an a sync function um fetch we're going to fetch our inpoint nope not that inpoint our custom mpoint which would be API add link. Json and this needs to be the oops method of post which means a couple things um we're going to have headers uh where we have the what is that called I never remember uh application Json here we go um and then we also need to send along the body obviously so this is just going to be json. stringify and what I need to do is grab all the form data first of all um so for right now we'll just say like nothing there um so just so we can see kind of what happens uh let's grab we'll call it form data and this will be from new form data the new form data API will just pass the entire form here which is the ad form and this should happen down here inside the submit uh then we should have all those things as objects uh let's see like in an object we can pass it along so we can do that by doing object. from entries and we'll just pass in the form data but just so you can see what this is let's go ahead and return here at console log of object. from entries and we'll pass in the form data so what this will do is take every single item that we I don't need to reord this um every single item that we interact with here and it will I probably should not make this required either huh um it will submit it right now just console L it but it will grab all those things with names name attributes and add them into an object essentially so we'll say like cool link other stuff uh-huh and one and it's red that's fine actually let's not do these just because I think we're going to need to add to the object so you see down here that's exactly what we get we get title description other stuff uh-huh and rating is not nothing um so for right now what we should do so the rating do I want to show that right to start with um we could have it be null or that maybe that's what we should do so let's come to my link right over here uh Boolean we decid to call this is red anyhow uh this rating we could be do a number or undefined I guess it's going to set it as an empty string though huh I'll do number or null okay I think we're good there let's come back over here so here's what we're going to do we're going to check this form data before we submit it so that's what we're going to do so we'll say form data um dot what do I want let's grab all these things as values first of all so let's go and just call it values equals object. from entries form data uh I want to code with you brother Oh I thought you said I want to see you brother like what's up I'm right here um we're coding right now man uh let's come over here to values dot uh how do we want to do this yeah let's do if values dot um what do we have in equals this then I just want the values. rating to be updated to be equal to null null is not assignable get out of here undefined undefined is not okay why can't I assign it to that form data entry value I thought I could assign it to that could I just do I guess it'll just be an empty string so maybe we'll handle that I guess we'll handle the server side then I mean typically you should also for all these values run them all through like a some kind of sanitization process so we should probably also do that yeah so let's um too sanitize [Music] um so I guess that's going to be just that and that's fine we'll say if values do is red and all I want to do is say if there is no values do is R then I want to add values. is red to be equal to false why is this object up from entries form dat this should just be an object right that's what I already got I'm not sure so maybe let's do this both both these things on the server so if they don't get sent that's fine um what happens if I just mark this as required for both of these and I don't use them okay so it's forcing me to okay please check this box if you want to proceed man hostage taking okay let's let's not worry about that okay let's take these values and let's send them on here um here why isn't this thing like me object out from entries oh I can't object out from entries twice uh so I guess yeah let's just get rid of this we're going to eventually sanitize it so okay values all right so what we're getting now is we're going to pass all this on to over here and where we're going to conso lock this let's actually see if this works something something and let's add it okay here we go so we're actually getting data that is nothing locked readable stream something something um request. was it [Music] Json is that it it maybe okay let's hope that's it okay there we go so now I'm getting that stuff so it's request. Json and you can see I'm I'm getting all the stuff I passed along with that post request obviously I don't have a rating here um yeah and I don't have what was the other thing I needed I don't remember is red either way though now I've got my data and I could say um if data do is what I want I can type this as a link seems a little weird to call links but anyhow if data dot um is red then data dot is red should be equal to false and then same thing here we'll do if uh data dot rating equals an empty string string so I guess we should do that it can be a string to I just don't want to so maybe we shouldn't type this quite yet so we'll wait and we'll just kind of know what it's supposed to be and then we'll leave this as it could be null or undefined I don't know let's leave it at null for now and then we'll type it afterwards and when we pass it in I think maybe perhaps it could happen all right so if data. rating equals that um yeah then we'll do data rating is uh null sure okay so now what we can do is hit our inpoint right so we're going to do the same kind of thing where we now try do a try catch over here as well same kind of thing as the checkbox yeah I think maybe there's like a default value you can add to it maybe that's what I should do just trying to remember just trying to think like what would be the easiest thing default no that's just for text boxes I don't know let's not worry about it okay so we're going to do try catch off the eror here uh console. error be server side the error and then we'll also return a new response response that um or will Json stringify uh message that is the E do message um see this thing doesn't know what it is so let's just conso loog the E and call call it a there um so that should be good let's come up here then and we're going to await a fetch to our API mpo which was Local Host links there we go um now this needs to be a post request so we're posting to our own endpoint which will then post the the the actual database so this is all server side so the idea is if you have like a special key you have to pass on or something you can do all this safely over this way um so any let's copy a lot of the same logic over here like this and we're going to put this on here and in this case this will be my data that I pass on and I think that's good uh we should get back something I don't remember what it is though so let's call it like uh something uh DB response I don't know is res. Json okay uh so over this way this should actually update once we submit something so let's come in here um and then let's do add link and something should have happened and if I refresh there it is so looks like we need to trim some of this stuff so that that might be something to do um anything else I don't know I don't think so so maybe we should do like four how do we do um I always forget how to do these basic Loops just cuz I don't use them a lot for in Loop JavaScript oh yeah that's right you know like there's some things you remember immediately without ever looking them up and other things you can't remember no matter what you do I don't know that's how this is cannot find an item dude I got you okay so this is for each item in one of these okay cool uh what we want to do is just item. trim like this and then we'll also probably sanitize oops sanitize uh server side here as well just because of life and things um and then we'll see if yeah that should be good guess let's pop this up here and let's resubmit this and see how this works okay oh no okay I thought I crashed to me oh we're going to have so many spaces after this all right let's see what happened nothing cool uh what did I mess up can't you like Loop through all these and then it just like it updates it right or something I thought you could do all that inside here right I thought it just like this is mutates the data doesn't it mutate it let's check name iteration mutate mutation does for in Loop and JavaScript mutate data oops I'm searching on my computer for that probably not going to be helpful no it doesn't well then why would I even use it in this case because that's what I want to do um I guess I could just grab each of them maybe I should do this over [Music] here probably want to do it here too I don't know let's not worry about it right now if you have a good idea let me know let's see what this response is though cuz that's what I wanted to check on and I never did uh let send this here okay so I get back and promise CU I got to wait this do it again uh okay so we're getting back the whole thing okay so basically if it has an ID what happens if I post to something that doesn't exist like link so this will throw my error right so I just get nothing okay so if I get something back basically we're good so I can just check at the ID property maybe um so let's say if res. okay we'll throw a new error um there was a problem whatever so we know what it is okay so that should be caught down here otherwise what we're going to do is say if d PB do PBR res. ID so if that exists then we're going to just return a new response where we have json. stringify and we'll have a message that says success or something um actually let's not let's just say like well that's fine but what I also want is a success property and we'll set this to true and then down here we'll have a success and we'll set this to false and if you want to I guess you could also have status am I doing this right inside [Music] here status here we'll do 404 whatever the problem happens to be and here we'll do a status of 200 although I will probably just check off this success instead okay so we're getting back something then we're good otherwise uh let's just throw a new error again and response or something like that I we'll call this connection that way I can distinguish them if we happen have problems all right so we should get back something which we'll get back over here right so from this res and we know we should have at least a success property here so let's just goe and get that and this will be a wait res. Json so we just sent that from the server now we should be able to get this on the client side um so what we're going to say is if success then let's do some kind of like toast notification if ation otherwise we'll throw a new error and this will be let's grab the message here too message and this will just be the message okay so I think that should work um hey welcome all right so we' got a link title thing other thing let's hit this something should happen oh we never did anything uh so let's console log right now H console.log the message we get back which should just be the full object boom boom boom success oh wait the message success that's right because I decid not to pass that along and success equals true so okay so everything is working which means if we come over here we're going to have a bunch of nasty stuff awesome um so did the first thing uh let's let's create a little toast function later to do toast all right so I've got a couple to-dos in this project that's all right so at least we got this whole AP endpoint set up now when we get home here's where we want to fetch all the stuff and once again I want to create an API inpoint we're just going to call this G links. json. TS um and we could just have a single endpoint that has different methods but just to kind of keep it clean uh let's see do I have one of these on my yeah there we go let's pull this thing in now this is server side so we could do a couple things like for instance we could pass in a specific ID just to get a single link because if I come over here and I do like one or two it'll just give me that single one so maybe what we should do is have this be dynamic or we could pass it in instead of up with a PR we'll use the pr for putting and deleting so here let's actually grab yeah okay so what we're going to do is because this is server side we can actually grab the URL that's been sent here so let's do that hey awesome Christopher thanks great name too glad you have enjoyed that the course so we're going to do if there is an ID so we'll pass in an ID yeah okay so we're going to call this a URL we'll do a new URL and this will be from the request. URL all right and then over here we've got an ID that we're going to pull off of the url. search PRS let's see what happens okay so if I hit this endpoint which is get links. Json get links. Json and we happen to have an ID of like one on here nothing happens okay uh get links. jason. TS what's the matter with this thing oh API okay there we go undefined how dare you uh huh I thought I could just pick this property off oh you know what I bet it's like you have to do get ID yeah that's right because it's a map let's try this again sorry for defaming you look at that okay so now we have an ID whereas if we don't pass one in this should be undefined or null yeah okay so we can run a little check off this we're basically what we're going to do is say like if we have an ID then grab a single resource otherwise grab M all and then we'll just return those Okay so we're going to say if an ID then I know I can grab just that single resource so we're going to do a try catch here um let's just do the same thing we did over here try catch look at all this mess let's see what happens if I just drop this in here okay so we're going to wait this needs to be in a sync function here we're not doing a post we're doing a get and what we can do is pass in the ID here as the extra pram or whatever we don't need body oops come on um if that's okay we should get back something success success equals true that should be all right I should probably write a function that like does all the triy catching itself so I don't have to keep repeating this but or I could just keep copying it endlessly let's do that um so that should be good for a single one I mean maybe instead of doing all this stuff let's just do a single TR catch and then inside here well what what don't you like about that okay inside here we could just do like if ID exists then ID otherwise maybe just do this how's that work that might be a little cleaner so we've got a single return thing right and then this is our catch let's see all right so what we can do now is we're hitting our endpoint that will then go out and fetch the stuff from the database that's kind of the idea so this could be server side so like for instance if you had like a authorization or you had like a bearer token or something so let's say you had like Bearer and then you had some kind of EnV variable you could do all this server side without any trouble basically cuz it's all going to be be protected uh do you use Prisma when you use Prisma um I've used Prisma before but honestly like since I'm mostly front end I don't do a ton of backend stuff and so like the stack I use um mostly has been like Firebase uh or super base so I don't think I've actually ever done anything on Firebase or super base on the channel so one of these days uh I'll do it's just not something you like quickly jump into um I don't know without like explaining everything and I don't know so I'm going to do a probably an Astro and Firebase like big project on my channel after the course is done that will be just for fun well not for fun but for free it's kind of the idea so we'll see um but uh right now it's all Channel or all cour work not Channel course okay so over here what we're going to do is now we're going to hit this all from my index route so let's come over here um oh you know what I'm returning success with which as far as messages go success is true is fine this probably needs to be whatever my db. reses is cuz the whole point is to return stuff okay so there we go so that's if I do one if I do them all ah like this I get nothing what if I do this um oops [Music] I guess I don't need to do all that right no I do can I not do it like this I think so I think the formatting is just [Music] off I thought I could like optionally add this [Music] in because it'll just get nothing back okay scratch this idea it was a great idea though uh so here we're just going to have the ID here otherwise we're going to just do a try catch down below so let's say if uh ID then we do all this and if there's not an ID then we do all this same thing except I don't know I'm sure there's a better way to do that so now if I come here what I should get this right it's the same thing get links API J I not found oh maybe I'm just get links. Json what is going on I mean it's obviously finding it cuz it's hitting it like even when I come over here I actually get a console log this is weird what am I messing up you see anything sdb releases next week yep yeah yeah it's pretty cool Astro quick um I don't know if it's faster than vanilla JavaScript it probably depends on how complex your app is for like something like this I don't know that you're going to beat vanilla JavaScript for like a simple form submission but yeah if you're building like an app then yeah or something that's got a lot of interactivity for for sure uh I haven't actually learned quick yet it's on my list at some point okay I'm not totally sure what's going on here um this should be everything I get back from here if you see something I'm doing wrong let me know so I guess this could be a string on or all no what are we getting back right here right so if I hit this I get back null so this should not fire in [Music] here yeah so this should [Music] fire down here yeah which means they should be getting back this right here yeah I'm getting all those promises so it should be [Music] here six items what am I messing up oh you know [Music] what but if I add an id1 to this I'm actually getting all that why is this not let [Music] me what am I doing it's an array right but I can just assign that there why is this not returning this down this way let's just get the whole DB res what is going on let's come back here API get Link at Jon that was number one it's not updating live did I kill my server it's it's Conant logging all this over here what is going on I don't know what I'm doing it happens yeah but uh Astro DB is pretty cool it will see the light of day on my channel and in the course I don't know what I'm doing wrong oh you know what I'm checking if it okay I'm checking I'm doing all this inside of an if Loop where it should just get me back if I get back anything basically um so this would just be if db. length is greater than zero well I've already know the connection is okay I should get back something if it has a length at all okay well that was a dumb error it happens okay so over this way now what we want to do is fetch all this right so let's do con res equals 8 Fetch and we're going to use our custom endpoint now because this is server side up here I have to actually provide Astro do let's do url. origin and then we'll do/ API slash uh get links. Json okay and we'll make these back ticks okay so then I should get back this as a response so we'll say data equals await res. Json and then down here what we're going to do is for now we're just going to take our data and do map over it for each item we're just going to take the item dot let's type this as a link where's my [Music] link this should be that title either way um maybe these should be allies actually and then this can be well come on links okay so let's come back over here like this data. map oh yeah what I need is um I don't know why I always call that thing a response when it's a request EST but I don't know I always do that so what I need is the message which seems kind of weird let's grab the data off of the res which if we're going to do that let's just do it right here and let's come back over here to get links and for this message we're going to call this data and we'll do the same thing here data all right there we go so we got all of our titles coming in if I can do this properly and then this data here will be a type of link is that not how you do this I don't think so we'll just call this links here okay there we go so those are all my amazing titles all right so now we're getting this stuff in that's good good we'll create a card for this later we can add new stuff here so if I come over here let's do like new link just to make sure this is clear sure is red now it already shows Okay cool so now what I want to do is create some Dynamic Pages here so we'll call this like links or link how about that and then we'll just have an ID oops we have an ID dot something asro uh this is server side so the nice thing here is I can just pick off that Pam so we can say ID is equal pams to ID oops Astro prams and I can pick this off as an item console.log ID so if I came over here and we have link do one then it says one right so that tells us what we can fetch at that point now we can do a lot of the same thing we just did here except instead of just having a single or getting all them we can pass in the single one which means I can come in here and get the ID and then pass the data down so let's go and do that um data from that that should all be the same yeah so let's pull this one [Music] in instead of waiting let's just do the is here okay so this should all work cannot find module deal with it you're going to be just fine all right so let's come inside here and let's go back link one all right let's see we're getting back here ah hm get links that should all work so we are actually getting that [Music] back get links. Json slid whatever the ideas we happen to be passing in right let check here make sure we're actually getting something we are getlinks api. Json oh you know what I did it as a query program that's right so we'll do ID equals ID there we go okay so now we're getting this stuff back uh we could say though is if rec. okay if that's not okay then we want to do Astro redirect and we're just going to redirect to the homepage I'll do the same thing here so if data there's no data then we can use the Astro do redirect and again we'll just forward to the homepage all right that means if I come down here I should be able to come with this out and we should actually get just the single one back um I guess this would just be a single object though huh so what we could do is just have this as data. tile I think yeah cool um yeah I think that I think that works and here I guess this would be a link right oh no I can't do that like that I forgot to do this in typescript I don't know this the problem when you kind of have no Ty script typescript and kind of have don't either way when I now come to any of these if they exist that works if I go to one that doesn't exist it should just take me back back to the homepage uh so what I need to do is do the same thing here so if no idea get out of here Astro do redirect to the homepage right cannot repr property of title well if there's no IDE shouldn't be able to redirect oh you know what that doesn't work here what am I getting back console.log the request status 404 okay so the other thing I can do is if the rec. status 404 or how about this does not equal 200 then I can also redirect no is that not going to work uh I guess I'd have to pick that off down here right so maybe let's do this let's get this back as data and then what we're going to say is if data what does this give me so I should have message success false okay so I could say if data. success then it redirects right so if I come over here to link like one two2 right data. success equals false then I should redirect let's try in here console.log stuff so this should be firing it should redirect me to the homepage I mean it's like literally firing right here what happens down here is it firing again awesome maybe I'm forgetting how redirects work [Music] redirect now this is all server s oh I guess I could just redirect here though [Music] huh I guess I could do [Music] that yeah maybe I should do that so during this fetch phase although I don't know why this isn't working so let's just I guess regrab this for now and let's get over my get links that [Music] Json is this really what I want to do though no I don't I want to figure out why this thing isn't working let's see check the data here it's undefined and that's falsy that should give me that should fire down here too Astro redirect add return before the thanks um this should be returning this should be returning okay yes that is the issue okay so in this case if I come over here thank you not firing an all cylinders this morning uh let's do link 122 it takes me back here okay that's all we want thank you uh it happens okay so then uh let's come back to the homepage just to have some little links here and what we're going to do is class we'll do like a grid Gap one or something like that and then inside here we're going to have a paragraph with the title and then let's have a link that'll say like cink or something like that and here we'll have an HF and this will point to um what am I point to link and then whatever the i. ID happens to be that's right there we go I can click in here and it takes me to the link okay so these are the only ones that work if I go to one that doesn't exist it returns okay wow that was a really not smart way to do that okay I think we should be good there um we'll do underline text 500 500 all right there we go so now we can see the link okay so we got all those um next thing I want to do is when you're looking at the link I want to add two options so let's come over to the ID and here I guess we can do other stuff like description um what else do I have on here can I do this as an as links I think I can so yeah so now I can just data dot no it's not not what I want I just forget how to do this in typescript off off the top of my head like when you're destructuring sometimes like my brain just short circuits on on stuff like that so I don't know anyhow it's not a big deal uh like I guess we could say like view link or something because at this point what we've got is the actual um the link itself right whatever that happens to be so this is just data. URL I think all right so this should take me to the URL of whatever that happens to be most of these are just bogus right so it's like uh URL is this so that's not going to take me anywhere um but yeah the idea is you have actual links in here okay so now that we've got all that I want two buttons up top here so let's do uh Flex Gap two whatever that's fine uh we're going to have a button here and this will be like uh Delete link and we'll have another one this will be edit link look at that okay uh so just so these aren't so ugly that I can't look at them let's do background um blue 200 400 I don't know some probably need to be red this could be green excellent text white py2 PX4 six something excellent let's teal this thing and make it a little darker I don't something like that I thought I did that it wasn't working like this data lengths but it yell at me but it's not now so it's still not working maybe that's just a reloading of es code though sometimes as that happens that's all working okay title dot okay so it is working I don't know maybe it was just the extension like vs code wasn't working this is what the f very first thing I did all right so now we've got two and what I want here is basically to hit an import point and then redirect from the server back to the homepage um so with his edit link we're going to actually hit a real link where we're going to take the ID here and I guess we're going to have a nested let's let's do it like this perhaps let's take an edit and then we're going to have a similar thing inside here so then what we'll do is over this way I guess this is going to be a link and this will point me to hre um so I guess for we could just do edit like this maybe let's do that how do I want to do this link edit oops no um let's go link edit and then the ID which will be data to ID okay let's uh get out of here um so let's do that so here and here I got about 30 minutes or so so this should take me to like this let's get back yeah let's do that then we can basically have the same situation in this Pages directory okay so edit will just take me to edit which will eventually be a form okay so that'll be the first thing the delete I think will be a little easier so let's start there so we'll edit the links and delete the links so with this delete let's see how do I want to make this work this could be like a little micro form that submits to a route maybe we should do that so this could be a form which will automatically submit and we should be able to submit this to API like delete link. Json right so if I click this it should take me here which doesn't exist yet but don't you worry so let's do that we'll just make a little form um so I guess we should technically add this as a type submit I don't know that this really matters though because it's already that by default so let's go into here we'll do like delete link. json. TS and let's do post find that in here no just want to not have to typle this out um except in this case we've got a delete so all we have to do is pass along the ID here for delete like Json server as to do Dynamic folders yeah you can do Dynamic folders maybe that's a better idea because you could do nested Dynamic all right if I remember that I'll go back to that this is the nice thing about doing this live is you get all my thought process and it's the bad thing about doing live is you get all my thought process all right so you just have to go to the ID and okay so that's easy enough yeah that's what I was thinking so you just hit the ID with a delete request and it deletes it so easy um so what we're going to do is we'll have this pram the actual parameter of the file so we're going to have a dynamic link here um see like this I think this will [Music] work I thought I could do something okay so delete link uh that's right yeah so it just refactored it all right so now what I can do is const get the ID from the prams doid so if I hit this with the delete request I should get this back right so let's come back oops to here delete link. Json okay so I have to change this up slightly so let's come back over here delete link and then in here we're going to have the ID right data. [Music] ID so might as well use like J or you know like uh browser apis instead of making our own thing so this should hit this oh but can I hit this I have to just change the method here to delete can I do this right cuz right now it's doing a get request no website AI link four I thought that's what I had over here though delete link SL for. Json right isn't that what it should be hitting H API delete link Json this should [Music] work it should hit this API delete link and then I got for slash4 or whatever happens to be let's just try to see if it actually so if we fetch here over this way and then let's just add in the [Music] ID so if I hit this it's just not going to return anything so I should be able to grab though a redirect and once it's done that I should be able to redirect right redirect um to the home and then I don't remember what uh what is the code for a redirect no [Music] um 31 not a redirect for a delete [Music] success 20024 no content okay let's just 200 then this need to be a string status do I not to do anything all right let's try that I hit this no [Music] it's still doing a delete request okay so maybe you can't do this straight from a for or I thought you could just throw a method on of delete I guess I'm doing a get request there even so still not working okay that's fine um so so what should we do let's take this I guess we won't have this be a forum we just have this be button and we give this the idea of like delete or something like that all right and let's see what do I want to do here I guess we could pass down yeah so let's have a script tag or we're going to grab our delete button document. query selector I'll grab delete if I can spell delete that so that should give us our as HTML button element and then we're just going to run delete button whenever it's clicked uh then let's just go ahead and fetch our mpoint which is API dot or for slash delete link slash whatever the ID happens to be now in order to get this ID down into the script tag uh let's see how do I want to do this I guess we could just like Define vars right so I can have an ID which is my data. ID I think that should work now I can't use typescript now down here which is fine but here I can now have an ID be passed in so I think this should work okay um and I need to make sure that this is Method I method inside here of delete yeah I could also do a data attribute but in Astro you can just pass down variables directly to the script so from the front matter so that's what I'm going to do hey welcome Yan all right so let's click this something happened not it tried to hit that why is this thing not hitting properly what am I messing up here like this Dynamic endpoint should work let's come back over here I'm sure I'm doing something dumb because it's happened several times today already I got about like 15 minutes I was hoping to get all the functionality done let's see yeah right here pram PR's ID like right this is what we got I don't I don't understand what I'm doing wrong here all right so what we're going to do is API delete link id. json. TS this is delete method which does work like I'm grabbing it right here inside here when I delete it should be able to hit this link and I mean this method needs to be deleted I just don't understand why this isn't working delete link sl4 should be this ID that I'm passing on this ID I should get right here with the delete request what am I doing here let's let's do a get request and see what happens um if I come over here and we do api. delete link slash4 so it's not found let's see if it deleted it no man what what what is going on is a console logging in here at all I don't understand why this isn't working API delete link and then it has a this ID here I don't know so let's do this let's just have a standard one right here I'm going change this back to delete and we'll just use this for both the post and the put so that if you hit a single one like like this as delete route maybe it's just that nested stuff that's not working I don't know let's try this we're fetching to our API and to our delete delete API 4 not working I don't understand why this isn't working uh let's change this to get again and let's come back here and change this to get and see if we're getting something in here okay still nothing man what am I doing wrong okay so it is actually logging over [Music] here man I don't know what I'm doing wrong [Music] here get get Prim [Music] ID H well I'm kind of stuck um what if this is just id. TS I mean that's not what they did over here but you don't have to have the type why why why did that work if I come over here and refresh it's gone okay why is that a thing that happened exactly I don't understand that let's come over here delete change this back to delete that is why it wasn't working man we are you're getting the real deal this morning okay so now we can hit this individual like goodness so I need to just have it be to the J Json which means I should probably let's come back up here and let's erase these 20 minutes worth of work and let's see if this actually works we're coming to my uh whatever the ID happens to be and then I don't even have to write all the JavaScript at the bottom of the page where we have our data. id. Json and then our method is delete do you do lowercase I think like this for these let's get rid of all this let's just see what happens first link delete it Json so maybe you can't actually do cuz it looks like it's a get request let's see uh can you do a delete method from a form action from a form on okay so you can't okay well I'm not sure understood what I was asking for actually but anyhow uh let's get rid of this and this let's come back down here either way now I can delete this link and then it should redirect me back here okay so let's come in here delete and then it should redirect right so it does redirect after it's done it just took a second deleting deleting redirect Maybe all right it's not redirecting [Music] so um if there's no link okay so let's um where [Music] is let's go over here and delete something we need to a this sync all right delete it okay so we are getting back something status 200 okay so we could just say if res. okay then we're going to return a redirect which is its own little response which is why we don't have to like manually type about a response 307 I don't know what that means um I forget what all the codes mean otherwise we could just return something like this let's see okay and then I'm almost done to go 10 minutes maybe if that all right uh so we got that working come over here delete this link it's gone but now I can't map over anything so that's probably something else to think about is over here on the index page is to check the data. length it's greater than zero uh or that there is data at all how about that because I guess that's what it's struggling with okay there we go so now I can add new stuff something something something and sure that's fine success awesome uh probably also should come to my form right add whatever this is and just say that if we are good if it's success toast let's also take the form which was called something add form add form and we'll just reset it as well although I guess we could also redirect to that exact item here's what we're going to do um we're going to have two buttons instead of a flex container Flex Gap six um one is going to be add link and one is going to be let's see add and view or something like that how about that this ID will be [Music] like I don't know let's just do like a data view equals true or something and then what we can do is check down here on the thing that was clicked on so we could if um e. Target the thing that was clicked on data set so let's mark this [Music] as chill I'll be with you in a second all right so if that data set Dot View I think it was so if it has that then let's console Lo in here like hi just to make sure this is working so if I click over here nothing I click over oh well nothing click over here this isn't showing down here so maybe let's come up top here let's grab the target um just to make sure okay checked false okay Target itself though should be need a Target you right let's see what happens if I do this undefined cool undefined awesome I thought you could click on that and it would give you you should be able to click on it it should give you this right no I don't know all right let's not worry about it let's just possibly add something in here where we're like to do add and view as like an option okay so let's come back up here let's get rid of this let's get rid of this and pretend nothing ever happened okay back over this way and all this stuff come over here okay so now we can see these links and delete the link it deletes it and it should redirect us it still doesn't cool so let's close this down inside here [Music] I route done all right let's uh figure out why this isn't redirecting us console logs it properly up here see if it's doing anything inside here cuz it's actually deleting it okay so it is here and then it's trying to return and redirect and not doing anything so let's figure out why this isn't working maybe this needs to be a full link to like Astro Astro do url. origin and then we could just do like a 200 valid redirect status what is valid redirect status exactly let's do 307 since that's what they just did okay cool maybe you have to have those okay cool maybe it's is as origin I had to provide the whole URL I'm not actually sure all right um last thing to do is some kind of put request so what I'm going to do um with the limited time we have is grab this right here not sure where this thing is let's get rid of that I don't really need this either and we're going to come over here to the id. Jon because we'll also have this as yeah let's do this so let's uh paste this back in here and what I want is here this to be like a put um where I grab the Pam right here from PRS okay um let's see links and then we're going to have a dynamic link just like we did up here so I'm going to grab this Fetch and this will be a put we're going to update all the data um can I just do that let's see what happens cool um so if I go to thing and hit edit which since I already got the setup this way let's just do that except what I want is the same thing as I have on the ad page right so again I'm just going to hard like drw this in here even though normally you wouldn't do this uh I have a component and stuff but I'll refactor later and let's just drop this all in here uh the only difference is I want to make this go to Just API whatever the ID happens to be so again let's define vars I'll pass down the ID which would be the data data data something something o yeah I don't have a pram here fetch so I need what is all this doing let I got to remind myself what this is I thought I grabbed this from the ad page okay so I don't need any of that stuff okay so I'm gonna come back over here let's come in here to this we'll get rid of this paste all this in okay we are going to have an ID and this will pass down to the the vars here so Define fars and you can pass front matter stuff down here I guess I could have just done ID like that um then you just can't use typescript here which is fine because I think that's the only thing I was even using um okay so now what I should be able to do is put this as a post and this here should be ID that I get I have to find let's see what happens um I guess the thing is I do need to fetch this individual item so I kind of do need all this other logic I guess so I'm sorry for deleting you earlier let's bring you back over here um also pull this in I guess too and then I need to go but all right um let's pull this in now and what I want to do for each of these is set the like value here to the data dot whatever the thing happens to be so this would be data. title and same thing here the value would be uh data data do description does this not have a value on it default oh you know what it just has to be in here right data. description uh rating same thing value here data dot rating which happens to be nothing and then checkbox or checked is going to be equal to the data dot is red okay so then when I add this link I'm going to say like update link that should work I do a put request to this endpoint which should hit over here which should then hit this right here what I want to do is come down this way I'm going to do a put request to this endpoint with that ID where I pass along the data and what we're going to do is just say right here I got to pull on this redirect and in this case what I [Music] want [Music] um as. url. origin and I'm going to do for slash uh link SL whatever the ID happens to be all right hopefully that makes sense and hopefully did it right so let's come over here we're going to update it form element object object json. [Music] [Music] found Pro maybe that was the problem it just didn't like me no okay back over to my edit page should get these [Music] values that's true description reading error all right well I got to run so I'm going to call this Good uh the only thing we had left was just I guess this would be a patch Quest anyhow right and then maybe this should be patch and this could be patch and what I could do is here I'm not sure what to do there so I got a little bit left worked really the only thing left functionally is just to get it to where I can edit it because all the rest is working go home I can add new stuff so there we go almost a full CR up just like I promised success Okay cool so we got a couple things left to work on but for an hour and a half or whatever with my brain clearly yet not full capacity that seems okay so anyhow hopefully you enjoyed that thanks for hanging out hey comrade welcome uh sorry I'm just seeing your message but hopefully that was enjoyable for you and uh now you know what goes like behind a course like it's day like this where your head isn't working and you're like H how do I get this project up and writing and then I got to figure out how to break it out and describe it in a way that makes sense so hopefully uh that was enjoyable for you but thanks so much for watching I'll catch you in the next one happy coding [Music] I

Channel: Coding in Public

Views: 1,727

Keywords: astro, astrojs

Id: IpzNH0GarFo

Length: 107min 35sec (6455 seconds)

Published: Sat Mar 09 2024