Burke Learns Blazor - Handling personal lists for logged in users

[Music] m [Music] oh hello there hey what's up New Year wow okay every time I sit through that countdown I'm like how do you what's the segue like yeah because it's like it's going to be a professional thing and it isn't do you ever watch streamers on Twitch some yeah they'll be like it'll be like stream will begin shortly right and then it's just up there for however long right well they're getting coffee and then they're like right and then they'll and then it'll start and it'll be an empty chair for another 10 minutes like the most unprofessional world but okay no not us we are super professional oh we're so professional which is a great time for me to do the disclaimer live coding show to give an example of how live coding this is I was telling Burke beforehand I was like Hey last night I got it mostly running on net 8 and he's like good let's start with that so I guess we'll oh I was thinking though what's up Mark thanks for joining from I've been to Oxford you've been to Oxford John I have not did you know that's where they filmed most of Harry Potter I believe Mark is that true correct me if I'm wrong I believe it is I went there for a jQuery conference uh it's like the oldest it's it's one of the oldest colleges in the world universities it I think it's still the top university like globally even over Harvard and Princeton I believe I believe that's what I saw what's up Robert right Y and war castle all right let's go I have not I have not been to England sightseeing for a while it's I'm due yeah you're up okay so I was thinking John before we do the this is out a left feel but before we do the net 8 upgrade maybe we look at the Blazer sortable project that we published oh yeah yeah yeah do you want to share your screen then I can or you can just go to the the Blazer sortable yeah that's fine I can do it here okay let's do you okay and let's go there you are okay so y'all if now go to Blazers sort. we took that sortable that we created for our app and we we made it into a like a generic compon why can't I my mouse phone oh there it is component yeah into a component that you can use and so what we do is this right but then there's also like shared list and I SP over the break was that this is really cool so what what was uh was it difficult was it a bunch of like wrapping stuff I mean a little bit mostly it's just figuring out like how do you handle the events in Blazer but I put the code in for that here how you can disable sorting you know like so you can sort here but you can't sort here and yeah drag handles and filtering like this item won't sort but the others will sort you can go grab that on GitHub which just goes to the the repo for this this uh component and all you need is these three files here and I'm writing a blog post on this okay so do you know about amazing Blazer no okay so awesome like an awesome awesome that's sorry awesome Blazer I got it wrong we like among other things we got to get this listed on awesome Blazer we should yeah um so can you or I could bring that up I guess awesome BL awesome Blazer let's see is it on GitHub yes amazing blaz Blazer it's awesome Blazer yeah they're usually awesome lists awesome Blazer searched my repo because I don't know how to use yeah okay awesome awesome Blazer this is a really cool Community run list um let's is it this one awesome Blazer yeah yeah it is click on this oh there we go no yeah it's linked from the docs which is kind of neat that is kind of neat I just wanna I just want to use the URL funny I just Googled for the site and it was the first thing that came up but yeah it's like tons of um I mean components and all kinds of stuff um yeah and and also it's cool they up updated to like they when we have a big like ASP net community standup show with with cool things all list commercial components um just tons and tons of stuff very nice yeah I'll add it I I'll well you should add it I did the sortable site okay oh you're right you're right okay okay um yeah okay so can that's a question it depends if you think that editing CS project files is coding um because most say I just accept AI suggestions these days but let me let me see okay let's start with I will sh let's Okay so we are the for those who are new to this project um we are updating this website this is a site that was written in 2019 with View and Azure storage and Azure front door and a bunch of stuff and awesome here wait a second I need to well mind look at that got Outlook running apparently let's let's kill Outlook it's dangerous okay um we are updating the site uh and writing it in Blazer this is a really cool site I use it all the time here's one of the reasons we're updating it because the off currently only works with Twitter which is getting more and more flaky um no this is not virtualized Windows uh today it's actual Windows actual windows but anyhow here's my list um here's an example of one of the for okay look I was an early adopter yeah you were you were one of the first yeah this is how I've used it we share our links for aset community stand up on there so uh we're do we're reimplementing this with the newest Azure uh static web apps figuring stuff out along the way um and we are here's all the stuff we've done so far which is actually pretty good yeah we're really I mean after we get done today we're going to be I was thinking we're close man like we're we we do now have some things where we want to like optimize a bit like because for instance the homepage of site takes a little bit to load um to my list I don't know maybe it's not a problem I think we should identify like what we need we should talk about this at some point is like what do we need for our V1 right like when publish go to prod and then Circle back and start making these make them better yeah yeah um so here's by by chance here's the things where looking at here let me bump that up we've got update to upgrade to net a and the my list page the my list page is this right here which we don't currently have right now does not exist but will hopefully exist after today quite quite soon so I actually have okay I did a quick Spike on this last night let's see how this works um let's go first of all I'm going to do the updating of the new get packages and stuff um in visual studio and then I'll switch to vs code to test it just because I want do all the things okay so let me bump up that so there's a few ways to update stuff in visual studio so one interesting thing is which I'm not going to do today I didn't test this out but there's this upgrade thing I don't know if I showed this off before this does yeah we did this last time it didn't work it didn't work and I forget why so so yesterday what I did was I just went in step one I'm going to update the pfm and sometimes I'll talk to people and they'll be like we're waiting to update to net 8 you know we're going to do a project on it in three months or whatever I think that people like overthink the updating stuff a bit much you don't have to use all the new features to do the update you can just go into to your project files let's go come on all right all upate update this one first then update shared so I'm going in here and I'm doing update do that to n 8 and then let's go back to the API one and we'll update that to that night8 we're already using isolated and V4 so that's all good so now this uh is pretty close um I didn't move this over to a let's move this to a new um Branch so we'll call this net EIG ght check it out we will move all the stuff over okay so the one thing I haven't done is updated all my new get packages and I need to do that as well and that's part of why I'm doing this because vs has this nice thing that at least currently we don't yet have in uh vs code so I can go manage packages for solution and I'm going to go to the updates Tab and okay I'm there and I'm just I'm in Yolo mode so I'm just doing select all packages yeah update sorry one really cool thing too with um with the static web app stuff is that it'll create a staging site for the pr so I'll run it we can see running live and then we can then I can hand the broken code over to you and you'll do your coding on top of it okay so uh let's see about this now so I've updated all the things let's see if it builds so we'll do build control shift B uh I guess I want to be looking at output let's look at output I'm using the new um UI whatever feature in visual Studio which I kind of like it's got like a little more space to it and it's rounded and everything I'm not um yeah okay something didn't work there something did not work okay project assets didn't doesn't have a Target yeah so when it does that this is a like close and reopen the solution sort of thing from my from my perspective so I'm just going to do a close solution and then reopen the solution and then so this we're opening up this one I like them I like this theme so we are in uh themes I forget if it's like the grape one tools theme Moonlight glow kind of like it it's very vs code copy you know like feel but that's fine with me okay so we're rebuilding everything getting a few warnings built the client what's upes what's going on built all the things so it built so now I'm gonna pop over to vs code because that's how we've been testing stuff lately um because we're running with the the emulator locally and stuff so we'll do um oh actually I did the first time I ran this I'm not sure if um I'm not sure exactly if I was doing things wrong or what was happening um let's go back over here I did find uh this so there are some minor updates in the Azure functions like startup and so I went and I looked at um went and looked at what they've got for their sample project over here and I noticed a few things different they're using a um async task to start and very other minor stuff so let's go into my I guess I can do it either place we'll go into my program for my API and we're gonna go let me see all right um public static async task and then and we'll go down here and we'll do um a wait and I think that was the only difference let's take another look here wait host R oh run async and it's just task Main and then we can pass in arcs but we don't have to so I'll give this another look here await run async okay let's try rebuild I apologize for jumping back and forth I should have done all this in but I do like that you can hop between the different editors they're both editing the same files we think oh between visual studio and visual studio code uh yeah fom it's not uh it's not exactly a copy Studio actually not at all the only reason that they had the same name is because they I guess for Branding purposes they wanted them in the same family same Department yeah which you know arguably it's for better for worse like in some ways it's introduced people to visual studio that wouldn't know about it otherwise um but it's also confusing because people are like I'm in vs and it's not working and then you're like yeah exactly okay wait a minute so let's let's first of all let's start this up so we'll do uhet I think if I do you need to be in the client I think you need to be in the client folder or yeah let me see um okay CD API and we'll do Funk start and I'm doing veros these days so that's to start up the function when I didn't do when I didn't make all the updates it built and ran but it didn't find the functions so we'll see if it finds the functions here Chuck said it VSS is like vs code is like vs way younger step [Laughter] sibling okay so it found all my functions that's that's good now we'll go over into Blazer and there's one other thing I'm gonna do after I get it running I'm G to test one other thing so here's go Cent folder right yeah yeah you're right thank you CD client and then little net watch I was having problems before in Net 7 with net watch net 8 it's just working so I don't know what happened but I like it got some warnings there that's okay couple of warnings these are about noble noble warnings which is you know we do popped up and then we'll do one other thing which is we're going to do start it using the S start yeah and you don't need any of that oh why don't I need any of that you just need swas start now that's all you need you don't need any parameters okay I forget why we put those in or why why we needed them to begin with but then I added a config file so we don't in cool cool all right so it's loading I was already logged in because I logged in yesterday why are the my list showing oh yeah because it's always been there that's right yeah it's the links to it but it doesn't do anything now we'll do let's go to that let's go whoa yep okay there we go there and then let's do I don't know let's do Andrew Lock these are all aut of comp completing things I've put in before okay that's sorting now there's one other minor thing I want to play with which is uh trimming so there's a bunch of stuff I'll bring this over so anyways I feel like that's some success that's it there is yeah that's it then there's other stuff we can do there's a whole migration guide for how to use all the new features and everything but we don't have to use that to be running on net 8 so you get you know um faster runtime you know bug fixes security whatever um there's some stuff in here too on performance for Blazer and I was looking at this and there's stuff like IL trimming and so if we if we check this out this is like the deal with this is you can because the Blazer rasm file is just this monolithic build of net and it has a bunch of stuff in there that we're not even using using yeah y so we can go in and we can set uh configure trimmed uh so this is one more here copy this so if I do publish trimmed and then there's one other thing I'm going to do so I'm G to go into my like we are seriously yoloing it here I I played with this this morning okay if I go into my client uh client CS project all right where are you project there it is if I go up here and I throw that in what this will do is during the build it will trm out unused um dependencies and stuff there's one other thing I looked at in here and I'm not sure how quick I'll be able to find this you can trim out also there's a bunch of features you can trim and there's one in here I'm going to go look on my other monitor because I I got this working um I think um it it has to do with time zones so the deal is with time zones there's a bunch of um time zone tables for time Z worldwide time zone support and we're not doing any time zone math and internationalization with time zones and stuff and so by cutting this out that supposedly eliminates a bunch makes even smaller yep so now I guess I've saved all this this doing it's doing net watch but let's let's stop it and restart it but it's not going to do it until you actually build right like the development version is going to be the full-blown yeah you're right okay so let's go back over to here let's go back over to here oh see rude at it look at me yes to rebuild and this is definitely something like to play with one thing I did see is if you're doing JavaScript interop in which JavaScript is calling into net functions you have to mark them so they're not going to be trimmed so I forget if we're doing that do we have JavaScript calling. net we do do we I don't know I'm asking you yeah we do yeah okay so let's take a look and then if we're not sure about that we can remove these um go to the sortable list sortable list sortable list right there scroll down keep going right there okay calling. net from JavaScript itself and what function is it calling in.net the Js invocable the drop okay so this this guy right here sortable list. razor. JS is calling the JS invocable function below okay which is what what is the net function that it's calling C line 49 right there yeah so this JS invocable I don't know how deep we want to get into this but if we go into trimming says if you're doing J interop make sure that you mark your function otherwise it could get trimmed um trimming okay it's not here seems like they would look for JS invocable and not trim that yeah I don't know we could look and see if it works um so if we go back to here but there there's a specific thing where you can say configure the trimmer let me look and see if I find it real quick all this minimizing uh size and then there's here there's so many like performance best practices um this was where I found the thing about the time zones um um maybe it's not I saw calling JavaScript from.net yeah I I did see that this is just basically best practices gotcha okay um so I don't know we can see if it does we can keep our eyes out for that if it's doesn't work calling into I forget now where it was it was basically like it is possible to trim net functions if they're not being used from anywhere but this is not like a weird net function where I would consider it okay so here's so we have it running again we've got this guy still running I guess no SW start so I'll take your word for it swall start it's very exciting okay so now let's go back to one of my Min but again you're not going to see it here right because this is not a build I did do a build. net you did a you're doing a watch which it's giving you a development version of of web assembly right you have to deploy it to actually see this so I could do net build with a mode but we also do have it deployed I can create a poll request yeah that's probably the easiest way just do the pr and see if it works when it gets all right uh so let's do that so let's go here stop all my things up all the things okay um so let's stage them all let's go message oh I got to do this let's see how it does the magic I guess four. net8 let's put that I like it send it 4.net 8 all right commit um publish branch and then it's hopefully going to say PR make p requests let see it didn't prompt me to poll request it why the heck not all right let's go over here you know what to do you can still do it from vs code you do okay all right how do I do that uh you go to the GitHub uh okay the Ellipsis probably no you don't have the GitHub polar request and issues installed that's why I didn't do oh my goodness what am I doing okay well I'll just to make this yeah you just do it to from the website it's fine yeah all right so we're going there we're going uh Blazer we got to rename this at some point I know it's not great okay compare and pull request all right and create poll request so I don't know if you want to build on top of mine for what you're doing oh boy I think I don't think I will but I think have no trouble merging so what we can do is if yours works we can merge to Main and then we'll merge mine after that okay so this is gonna build and then it'll do the pull requests uh thing it'll create the staging site it does take a slight amount of time and hopefully we don't have too many staging sites used I don't think so we've only got two PRS open right yeah I guess so is one of them we could just delete it's just a static my static page that I've been working on but I'm going to close my other po request where I played with this this morning but I did notice it doesn't automatically delete the staging sites just by I don't think so no way I don't know I portal we'll see let's see if it creates the staging [Music] site um so I this could be like how long does this take build and deploy look at it Go environment variables no environments let's see oh my goodness yeah I only see one at the moment okay should be good then I don't know how many we get with the free the free tier I think we get two or three oops here I'm bringing up my uh what is it do not disturb so usually I turn on my um Do Not Disturb when I'm sharing my screen but here yeah yeah I don't know this is short enough time let's see it's going it's doing things orex is really neat it's uses that orex thing to detect what it's running like yeah that was one of the first things that I was that I worked I say worked on it I didn't build it but providing input and writing content for that when I first got here because we were moving kudu yeah remember kudu kudu was like yeah yeah yeah the predecessor because kudu couldn't really it did couldn't detect automatically like what you were trying to build and then just build it for you you had to be you had to hold your mouth just right and or just does it it's it's crazy smart like it's able to go like oh this is a python project or this is Jango or whatever yeah okay what's up may we got a couple folks beautiful day to everyone from Nigeria Delta State what is up wow that is cool is nice all right awesome welcome okay we have a staging site all right let's see let's check this out we get explosions loading it's a lot of loading it is it's a first run so it's starting up the functions it's doing all that stuff so open your developer tools okay I want to see what the the payload looks like yeah okay so I guess that would be here should yeah okay so it looks like we're looking at web assembly is z zero bytes how's that possible that can't be right where is it getting pulled in if I go to WM yeah honestly I always have I struggle with this because is it doing cash 375 kilobytes because it's doing from cach you can disable the cache yeah I can Okay so let's go disable cach all right oh I should have cleared all the things oh yeah it says um oh interesting JS main.js we're actually not even using main JS what do I why is that even there I don't know look at that though one megabyte transferred 1.6 megabyte resources I don't know seems fast let's try compar a lot man you know it is but I mean that's images and everything I don't know 1.6 megabytes total I think 1.0 megabytes of that is web assembly it could be so I don't know but I'm GNA guess it's better than before so we could do oh go out and check out what it is now oh well I wasn't saying compared to the view version I was saying compared to what was running last night that's what I mean yeah I'm I'm looking at what it is on the the main branch should I switch to your uh you can okay let's see I need to get better at the there's a lot of stuff that with the caching and things that are hidden and can be all very confusing see I'm pulling 878 kilobytes of resources did you disable C you did disable cuh what I'm wondering John is a lot bigger it's not and it should be shrinking I and I cut out the internationalization stuff too I'm wondering if somebody said try this on a new tab I mean I don't know it's so they're working on trimming in all the update here let me do inspect let's try this out yeah we're currently at 878 kilobytes all right uh let's clear all the stuff let's try this let's do this so now mind saying six yeah one megabyte I wonder if for the preview ones it does something different um I don't know think so I mean it I don't know something for us to look into but as is that's a step in the wrong direction yeah okay fair enough I'm there's a valid reason here then we can come back next time and be like here's what happened here's why it was yeah and also we did see that main JS is now what is that MJS is about to die it's not even why is main JS main JS doesn't exist in the solution anymore why is it linked somehow through the static web app stuff I'm looking is it still in the index page it is still in the index page that's why it doesn't exist it's not a it's not a thing we'll take it out in this next all right you want to do the My Links should we do my links let's do my links all right you can switch over to I'm gonna I'm gonna give mine a qualified success Del it ran it compil run yeah that's true I think we can merge when we figure out EX exactly what the size difference is yeah yeah okay all right so let's I created a new Branch we're going to be building out the My Links Page today so first up let's remove that um okay so let's get rid of this and this in um the current iteration of the app that page is called user so now is our opportunity to call it something else if we wanted to what do you want to call it my lists my lists I mean to me okay and then let's see here I'm on a different screen so you can't see ignore the behind the curtain no that's the wrong yeah Blazer s is a terrible repo name it's so bad it is it's just the the default or I don't know I don't know the other thing is I didn't have my I switched over to my Mac and I didn't have my um I didn't have my Global stuff set right so all my p i notic your name all my commits are just your name it's beautiful great clearly I I'm not an amateur over here but I am all right you know one other thing just while while we're talking there's other stuff that could be happening like brle compression and stuff I know there's so many weird things I'm still still fixated on the the file size there gotta get that figured out all right go ahead all right sorry I'm looking uh I'm distracted here so let's go to the client and our Pages we're going to make a new page one of the great things about rebuilding this app is that we don't have to do any of the front end work yeah like mess with any CSS or layout which took so long the first time I did this wow all right so let's um let's let's write some codes so let's bring in what we call this My Links all right yeah and that's right laser app shared and then we we have an HTTP container now man yeah we do and then let me get all this markup here I'll we just bring all the markup in because ain't nobody want to watch you watch you right markup and by you I mean me although I'm I'm more and more a fan of Bulma it's it's cool watching oh dude it's so great it's my favorite CSS framework it it's like The Best of Both Worlds it's like a little boot strappy and a little tail windy at the same yep okay and then uh let's write some code here and then we'll we'll run this and talk about what's what's happening do we need to remove there's probably a bunch of view bindings and stuff in there too isn't there that you copied in no no this is this is from my PR you can see this is all legit razor so cool cool we've got like a button creates a new list we're going to Loop over the link bundles so first we got to get the link bundles y um and we only want to the question is do we want to get them we want to get them whenever this page is navigated to and the reason why is because when you navig let's say like you add a new list it's yeah and then you you need to refresh it yeah or do you if if you add a new list do we really want to make that call every time or do we just want to you know maintain the state locally and only call once uh I don't know chat should we do here yeah and while we're we got a question from Chuck which is interesting why don't we use code behind files so the the deal here is you've got that code block at the bottom of the page which I kind of feel is more like JavaScript D to do yeah you can move this to a separate file if you want I I don't have a strong opinion either way really um I kind of feel like if if it's a bunch of code I would move it but I kind of like to see it in the same page when it's like not that much I guess it's just kind of it it doesn't matter either way it's kind of preference you have thoughts I think it you know it's a pattern chat it follows Blazer is really following uh JavaScript patterns here which is to say like if you build reactor View apps you're G to have angular is a bit different I believe you have markup in a different file but definitely for for react and view your markup in your code is in the same file yeah and for view you markup your code in your style is in the same file as well so they're called single file components and it just kind of makes it easier because all the code's in one spot they could be code behind but that's just not the current Paradigm I guess yeah and but there is a um there's an extension for visual studio that you can rightclick or you can basically say move all code to a code behind and it'll create it for you oh really so you can do this with Cod behind yeah I mean yeah you can move all that to another um class you know or another CS file so it's up to you if you want to do it but you don't have to so what we definitely do want to do though is we want to get um get all those my bundle right yeah we want to get all of the link bundles you know this is one of those things too as an optimization it it's it's also something where it doesn't matter but if you were tracking a bunch of Link bundles you could say just get me the names or you know what I mean like we could code golf this a bit like here we're getting every link the C the users ever created on every link bundle we're getting every what I'm sorry every oh yes that's true we could return just just the names of name and description or whatever I don't think think it matters at this point it's an optimization but it's it's something I did think about yeah that is that's definitely true that's a good point um and then in our container I got of remember how this even how this works um get a sync right I think so and then I close uh another yeah and then here I need to tell it what to get I don't I have to I need to cheat um I don't remember my own this like looks like this I'm close man yeah I'm not for user here though here we're just calling Chuck's got the name of that extension by the way it's basm it's from Jimmy ingstrom he's he does all this cool stuff BLM BLM the BLM extension return response cannot implicitly convert type generic list why not uh this is a list this is a list all right well while you do that I'm gonna bring up Blas extension and show it off because it is pretty why can't I do that that's [Music] baloney so here's here's basm um does create isolated CSS JavaScript code behind find component usages it's all like rightclick stuff so it's it's pretty sweet B unit test generation we should be doing oh man we got to get on that I don't know anything about no tests can't fail a test if you don't write it that's right exactly are all your tests passing in fact they are thank you uh let's see here what am I doing wrong oh I think I need to like convert this thing oh you get back data and you have to convert the yeah it's like it's like this and then I can return it because it's not here is the wrong file get out of this you know what you know what I don't just get out of here [Laughter] have time for that all right so what we want is something like this yep or we can just return I think we just return so we just need to know oh do you have to do question question something empty list yeah or we could return an empty list uh we just need to figure out like when do we call this okay well you could just call it every page load chat should we call it every page load I mean that's the easiest thing to do and the question is really like what is the right thing to do here as a developer do you is it okay to make changes on the client to the model and then just say Well they're in sync because they got made in both places or is it better query the model on the server every time you change it so that you know I'm always in sync so so the only thing that would fix is the case where you make changes on the client something fails on the update to the server that's right you navigate around and on the client you keep seeing it there you're like Yay it's here's my list and then you close your browser and you come back in the new year and and your list you made isn't there that's right so the the server is the single source of Truth and we will not trust that that the front end we will not trust that we can mutate it in both places to keep it in sync right we're only trusting one place what do you think chat yeah James is saying like you could observe yeah okay uninitialized I don't think that's going to do it [Music] so all right we'll just we'll just leave it here for this for the moment so what we do need though is we need for our user we need to have here it needs to have a um it needs to have some some uh link bundle attribute right so the user has link bundle uh let me just see no that's not the right oh here we go how did I do this what did I do yeah I just did I just did this right so each user has link bundles that are associated with them when they're logged in or they have none if they haven't created any yet but they got something and then in our page here what we want to do is we already we don't need to set the user I don't know why it's trying to do that but this we definitely wanted we definitely want to do which is do we have possibly null reference here yeah can we do this no do like this may come on all right hold on so wait I'm trying to catch up with why no that's not the null reference so if State container. user is not equal to null then interesting all right so I don't know if that's helpful don't wait oh okay it's saying the thing is it's never going to be because like if you go to the state container I wonder no you can have a new user without having read their link bundles that's true we automatically read all the link bundles that's true because the user object may be null if the user is not logged in it is null so that's right so we do need to check yeah the thing is like this page isn't even invisible if you're not logged in that doesn't mean you can't type the URL in and get a broken experience I guess so okay all right so now we need an API to call yep don't we have we have an API for that or no we don't not yet we don't so oh my goodness we're gonna have to write this thing and a lot of it is based on code that you already wrote so we're going to create a new file called actually can I do you could just add it to get links oh new function is new do we really want to do that John like I noticed CES did that before and I kind of like the different functions split out into different files so I know what they are so it's a tradeoff because you do end up duplicating some code um there's some like I don't know let's take a look at get link real quick or not like so get links has some code that you're going to reuse I am yeah so all that stuff at the top with the di where it's like injecting the cosmos client doing all that stuff like you're gonna have to rewrite that whereas if you just create a new function in here you don't have to do that also I didn't take advantage yeah once we decide we're using net 8 by the way I can clean up that code at the top quite a bit where's the client PR save links this is actually what we need we need to oh you need a logged in client okay then I guess you do want a new function yeah because you need the client principal man there's so much code I know see we need we there's some refactoring to be done I'm just looking through I got a see what I need and what I don't where are you actually looking for the client principal that's here there right there here here we go all right let's create a new HTTP function I'm going to do that with this and we'll call this um get link bundles for user like I just like the yeah explicit what is this namespace so Blazer app. API I think so I'm looking Anonymous so I would think to maybe refactor these into authenticated functions and unauthenticated functions yeah that's not a bad idea because then you've got you could share some of the stuff about the client principle and all that all right so we've got the logger blah blah blah get link bundles this is going to be a get only we're not posting here right and then um the route route is going to be user and I don't think you just want wait where's the update links save links do you want Anonymous yeah we don't care about function authorization okay this is this is function authorization which is like function level you basically you have to pass a key with the request and it's like there's just no reason for us to do that because stat apps handles all the security oh right right right okay which is great right I don't want to mess with this function level authentication and then um inside of this do we need this do we no it's like what's best practice you just get rid of that okay I've been cleaning up some of those I mean but first we want to get our Cosmos container our Cosmos client I need to I need to inject that mug yeah you do I do not like the underscore pattern but it's not about me chat it's about you you get out of here okay yeah so we are injecting now you need to create a uh after line 11 you need to create a private read only I think I could do it like oh no we can do like this or I think the way that this was implemented in your function was like this you were like like that wow okay that must have been AI M well because after line 11 you need to create the actual local field yeah all right good at I'm good at okay so here's one of the reasons I'm excited about updating to net 8 because with net 8 you can have um I forget the word for it now because it's New Year and I haven't written code for a while um you don't have to declare them like anything that's um what's the word for it chat people it's a c a new C C feature anything that's in a Constructor you can just use in the function W this in the class this is pretty close um for primary Constructors thank you ail thank you rathan primary Constructors sounds fancy and too fancy for me too fancy Constructors are so cool because there's so much especially with the di pattern and net where you have to you have something in the Constructor and then you have to set it to a local field and all that like this anything that's in the Constructor you can just use in the class it's beautiful we need to abstract this code because I'm rewriting this is already done in um in fact we could do this now this is already done here and I'm doing it again so that's why I was thinking if you just had authenticated functions class or you can create a service or I don't know and then they're all inside that same class yeah so then if we have authenticated functions and unauthenticated functions and they're all in the same file oh so here by the way I didn't set trim mode full to get trimming my goodness okay I'm gonna do that separately while you're doing your thing for now I'm gonna duplicate this but we need to come back up this is like a Todo and uh I have to use the restroom as is part for the course okay I'll switch to my screen then all right hold on uh yeah right I'm coming right back sorry I'm coming right back every week man every week okay let's give this a shot here um I need to set trim mode to full okay let's do that trim mode something weird there I'm G set that to full it's a little scary uh um and then we will add that should I I should probably actually build it so let's go here go to my client.net watch I looked into this in net 6 and I haven't looked into it since I am on net 8 yep so I'm not I haven't kept up with this like with net 8 I thought it was going to happen automatically I'm not sure what's going on uh still builds still what we were looking at y was um the file size and it actually seemed to go up when we went from net s to not at8 and and this is one area where I'm not good at where I'm improving is figuring out the file size on here supposed to be default on8 so here we went see this is 1.3 1.7 and then when Burke did it onet seven it was smaller so I'm not sure what's happening there and then here while we're at it so I also set enable time zone support to false okay yeah if you're not on net 8 okay I just Wast at everyone's time oh well I filled some time for you Burke you're back good job man all right um so yeah let's keep [Music] coding what are we doing though yeah so we're we're we're pulling we're getting the uh the username here and then so here we want a Jason serializer yeah and then we're going to deserialize the client into a client principal object which is over in our shared library and we're going to pass some options here um essentially that case and sensitive this is all your code John I'm just copying what you did and then I forget too if we're using yeah if the client print principle is not null we want to do the query um but to do the query because our usernames are hashed we need to get that hasher right Y and we need to Hash our username I'm not passing the username from the client because you've already got it so there's no point in me doing that and hasher You misspelled username by the way username us oh that was a pretty nasty transposition why didn't I make the hasher static we could why don't we yeah well oh because you have to there's a little bit of rewriting there you would need to pass in the key in the it uses di it's whole thing that's why okay that's a small thing maybe it's a good idea but I don't think it's worth refactoring for that at the moment but all right um okay and then so we need the username and we need the provider and the provider is just in plain text because that's the provider is on the identity provider so what we're doing here chat is because we store the username as a hash in order to query it we have to get it back into the hash because we can't decrypt it all we can do is match you know um we're only storing the hash version so we're not storing Burke Holland we're storing it's one way yeah all we can do is match Gog with gobleg so is here is our query to get this out we want to select trying to write it for you [Music] manity URL the description and the links from CW C do user ID equals username and and and right c. provider equals provider okay rest I don't know if we need to look up links look up links because we only use this when we're showing the list of so see how you you get CID vanity URL description which You misspelled by the way description I did yeah good call and c. links yeah I mean this is uh description we could get by without quering C links we could that is true we could say we get back a user with 4,000 link bundles and each of those has a dozen you know I don't know if it'll break or not I think yeah I think for now like that's an optim that's a to me that's a premature optimization but I your points well made it is a good point but then you know now is the time to do it maybe also from a restful point of view that's a different response than I might expect yeah it's technically sort of incorrect I mean I don't know I don't know what do the chat thing chat do we pull the links back or do we not because we don't actually for this page we don't need them we actually do need them John we do need them we do yeah because each Square shows how many links okay all right which we could we could get that from here we could just do a count we do count but then you have to change the link bundle definition and all that exactly we almost like we need a new class yeah and then um so our response is going to be equal to container get query iterator Yes except for we want to read right yeah why can't I have a response cannot be declared in the scope because that name was already used in an enclosing local scope where you look down below there's another response oh okay chill out on that um um let's remove this the formatter doesn't get confused any more confused than it already is which is very it's still yeah it's still pretty and then we check and we say okay cool if there are no link bundles make co-pilot right the code weird that's not what I was going to do I was going to do this hey oh a man that always trips me up yeah maybe that's why it didn't that's why it wrote All That code for me because it's like you didn't wait it so like what are you doing here bur I'm just he's like I'm just trying to to do I'm just working with what you gave me buddy return the responses Jason that right well then the next line hit enter but this is the default yeah I forget I ended up needing to writing the respon then return response you got to return it um yeah that's right we do you are correct okay and then we need to handle our else condition here right else there is no client principle so we want to return a 401 which is that that's correct then I I did this I think this is again I'm just like copying your what you did oh wait did I hoist give me a second John okay we're all over the place today okay air status code gifts I agree we need that right as WR bites nobody wants to do that ever right um response no what stop it what where's the response do I not have a lowercase I'm I'm just completely confused no we want to do a new we're writing I'm writing an error I'm writing an error here come on yeah you just let that yeah Focus up now all right so this is the we can't find it and then we need one more else condition which is that um no that's the only condition we need right and now we have a well hold on if CL principle is not equal to null else it is equal to null right so now we just need to catch the err why is there two if conditions if client principal is not equal to null okay so we have a condition here if if principal is not equal to null right that matches that I've got two yeah so you have you could have an unauthentic you have one if condition where if you have a client principal and there's no links for them that's well if this is if the header exists yeah and then we try to parse the client principal and actually we need to test so I mean technically test again and you return another 401 because the header isn't there yeah which is kind of weird okay or another thing you could slightly simplify it is return up above and then for all other cases return unauthorized or whatever you know what I mean inside if there is a client I see saying instead of checking all this you could just yeah but then but you still need to check to make sure this is not equal to null just in case we parse the header and it's empty so you could just say Yes uh wait if client principal is not equal so see you've got this case on line 58 where or 59 whatever where you return the thing you could just get rid of all the other else cases and then Down Below return basically nothing found there's no else cases no else cases and then down at the bottom return no links found or something something okay but we don't what happens if we come in here and the principal's null we have the header but it's null and you would say well that will never happen which means it will absolutely happen well but if that's the case this the answer still we didn't find we failed like we were not able to look up we're never going to return out of that yeah gotcha so down at the very bottom just return yeah so in the catch in the C do you have a try you have a try don't I have a try confused what's life yeah so there's the try there's the closing block here's the catch um and we don't want to do that we want to throw a response here something like um create the response and then underneath that that would work well it depends if you want to hide your yeah because we want to we want to throw the air if we can so what are we missing here is it not like they get the try and the catch we're missing we're missing a brace somewhere if yeah ail saying it is like this is something where that should be it would be nice if that was handled for us right it is a little wacky that we have to parse headers see but John it's going to hit this no because it's going to return the response up above then why is it mad about this because you have more than one you still have more than one instance of the thing but it's never gonna hit this I don't know call uh see but we still have to create the the re what we could do is Hoist that res up here to the top right and then yeah and then delete 58 we don't need this anymore yeah and then here we don't need this anymore that's probably the right way to do that I think I don't know yeah don't listen to me I don't know what I'm doing so that's that's the try what's it what's the problem what am I missing like a brace here that looks right yeah all right so we're going to try we're going to query we're going to get their links we're going to send those back otherwise otherwise they're unauthorized yeah it's going to hop out it's going to go through this otherwise it's going to return here and we'll never hit this okay seems legit is there anything we want to do finally I don't think so I think this is it I think this method is what we want yeah so now from our from our client which I don't know why I'm doing this a hard way need to call like that um all right well let's run it and watch it break all right my ear testing totally gonna work too much too much confidence because I got like 15 minutes and I got a hard stop all right carryover there's no way chat there's no way this works the first time there's an error what's the error right problems it could smell your fear get link bundles for user what uh okay but why cable y though function R oh wait oh oh oh oh oh oh nice right yes no it's still mad well are you awaiting awaiting it where await return well here it says not all code pass return of value so that's issue so try so this returns so yeah so the problem is this is not inside the try oh right I believe yeah no it's still a problem I can't I can't see enough code on the screen I gotta I gotta back up here so no this is the what's this this is the if we definitely want this on the outside of the if so this is this was right but what's the deal not all code paths return a value why well okay so we go in so if it's not if does it it should keep running I'm trying to see if there's a way in the nested ifs where it could not hit those but not get to the bottom I don't think so because it's going to return here oh you don't return from the catch I don't do I thank you compiler name edit list does not exist in the current oh yeah yeah I haven't made that method yet that's that's what we need to do that's just a navigation I bet co-pilot will do that y okay so ail's asking couldn't we just use the code in the aspet core base that does this yes kind of it's I mean it's like five lines of code it's not actually a whole lot of code it does what the parsing out of the headers it does seem like that's something that like function should do for us I mean if you go to the docs for static web apps they basically give you that code and put this right yeah yeah I agree it is like why do I have to do this why isn't this just an API call so starting the front end starting the API running here we're building running here we're working fun start Mac is not as fast as my PC you can say that on a Microsoft stream whenever you're sharing your screen it slows your computer down like oh man that is true yeah I don't know why that needs to be the case but yeah all right well we don't have any errors so that's good okay ship it and then let start the emulator we did have a thing too by the way Aaron Powell was asking if we could use the emulator without if you can use the emulator locally for like easy off without doing static web apps without like outside of a static web app I don't think so I was asking Anthony this the other day I don't think he can that's kind of a frustrating thing it would be nice if there's a way to run easy off locally for other stuff I agree man I could be wrong I need to talk to the PM over there about that yeah all right so here is we're not logged in so we don't actually see the my list but I think we can I let's just log in what does it matter um if I do Twitter what's it going to do oh yeah yeah it's an emulator I don't actually have to log in which is nice okay so now we see my lists and if we go there nothing happens I need to change the I need to make the nav changes but what do we call it my lists there's nothing at this address um it was called My Links well that's not going to work because they're not links they're lists let's change the nav problem that we have here um yeah you may need to restart or something where's our nav bar in our nav bar on click toggle menu show menu if logged in then they get to see my lists where does it go it goes to lists so exciting all it's l in go anywhere oh because this is a view thing this is oh fancy what no that's cool all right yeah and these are all the ones that we've put in the number of links for okay okay and then yeah we should have is missing hold on we can fix this we got time yeah I can't believe that actually worked um one second one second bear with me now clicking we could make them also like when you click on them it could show that link that list too right when I click on them we could finish thing does it work where it shows all your think no I don't think it does let me create a new um we need a new p a new file here uh this will help with the styling which is it doesn't look right still building hurry uping anybody got time for this was denied don't deny me local host can't rule user rights to view Local Host this was happening before just just stop it and restart so close s we never not deliver John we always deliver we're like right right at the buzzer okay log in ain't up yet just dang it man oh come on he gets in this like goofy State and then I can't SW I start it so odd yeah Janis is right so special error Pages would be cool and then also we can use error boundaries which is a nice thing in Blazer where you can say like the whole page it doesn't barf the whole page it just loads the page and just the thing that errors you show the thing okay Local Host there it is except for it's not loading my my CSS the heck not why isn't it loading my CSS there we go okay now it is now you see they're all like the same size we get this okay now when you click on one of those lists does it load that list it does not okay we just need to pass over to the edit page like the list that we want to we need to load up in the state container essentially the list that we want to work with which I don't think we have time to do now I guess not we didn't we didn't promise that we were gonna do that we just said no we did not it's so close though this is fancy it's very nice all right that's it then I think we're good for this week so we should do the pr thing and get the thing building and commit it and all that stuff let's do it and then we can move the things over in our in our uh deal this is perfect I love that reest I need to get my poll request thing on okay this P request adds the get link bundles used for API inpoint and the my list page to the project these changes allow users to retrieve their link bundles and view them in a list format man right on installing the why didn't I have to GitHub P requests and issues extension it doesn't it yeah it doesn't come preinstalled I should have had that okay we go okay so now let's go to our project and move the things over it's very satisfying y you want to move this yeah I mean we did upgrade it at n eight we have some test testing to to make sure it's trimmed I don't know we could have we need new items one that's like um investigate trimming whatever yeah investigate. net8 optimization yeah and then um we need to make it so that when you click on an item it opens the edit page so this yeah there we go okay all right that's it man all right well great success more features in the book that's what I would call it nothing now I need to find there's the ending music I always plan to make more fancy beginning and ending music and I haven't yet maybe maybe by the end of maybe by the time we go live chat if anybody in the chat makes music make it and we will play it on this stream all right well uh great success thanks everyone for watching um have a happy weekend see you guys bye all right uh thanks for watching go there [Music] and [Music] what

Channel: dotnet

Views: 3,063

Keywords: Blazor, CSharp, VSCode, Code, livedemo, beginner

Id: oYgGdF1pd6E

Length: 86min 31sec (5191 seconds)

Published: Sat Jan 06 2024