Geolocation Sorting by Distance - Live Coding with Jesse

hey everybody it's Jesse and we're going to do some geolocation stuff today so the BR there's a geolocation API for the browser where I'm sure you've seen this before a website will ask you know can we get your location or something like that and if you allow them to get your location then usually they use that to tell you either you know what's the weather near you or what events are near you or maybe give you get you directions to somewhere so in this case we want to get the location of the user and then compare it to the location of our events and then order our events from those that are closest to those that are farest away uh before I get started I just want to let you know that about 12 minutes ago the power went out here so if everything just gets cut off it's the power probably went out again so it's there are big thunderstorms happening right now so uh hopefully it won't happen again uh but if it does I'll try to get restarted and get back on as soon as I can I've never had a stream cut out in the middle so I'm not even sure if I can join the same stream again or not I'm thinking yes um cuz I I wouldn't have actually clicked the button to stop the stream it'll just say like I've lost connection so as long as I get the computer up and running and start OBS again to start streaming should be good to go uh so also I want to acknowledge the contributions that you all have made so a lot of people contribute in the live chat and are very helpful uh but then also I've had some people contribute directly uh to the repository for the site we've been working on so uh so V and uh Danny and uh Fabian or I thought about it the other day uh since you're from France it's probably not pronounced Fabian so Fabian I'm not sure let me know if you're watching um so anyway thanks so much for these uh contributions and feel free to contribute I started putting some issues in uh in the repo so I'm going to make try to remember to put the issues in here and maybe if if you've never contributed to a repository before some of these are going to be pretty easy some more in depth but you know maybe it'll get you some practice in how to contribute and uh you know certainly nobody feel obligated to contribute this is definitely the project is completely my responsibility but uh I know it's some sometimes it's intimidating to try to submit pool requests to projects so this might be a nice like small project uh to get just to get a feel for for how you do it and uh if you need any help let me know and I could try to walk you through it uh and if you submit a pool request and it's not exactly what I need no big deal I'll just let you know what needs changed and you make the changes and submit it again uh I'm I'm Lu going to be upset if you submit a bunch of pool requests uh I'm I'm happy for the assistance so anyway let's let's get started let me move this out of here because we won't need it right now so here's the steps I was just kind of thinking in the last few minutes before I start this video what we need to do we need to add let me know if this is too small I think this is the same font size we had yesterday I don't think I mess with it so if it was okay yesterday it should still be good um we need to add a map field to the nearby event custom post type so that's going to show up in WordPress so let me let me show you this here I actually already added it but I didn't add in an API key and I need to so that's why this isn't working right now so that step is partially finished once that's in place we'll we'll fill out some data in there so we have something coming in through the API and then we need to prompt the user for their location that's the part where we'll use the geolocation API which I had open somewhere but after I had to restart my computer uh from the the power outage all my windows are in different places so I'll try to find it it might actually be faster to just search for it again because I have so many windows open um after that we need to compare the user's location to the event location so this should be we're we'll have the latitude and longitude for both of these then we're going to show the events um we're going to put the closest events that are closest to the user first and then go from there to those are farthest away the last one I think is just wishful thinking and that's end the stream one time which rarely ever happens but I'm going to try uh so I was in a little bit earlier than normal this morning so I I really don't want to be here super late and I also work through my lunch break so I can definitely get out of here I could probably leave now and be fine but I want to do the stream so I'm gonna check the uh the live chat and just say hello to everybody before we get started hey everyone AAR says hello from Mars Hi Sam says I enjoy that these are becoming a more daily thing yeah it's it's intended to be a daily thing at least Monday through Friday uh but I had some there were sometimes when I was I couldn't stream because either I was sick or uh occasionally the stream time changes because I have meetings uh but basically yeah it's it should be pretty much every day if I can hey No No's back uh how's it going says uh second time on the streams uh and old ask does Jesse like to HTML CSS JS beginner kind of stuff um yes I do like to do that so if you're more like at the beginner level and you're looking at this like this is over my head we're at the end of a project so at the beginning of this project uh if you go back and watch some of the first recordings it'll be way more beginner level now we're to the end so you know we've already taken a lot of those little steps and now we have something a lot more complex so it's hard to jump in at this point although I'm still going to try to explain things as best I can so hopefully no matter what level you're at you'll still get something out of it um as soon as I'm done with this project I'll jump into another project and that'll be like starting all over again so I always try to do something new or something better or try a new tool or something so each project will be a little bit different but it's end up it's going to be like a cycle of you know going back to the basics of setting up a site and then building on that so if it's if it's a little bit over your head right now don't worry you know give it a week or so I'll be done with this site and then you know we'll be right back to some basic stuff I am also going to put some videos on my personal channel that are going to be more like really basic level tutorial videos and uh I have I have some outlines and some notes ready for those it's just a matter of finding a little bit of time where it's quiet enough uh at my house or some time at at work to just do those videos okay all right great Rohan says font size is good uh and also ask Google Maps API yeah so I'm going to be using the Google Maps API at the very least within WordPress here to pull up a Google map and basically what I want so you can see this right now the uh content editor comes in here fills out the title of the event the date and then the display date which uh if you if you're not sure why I have two different dates here uh check out yesterday's episode and I I explained why I needed uh the date in two different formats here um you know and they fill out this basic info but now in addition to the location and this is how it will actually display I also want them to put the location in here if they search and type in the location here then it it should on the API end it'll come out with with some data uh probably multiple Fields but one of those fields will contain the latitude and longitude and that's what I need so that's that's where I'm going to use the Google Maps API here and then we'll see for this step compare the user location to event location I may need to use some sort of API so I don't I don't really know what the best API is I I did a little bit of research beforehand so if you all have experience with this let me know what you think I'm also thinking a really kind of fast way to do this potentially could be to just do some comparisons with just the raw latitude and longitude uh potentially it might be possible to just do some basic math comparing the latitude longitude of the event to the user location and then be able to give a rough kind of estimate of distance uh from the user so this you know these aren't going to be pinpoint locations they're just going to be the general location of a city so it doesn't need to be like super exact so if you have any ideas for that as well let me know we you know we we'll get into that more when we get to this step though and then see what the best way uh to do this would be if you're just joining for the first time I will say these aren't tutorials this is me just doing my daily work so that's why I'm saying things like I don't really know what we're going to do let's try it uh because that's that's my work I know I want to do this this part of the website is arguably going to be the most useful part of the site to our users and I think this feature in particular will be the most useful feature of this part of the site this nearby events part so um so I know I want it I know how I want it to work and I just need to figure out how to make it work with with all of you helping all right let's see just had a bunch of stuff in the live chat so I just want to check it out very quickly and this will give you uh a few minutes too to um think about these these steps and these questions um philli says I'm a self-taught coach and I just recently stumbled on your site best self-learning resource ever wow that's I'm glad you think that awesome uh and thanks thanks for saying that uh I love uh comments like that it uh keeps me going and keeps me thinking that this is a worthwhile thing to do so I really appreciate that um WIS M23 says hi I am new here hey welcome uh welcome to the channel ask any questions if if you're confused about what's going on the people in the live chat are super helpful and knowledgeable and I also try to get to all the questions as well sometimes I don't get to them till the end of the stream uh if you can't stick around to the end end of the stream just direct message me on Twitter or something and and I can answer your question uh later on so but uh welcome um SM says how would you recommend learning react the free code Camp course doesn't have much on it yet yeah that's true it doesn't have much on it yet um I would say like tutorial videos are nice the react documentation itself like the basic react website has a pretty good kind of walkth through for react and I think I think code academy um has a react course now for free I like vaguely remember taking that course a while back when it first came out so that's those are my that's my best advice and check out some of the earlier videos when we just started this project it'll maybe get you a good idea of how to like get started and then you can mess around with it and that's kind of the best way really is you know use something to jump start a project and then so you can actually start changing things and see what happens so uh and I'm I'm sure some of you all that are watching probably have some great resources too so uh you know please put that in the live chat as well or in the comments this video um kak ask this is react native right no it's just regular react uh not react native yet I'd love to do something with react native uh at some point if I can I don't have any projects coming up at my job that will need react native anytime soon so it might have to be a side project uh yeah coac says uh so what's the scope of this project R react on WordPress yeah basically WordPress is the content management and it exists on a separate server and then we use the WordPress API to pull in all the content into a react site that has server side rendering and it runs on a totally different server uh running node and uh and react uh we actually engine X running as well yeah Rohan uh is is asking we doing browser location or IP based we're going to do the browser location Sam says uh Google Maps has a shortest path map so yeah maybe that might be the best thing best thing to do all right I think that's it for I really at the beginning I I want to see if there's anybody new that has any questions to kind of get them in I don't want them to to leave and you know think they're being ignored and leave so um so I'm going to get check out so kak asks why use a separate react site for pulling content from WordPress if you can stick around to the towards the end I will answer that in in depth uh for now I'm sure a few of the people in the live chat that have heard me say this a couple of times can um can fill you in so if somebody wants to take that on and and fill him in really quick I'll get started um but I'll definitely answer you at the end give a more full explanation uh and then if if you get a chance to watch some of the past videos I do explain it kind of as I'm going uh what I'm doing uh but um let's let's get started so first things first let's get this thing working so we need to get an API key for Google Google Maps so let me look up I like I said the power went out and now my windows are in the wrong places so I had a lot of this documentation ready and now I don't know where it is Maybe maybe I did just close it out but so let's try this um let's see ACF map field there we go all right so I'm just going to I'm using the plugin Advanced custom fields and that just helps me make these custom Fields a lot faster than I would be able to if I was doing it in like a custom plugin with PHP just because I'm not great with PHP so if you're not awesome at PHP I recommend using something like this so let's see here we go so API key all right it looks like I will have to edit some PHP so oh well I guess so I guess I can't get around it here so unexpectedly we'll be doing a little PHP today little WordPress PHP uh this doesn't look too difficult I'm saying put this in the functions.php file I kind of don't want to put it in functions.php we do already have our custom plugin I'd hate to throw it in with that but it somewhat fits in there because that plugin is creating custom post types and this is just enabling a field for one of those custom post types that we're already creating so it may make sense to put that in there I just always hate to edit functions.php directly um especially since we're not really using any of the functions for the themes right now uh since we're just using the API so yeah we'll try to put this in our plugin uh that we we edited I don't maybe sometime last week we were editing that so anyway let's get the API key first and get a key I I kind of think that I already have gotten the key before new project uh CI create inable API all right awesome all right so yeah definitely you can all see this API key right now so uh don't go crazy with it um and this is probably a great idea to restrict its usage so let's do that as well since I'm putting it on YouTube and we want it to only come [Music] from uh let me think this will probably be coming from the WordPress install so so will be get start [Music] and I'm not exactly sure where the rest of that will be so I'm going to save that hopefully I did that right and it will work if we try to use this API key and it doesn't work then might maybe I'll come back here and take out that restriction because it's possible I mess that up and that will mess up us trying to use the uh the API so now let's go back and see we need to put this in here uh I have let's throw that API key in right here so I don't lose it in case I accidentally copy something else and let me grab so I still if if you remember the last time we were editing this plugin this PHP plugin I um I never I didn't get uh FTP working so it was supposed to be set up so that I could use SSH or FTP to get into that server uh I didn't set up the server but um I'm not sure exactly what happened but I couldn't get in so I ended up just just doing this which oops I'm going to have to make this bigger um so I'll end up going to the plugins and where's mine at going to edit and just copy and pasting this which I know this is this like makes me sad to do this but at this point especially since we're streaming this will be way faster than trying to figure out why I can't get into the server uh a more sensible way so I'm just going to put this over here and I'm going to grab this and put this let's see I want to make sure I put it it looks like I can just put it at the very bottom but still inside this PHP yeah so this function I just want to make sure I'm not putting it inside of another function and messing things up um okay this should work also another reason why this makes me really sad to do it like this is this is a live site right now and if I mess this up the site will go down temporarily there is some caching involved so there's a decent chance that if it's only down for a few seconds no one will notice where' I put that API key oh right here all right and after I do this and see if it works I'm going to check check back in with the uh live chat as well so if you're feeling ignored you won't be ignored for long uh that looks like the only thing I had to I had to change so I'm going to as much as much as it hurts me to do this I'm going to copy and paste back in all right so we have this down here let's update the file I'm a little apprehensive because if you've ever worked with WordPress and if you know if you make an error in one of these occasionally what will happen is you'll get this white screen with some text on it I think it's a white screen or grayish maybe and you're locked out and the only way to get back in is you actually have to get to the files so since I can't do that I really hope that um the person who set up the server is still here at work so that I can run in real quick and have him do it so let's give it a shot just I I am saying like you should probably never do it like this this is not the right way to do it all right awesome so it worked it worked also keep your WordPress up to date I don't have it up I'm like one version behind right now and uh I don't want to update until I back up my uh my database so I didn't have time to do that yet so I'm going to back up the database and then I'm to update it might be cool for me to back up the database like on a video just to show you how to manually back it up I won't do it live probably but maybe if I do that like at some point soon maybe I'll record it I don't know let me know if you're interested in anything like that okay so we need to go back to events and in this one let's go back in here and see yes all right so that's definitely better than the big error page and let's see where is this at Marietta hey that's not that far from where I'm at Marietta Ohio awesome okay so maretta Ohio and let's update that I'm actually really interested to see what comes out in the API from this because I haven't seen it yet so I'm going to bring in this I was actually I was trying to get something to work and uh I'm just briefly I'm just going to tell you in case you have any ideas because I couldn't get it to work so I have this plugin called mult it's multiple post types for the WordPress API so you're supposed to be able to just let me see if I can zoom this in there we go so you're supposed to be able to just type in multiple post type and then you can access different post types like this which it does it works like this so I can actually get all my pages and all my posts just like this but if I want to use some parameters here to maybe filter this I can't get it to work basically it'll filter everything the same way I can't get it to filter just one so like let's say if I want one particular page and I search for it by the slug for that page I won't get any posts because it'll actually be searching for posts with that same Slug and it didn't matter where I put that filter uh in here or what order I did it I still got the same result so I'm wondering if this plugin in fact just can't do that maybe it wasn't designed to do that if that's the case then I'm in a bit of trouble because I was relying on this uh to be able to load multiple different post Types on one page which I'm going to need to do so let me know if you have any ideas with that another alternative that that I didn't want to do cuz it would result in multiple API calls but if it's the only way to do it uh then I'm fine with it would be to figure out here in basically in get initial props I'd like to be able to make multiple API calls in here so I if you I've tried to make multiple API calls in here it's only ever resulted an error for me but I there's got to be some way to do it right I mean if we can make one API call then we can make two right and I'm just missing uh somehow how how to do this so so think about that if you have a minute and if you have any thoughts let me know I'm going to give it a shot obviously and try to work through it but um if you all have any input that may help me to work through it a lot faster and I would appreciate that all right so let's go back here to what we were going to do and I want to see what kind of data I'm getting here so what was this nearby nearby event and I've already searched that at some point so there we go that's the one I wanted so let's go down here to if you've never seen this before this is uh this is Json so this is what Json formatted data looks like and this in par normally you'll see this actually but I have a uh Chrome plugin that makes it look like this much easier to read uh but the WordPress API formats everything like this and what I want to do normally I I edit I don't get all this extra stuff that I don't need but I'm looking okay so the field that I want would be location uncore map and really what I'm most interested in is this latitude and longitude awesome so we have that there we know how to get it so let's go back to our steps to see where we're at so uh add map field good that's done so we we completed this first one and so let me all right that'll be completed trying to think I was trying to think of like what could I what symbol could I use that would indicate completed and I couldn't really find anything uh so I know there's some way to do like a check mark or something but it's not really a check mark but I think it's like a math symbol but anyway uh uh now let's let's go to this this part so since I I kind of lost the documentation that I was trying to use let's look it up again and geolocation API let me make this bigger so you all can see and yep that's what I was looking for so using geolocation oh and I said I was going to check the live chat and I forgot so let me check it again got a lot of activity going on here I'm going to scroll through real quick okay so I'm I'm right now I'm just kind of scrolling through for any questions that are really relevant right now so if I skip your comment I I've seen it and I'm going to come back to it towards the end of the stream so I'm not uh I'm seeing them and I I do definitely intend to get to them um okay Rohan says this is uh pretty relevant uh changing the API key and using an environment variable to store it after the video might be a good idea so yeah actually maybe I I should change the API key I don't think I'll need to use an environment variable because it's not actually going to go in any of the code if you remember we um well we put it in the WordPress plugin that is not actually in the the GitHub repo or anything like that that plug-in only exists um on that WordPress server and and is is not really uh publicly accessible as far as I know so let me know if I'm wrong about that but it it should be just enough to change the API key uh if I'm not mistaken but that I mean that's that's good advice I don't know maybe somebody try to use that same API key I'll put it up on the screen somebody try to use my API key uh and see if it works for you I don't mean to order anybody around just if you feel like it please try to use my API key uh I feel like I'm being a little bit bossy today I don't know I got very little sleep last night my kids were awake several of my children were awake multiple times last night and then I had meetings all morning so it's just kind of feeling a little a little little weird tired okay Amelia says uh I was kind of lost but I'm seeing that nearby is already a plugin for WordPress right uh amelo yeah I made this uh plugin so here you can see the plugin it's hard to tell because it's I haven't saved it as a PHP file locally so it's it doesn't have the syntax highlighting but basically you you can kind of see here like I'm registering a post type this is the resource post type so I'm I'm registering this post type here and giving it all the how I want the names to display saying I wanted to show up in the rest API uh and then I'm doing that for a bunch of them so all these different post types and then somewhere at the bottom here I actually yeah I create create new type so uh so yeah so I just made this plugin just to add all these post types and down here I have just some of the code for custom taxonomies it's all commented out right now cuz I don't have any taxonomies yet I may not need them so hopefully that clears things up for you whoa Rohan says you can force syntax highlighting by changing it at the bottom right corner let me check out the bottom right corner I actually never mess with any of this stuff in the bottom right corner what Rohan you you are U my favorite person of the day unless somebody else unless somebody else comes up with something amazing Rohan definitely wins uh favorite person award for today that is awesome you don't know how many times I've um I've had a file I didn't really want to save it locally I just needed to edit it really quick and and I have actually saved it with a file extension at the end just to get the syntax highlighting and so my my file structure on my computer is filled with just these files that I'll never use again and usually multiple versions of these files so that's awesome if that's like really obvious uh I mean then then I'm a Noob and I'm fine with that uh I'm really excited about that all right awesome so does that mean I could do it with this too and make this Mark down if I wanted to and could I then use sorry uh markdown preview will this work oh no did it open a third pane oh awesome so that does work that's so cool this also is a problem too off like I just I don't want to actually save this file I don't need to but I did want it to actually show up and be able to use markdown and now I can although I I definitely don't want it to be in this third pain here I want this to go away and I don't need this anymore so I want this to go away well let me just move it over because if I am going to change that API key sometime soon I'll just leave this should I leave it no I don't really need it it won't be hard for me to just put the API key directly into the WordPress editor even though it's like there's no syntax highlighting it's kind of hard to deal with but all right great let me get back to that's so cool um let's let's get back to the project uh Sam says too bad you guys aren't using them yeah we've talked about Vim before on this stream and uh basically my opinion on Vim is I'm super jealous of everyone that knows how to use him and when I see somebody use it it's like I don't know it's like a when when you're a little kid and you see like the older kids and they look really cool that's like my view on people that use them so uh it just looks really cool when they're using it and uh I want to be like that one day when I grow up I want to use them all right so let's get to geolocation apis publisher Navigator geolocation object I'm I'm sure this is just like riveting to watch me go through documentation so sorry about that but I do want this to be an accurate representation of my daily work and a lot of my daily work is spent going through documentation oh okay let's just grab this really quick and see what we can do with it um actually let me just throw this in here because I want to change this to a console log and yeah that looks good let's log that and let's throw this in here um where we at honestly I I guess I can just inspect any site it doesn't really matter I just want the um the JavaScript console open this should work I'm just gonna throw this in the console yep allow yeah why not you can know where I am what let's try it again there we go yeah I had to oh it just took a minute okay cool so there we go now you all know where uh my location is which was it's not really a secret so evidently this is I mean obviously this is probably not my exact location because it's going through like my my ISP so I'm not really even sure where that would be uh but that's what we want so here's the thing I don't think I want a user to be prompted with this right away and uh I'll show you why if you've seen the site that page on the site before you probably already know why uh it's pretty obvious but for everyone that's new or hasn't hasn't seen this page before um I guess I don't even have this page open anymore uh you know what I wonder if my uh my Dev server was um shut off whenever the power went out so it should be I restarted it so it should be working now and if you want to check it out it's at katak x.com um if you can't spell that which I have to think to spell that and I've typed it a million times there's a link in the description all right so we're going to the events page so it actually be cats.com events okay so here's the events page right so if I were to just automatically ask for the users's location they'd get here and it would pop up and ask them and they would think assuming that this is the first time they've been to this page they'll think why do you need to know where I'm at right that's what I would think hey Quincy uh so uh Quincy Larson just joined the live chat if you don't know who that is that's the founder of free code Camp so um that's this is really cool that he's in the live chat uh thanks thanks for joining the live chat and um I'm geeking out a little bit that you're in the live chat because I remember watching Quincy do a live chat oh I don't know like two years ago or something I can't remember but kind of early on in free code Camp he was doing like a live um a live stream and I actually remember I was like on my exercise bike working out and um so uh I remember exactly what I was doing when I was watching that I don't know it might have been one of the New Year's streams something like that oh cool so I apologize for all the the geeking out I'm doing right here but I am going to read this because it's awesome Quincy says Hey Jesse longtime fan of your work I've never gotten to watch you live before I really really appreciate that I I mean I like I really look up to your work Quincy and everything you've done with free code camp and it's definitely helped me in my career I mean not just just my career but my family and being able to provide for them so uh so I'm going to stop now and get back to my stream but I just want to let you know I really really appreciate it and I appreciate the opportunity to stream for free code Camp uh it's really been amazing for me and uh we kind of got a nice Community built around here so I think it's helping people um so thank you for that opportunity all right so to get back to what we were talking about and I know it looks like there's a lot of activity going on the live chat so I will get to that in a minute but I definitely do want to get this a little bit more done before I really kind of dig into the questions in the live chat so like I said you go to this page right if the user gets prompted here at this page for their location say you know allow allow us to know your location they're going to have no idea why we want to know their location because the link only it's just said events okay so they're going to have to scroll all the way down to here before they might have any idea of why we would want their location so I don't want it to just go off right off the bat so I'm thinking there's there's maybe two options actually three here's the three options I'm thinking about and you all let me know what you think uh is the best so first idea is I just have it set so that when you scroll to this point then uh this fires what so this basically fires obviously I'm not going to console log but uh this is going to fire and give us the latitude and longitude which is what we need so that also I think might be a little bit jarring uh to the user because potentially you know maybe they they're going to see that before they see this so I'm not that's probably the lowest on my list second option would be when they click location for for sorting and I am going to probably put some sort of Icon next to each uh header that's that's sortable when they click here then it would pop up and ask I'm hesitant to do it like that though because I would like users to be able to click here and sort this alphabetically the third option is I put a button somewhere around here that says something like show nearest Events first or something uh I know uh Andrew uh who's in the live chat I don't think I saw Andrew in here yet today maybe he couldn't join us today but Andrew sent a link to some nice um basically form design let me let me share this with you if you weren't in yesterday I didn't get a chance to see this uh I know the link Link at first the link as it was pasted in the chat didn't work so maybe you didn't get a chance to see this but uh this was kind of cool just showed a lot of different way to do tables but what I noticed in here that I wanted to kind of look at more and maybe try to implement was the way they did it's down towards the bottom okay so here so they have this where maybe I could do something like this at the top of the events table here oops and you know something like that up here probably underneath this this um H H tag but right about there maybe I could do something there that would work and it would look nice I kind of I like how that works I still want to keep with a material design feel since that's what we're going for with this site so uh you know right off the bat I mean the button can be anything it doesn't have to look good but then at some point you know we're going to we're going to have to style it so I'll leave off The Styling for later uh maybe maybe I'll do that you know when I'm not streaming uh depending on how long this takes but I do want to have a button I think so that the user's not like abruptly faced with this decision to allow me to do something uh in this case know where they're at uh so let me know what you think about that or if you have any thoughts on in terms of the UI where I should put that for now just to get this working I don't think there's any problem with me just saying this is going to pop up immediately right just for testing that's fine and uh while while I was showing you that my um command line my terminal was visible which it was covered up before and I just noticed that I am on the master branch and I don't want to make changes on the master Branch for this because this is uh pretty pretty big feature you know this is not a huge site so this feature is is pretty big uh in terms of the scope of the site so I definitely want to do it on another Branch if you're not familiar with with using the terminal or using G get let you make these like alternate versions of the project I like to think of it as like parallel universes so if you've ever seen any movies or had comic books or something that has that concept it's like there are these little parallel universes called get branches where it's your project but it's it's different and you can do whatever you want in there and then if you mess it up or you need to go back you can just switch back to your master Branch so that's what I'm going to do now I'm just going to create a branch and I'll I'll show you so I'm going to type in get get branch uh let me make this a bit bigger in case you can't see especially I'm thinking maybe if someone's on a phone it might be pretty hard to see this so just a little bigger hopefully that's enough uh so I already have all these branches and you see most of them are basically they correspond to some kind of major feature uh that I wanted to put in that I knew would would take me a while and I'd have to go back to masonry and make some or master and make some little changes along the way so let's call this one uh let's call it geolocation so we're going to go get Branch Geo geolocation right I was just double checking to make sure I spelled that right and now when I sayp get Branch uh I did that I I know probably a lot of you know this in this is basic but in case somebody's not familiar with the command line to get to do this basically where I'm going through this really quickly um I just type I I hit the up uh key the up Arrow key on my keyboard and I can go back through like my history of commands so very useful so now I have get branch and check it out geolocation is there now if I want to navigate to that parallel universe that version of my uh my site I just go get checkout and there there are shortcuts for all of these commands I usually just use the long ones because I haven't really bothered to memorize the shortcuts but uh just know you usually don't have to type this much to your commands uh goo and also a good tip I can just type in Geo and then hit Tab and it'll autocomplete because there's nothing else that starts with Gio I probably I could have just typed G and it would autocomplete so that can also save you a lot of time when you're typing on the command line and there we go now I'm on the branch geolocation I could do whatever I want on this branch and it's not going to affect any of these other branches but when I'm ready and this feature is is ready to go and I want it to go live I can merge it into the master branch and now that feature will be in master and it'll it'll get along nicely with everything else I've done in master and and I can push it live uh and everything will work so that's kind of the beauty of get uh among other things that's what's really cool about it okay so I didn't really intend to do uh like a get or terminal tutorial but seemed like a good time to talk about it so now that I'm on uh a separate Branch now I feel confident that I can start changing things up and I can start changing things with Reckless abandon confident that my project is safe so let's grab this piece of code I don't need this anymore and we want to be on the events page so let's go to events.jpg [Music] [Music] here and we I we'll just console log this for now just so we make sure it's working uh and then in let's try putting a component did Mount the only thing I'm worried about is I don't think this will fire on the server side I should I should remember this by now because I've dealt with this for months now uh let me know what you think I'll check the live chat in a minute uh after the you guys hear this from the delay um I'm worried because I'm not sure that Navigator is actually available on the server so it may throw an error but let's just let's see if it does get location and I'm going to save that and we will find out I guess quickly oops get location is what do you mean it's not defined maybe it's just what's up with this there we go no did I spell it wrong all right I'm going to check the live chat because it should have been the delay should have been over by now also I want to check in as I haven't really looked at it for a few minutes so I'm just going to scroll up a bit just to um see if if anybody's confused or if you have some really good advice for me or anything oh Sam says practical Vim is a book that changes lives all right thanks for that practical Vim I'll have to remember that one I am serious I would like to learn Vi at some point I don't know if it'll happen in the near future but i' I'd love to do it okay good so Sebastian tested the API key for Google Google Maps and it said refer not allowed map error awesome so it seems like my API key is safe for the time being uh I'm guessing though as always there's probably some way to like spoof the URL and get it anyway so somebody who wasn't very nice and sees my API key probably could do that so I should probably change it anyway uh but probably not a huge deal right now but I'll get it changed here within the next day or so oh okay I just saw um when Quincy first came in he said he uh noticed the stream was going on and tweeted about it awesome thank you um all right I'm almost through down to uh the bottom here with the live uh chat there's there is some discussion in the live chat about the beta curriculum for free code Camp so if you don't haven't heard about that check that out there's um even if you've been through the old curriculum there's a new one that's uh that's coming out I don't know when but if you'd like to help out with it uh check it out do some go through it do testing and contribute and um I know like everybody's uh is waiting and anticipating that new curriculum so uh it would be awesome if you could help out with that last night I actually uh started I started back in to pick up where I left off a long time ago with free code camps um with their lessons because I got really busy and just stopped progressing uh so I picked back up and I made which one did I do the weather I think I started redoing the weather one I had I had gotten it pretty much to where it worked before and then I got really like worried I wanted to make it really good instead of just getting it done so I just scrap that whole one and I'm going to redo it okay philli says nearby events button near the top of the event list yeah I think that's what it's going to happen that's what I'm going to go with oh cool Quincy said uh I'm honored to have played a part in your own coding Journey Bo and I are thrilled that you've been streaming so much a awesome I'm I'm glad I I wondered if uh if you all were happy that I was streaming so much or not so I didn't want to take advantage of the opportunity to stream on the channel so uh but I'm I'm glad if you're all right with that I'm going to keep keep streaming you know I think streaming Monday through Friday is I I I'm going to keep it up as for as long as it's helpful and as long as my boss lets me do it uh so oh and I mentioned Bo if you don't know Bo does all the like JavaScript tutorial videos on free code camps YouTube channel and they're awesome so check them out uh if you can if you get a chance okay Rohan says the Sorting menu and by location um should trigger permission request and probably have subtext of location permission required okay I haven't thought of that but that might be a good idea I guess I can't show you the page right now because I'm getting this error which I just left it at the error for now um partly because I figured if it was some silly mistake that I made somebody would would just see it and let me know you all usually catch my mistakes before I do get I feel like I'm in a mood today to make silly mistakes just because of uh of lack of sleep so I'm getting down towards the bottom we'll see maybe somebody somebody caught it oh we got some talk about web assembly uh I'm not going to go through that right now in the live chat but I'm super interested in web assembly I haven't had time to check it out too much okay so Rohan did confirm Navigator is not available in the uh in node environment so that's what we thought uh you have to use a client side okay Quincy said the curriculum the beta curriculum that I was just mentioning a few minutes ago will come out uh ASAP so as soon as possible um oh and Quincy's going to try to stream uh working through it once more of it is stable that's awesome and it says we're also building a jsbin like interface so you can build projects there that's really cool uh Bob asks it's actually Bob 2010 asks kind of random question but how does free code can't make money there's lots of ongoing development reliable servers at set with very little ads is it a charity I'm assuming that Quincy answered this so let me read down and he did Quincy said we are a donor supported nonprofit you can donate here uh freecodecamp.com donate so I encourage you to do that uh if you can not everybody's in a position to donate which I totally understand i' I've been there uh but if you're at a point in your career in your life where you have a little bit to spare uh please you know spare some for free code camp and uh I like I I definitely don't get paid for any of this so it's going to be going to help run you know keep up those servers and things like that it's not going you know in any anyone's pocket um oh Amelia said you are truly an inspiration with this streams man I really appreciate that thank you uh thank you for saying that oh okay here's a good tip so Q I know I've I've seen your name before and I know you told me how to pronounce it and I can't remember so it's q n o x I'm not even going to try it this time because I know I'm going to mess it up I'm really sorry that I forgot how to pronounce it uh but good tip um if you do controlr it's a good way to search past types commands as well and it's useful for Less typing that's really cool I did not know that you all are always giving me really awesome tips so control [Music] R oh nice really cool I don't know if you could see that but it turned into into this awesome really cool I'm assuming controller will get me out of it hopefully no let's see what will get me out of this q no uh control c yeah control C when in doubt control C and that will get you out all right Rohan ask to zoom into the air oh yeah sorry I I'm really sorry everybody I um I showed you this really tiny error message and I'm sure no one could actually see it so uh really sorry about that so looks like page of events well there's no way I have that many lines in that file so I'll leave this up for a couple more seconds and then I'm going to check the uh the file as well and I've gotten to the bottom of the live chat so it's back back to this now oh Jennifer says live streaming is terrific keep it up please awesome I'm I'm glad that uh that you you like it I intend to keep it up for as long as it is useful to you all I will definitely keep this up there we go uh Nico says what is the editor uh I'd love to go back at some point and see like what our streak is of um how many times uh people want to know about the editor which ni I'm not I'm not making fun of that question or anything because it's probably one of the first times you watched I have no problem with people asking all the time about the editor um but uh I find everybody's really interested in it uh so I was the same way when I watch videos of people doing stuff I always wonder what their tools are so um Don't Mind questions about it but it is Adam so uh it was answered in the live chat um but in case you're watching later on can't see the live chat the editor is Adam I have a link uh so you can learn more about it in the description all right so this has probably been up long enough for you all to check it out I'm going to move this over and see what's going on now I I don't really expect that to be much use because obviously that's telling me that I have an error on line 1,67 obviously I don't have a line 1067 so here's the problem I think it's needs to be this git location and I may have to use an arrow function here so let's do this yep there it was awesome that works so it's crazy that that having to use this happens like nearly every time I stream I have some error because I forgot to use this and I still don't remember it right off the bat but at least this time I remembered uh without without having to wait for somebody in the live chat to tell me so I think I'm getting better oh uh okay so C Kno so the I couldn't remember how to pronounce it qox okay I remember you saying like for I remember you saying that now but I don't mind you say it however you want no I want to say it the right way so I'll I'll try to remember it'll be easier to remember now that this is twice that I asked so uh third time's a charm hopefully I'll remember remember next time but uh this is interesting Quincy says we hope to bring back the live stream Summits as soon as we ship beta uh we're all in heads down mode right now trying to uh QA it and ship it so that's that's really awesome news there's going to be some really exciting stuff happening with free code Camp uh soon Alexander says put the editor in the title also and people less people will ask now I I really don't mind when people ask because then often the next thing that happens is there's a discussion in the live chat about which editor do you want to use which I think is cool because people get to learn more about other people's editors Cu uh sometimes people just use the editor that they're comfortable with and not really make the switch that's that's usually what I do is it's just so much easier to stay still right then than to move and try to get you know use something new but if I see everybody talking about it in the live chat I'm way more likely to have motivation to try it okay so check that out so that worked actually I want to let me clear this out because we did there was an error at first okay we didn't get the error again all right so um I thought maybe that had been left over from previously so I just wanted to verify that um and since I had already given permission here it didn't ask me for permission again you see the console log automatically came up here uh for my latitude longitude okay so we're good next step and how long is this been going on okay so we're already at an hour and 10 minutes for this stream so uh the last step here so this this step is this step is done for it's not going to happen uh but we got step one and step two are done now let's do the comparison so here's the thing I know I asked this at the beginning of the Stream So if you weren't around at the beginning I'll repeat it I I have this idea and I'm not sure if this will work that instead of making some call out to another API to have them compare locations what if I can just do some sort of math to compare these numbers and figure out which set of numbers has the least difference between them so basically it would be something like like okay so we have latitude and longitude I guess that's the order I can't remember what order I I wanted to get them in I guess that's important to know so let me double check that since we're going to be doing some math on it uh okay latitude first and then longitude so like for instance we can take my latitude minus the latitude of the event and get that and then do the same thing here and get whatever that is and then add these two numbers together and then we can use that number to order everything does that even make sense to me it makes some sense I will have to make sure we have some negative stuff going on here so I'll have to just be careful and watch out that I'm not uh maybe I I was thinking I could take the absolute value of this but that's I I don't think that's a legit solution because we need the absolute value right because that's that would or we need the negative in there to show like um it would make a big difference so we need that in there uh so anyway that's my idea and it would save us a lot of extra API calls because remember you know we have a lot of events down here and we need to actually compare whoa let me make that smaller you know we need to compare to each one of these events that's showing up here so right now it's not a huge list but it's going to get bigger so if this works this will definitely be preferable because doing some simple math is a lot faster than making you know 100 API calls also I don't know if if there is an API if it will let me make that many calls all the time so I'm going to check the live chat and see what what your opinion is uh Q Knox he had me in the in the live chat or actually he or she I'm not really sure so sorry sorry for assuming there but qo says um you forgot to use this so somebody did in the live chat catch me on that so so um ran says he says I'm getting faster so yeah I'm getting faster with that uh oh okay Patrick is linking to a stack Overflow uh page so I'm assuming that this is in response to to how to do the math on on these why do I have this open twice anyway I guess I can get rid of at least one of those says Patrick also says it may be overkill for this but you need uh great circle distances okay uh M Madu I I think that's how you pronounce it sorry if it's wrong says like your scroll at the bottom what did you use um just kind of really quickly you mean this scroll like this horizontal scroll uh this is just this is act this part is all CSS if you check out the materialize I think it's materialized css.com it's a fra JavaScript framework or I'm sorry like a CSS framework there's JavaScript included too it's um comparable to bootstrap if you're familiar with that and they have this responsive table class so I modified it slightly so that it would uh I had some formatting issues so I had to modify that and then I wanted it to work on all screen sizes but it's basically pretty much exactly how how it was for there so that's how I did that and then these just take um check out the GitHub repo I have a function called H scroller I think so check out that function in the app.js file and if you have questions about it let me know you can message me on Twitter and I can explain it but if you check that out it's really simple I'm just um incrementing the scroll position the horizontal scroll position and then decrementing it uh or decrement how do you say that decrement or decrement anyway hey Andrew is here how's it going Andrew glad you can make it all right we have some other ideas here about how to do this math oh Patrick said I actually bombed an interview on this exact question that you are implementing all right well now's the time to make up for let's get it done uh Rohan says we could probably calculate the uh Delta SL difference between difference and sort by sort by that between oh between locations okay all right so let's just try some let's try some of this math out so we can just take these values here I guess first of all let me where we at I need to find my WordPress because I'd like to have more than one uh example here so let me just throw in a map location for let's do three so two more events and then that'll give us uh a couple of couple of pieces of data with latitude and longitude to work with so where is this at St Moville that's where I'm at okay so that this actually this might be a nice case to see to see if anything weird happens in our math if the latitude and longitude match up I doubt they'll match up exactly but um cool all right so there's a second one and let's see I want this one to be in a different place so all right Austin Texas that's definitely a different place that works oh um I meant to mention this at some point in the Stream So I guess I'll just mention it now while I'm updating this uh I just started I don't know if you're all familiar with the free code camp like groups I can't remember what they they call them officially but basically all around the world there are people that get together and uh they code together and they help each other uh learn how to code so you can start them if there you can find out about them uh check out the free code Camp uh website there's a page on there where you can look up they use geolocation to look up a group near you uh and if there's not a group near you you can make one so that was my case there is no Stevenville free code camp at least there wasn't until last night and I created one so I don't think anybody watching here is anywhere close to Stubenville Ohio uh that's that's near Pittsburgh so you might be more familiar with where Pittsburgh is uh but if you are in the area or ever happen to be close to here let me know and then maybe you could come to one of our meetups uh they're actually they're building a new coffee shop really close to where I work so when that opens that that's probably where we're going to meet and uh it's supposed to be have really nice coffee and great Bagels so uh any of you are welcome to attend uh if you're ever in the area all right I don't need this anymore just going to clean this up I don't need yeah I don't need this and I probably don't need that so let's just move this over here and let's refresh this so that we can make sure and just verify that we have the data okay that's first one we had it already we have it here and we have data here great all right so we have three events to test this out on and I think we can test the theory without even writing any code uh because basically I we can just do this math not by hand I'm obviously going to use a calculator uh but I don't even need that I could probably just round this out it doesn't need to be exact but just as a proof of concept before we actually start to code this because if it doesn't work when we try to do this math there's no sense in and wasting time trying to code it uh if logically it's just not going to work uh so let me actually this is this sounds like a job for Google Sheets so let me bring over a Google sheet uh spreadsheet would be helpful here all right so I'm going to bring over Google sheet and I'm just going to throw some of this data in here very quickly all right so actually let me go L and long is that how you abbreviate longitude no LG they're abbreviating it okay um I remember in school when we learned about latitude and longitude I always thought about to remember which one's which I always thought like lat is fat and like the Earth looked like it was kind of fat around the middle and so I remembered that Latitude was like around around the equator and might be a silly way to remember it but it worked for me when I was in uh when I was in grade school all right so there's one location and let me quickly grab the other two and once they're in there then we can just make a formula and that way we don't have to do the math separately for every single one of these and since I know I I know which ones are closer so basically it should result the result should be that Stubenville obviously is the closest because that's where I'm at and then the next one would be Marietta Ohio and then the farthest one away is Austin Texas so we know what we it should be and let me grab let me grab mine and I'll just throw that in here for now all right actually I kind of want these to go shoot that's not what I want anyway I just throw in another row I wanted a little bit more space between here so basically we're going to take um uh right here yeah we'll just put it right here so I'm going to go equals oh this is really small I'm sorry everyone I should have made this a lot bigger so you could see it okay I'm going to glance quickly at the live chat just to see if I'm missing something something like really obvious that somebody's trying to tell me okay nothing there so here's what we're going to do we're going to take I guess it doesn't it might not really matter which one I take first uh let's go with we'll take E4 oops and we want E4 minus a and then we want to add that to the longitude which would be F4 minus there we go and we want these to be constants so I don't know how you do this in Google this is how you do an Excel you just put like a dollar sign next to it let me well it's worth a try to see if that works or not uh to make this a constant because I'm going to do this let me see what it did E4 so it needs to be E4 every time nope that's not it so I don't really know how to make that eon constant so I am going to have to manually modify that which kind of stinks E4 F4 E4 it's crazy I haven't used excel in so long like possibly I don't know 10 years or more and I can remember how to do stuff in Excel I've been using Google Sheets for a really long time now and I I don't know how to do that uh okay so let's E4 F4 A5 B5 all right so let's just see if this is at all reasonable uh this one yeah actually this looks like it works out so this one was the one from from Marietta which comes in second place in terms of distance this one is the one from Stubenville which which comes in first place in in terms of being the closest and this one is farthest away and this is Austin Texas so obviously this is not like a completely conclusive test it was only three uh three locations but I think that that makes me pretty certain that this should work if you see anything that I'm missing oh I had to just do um dollar signs for both of them oh man I was so close Okay so I think this worked so basically this is the formula that we need that'll give us these numbers and then we sort by these numbers it sounds simple when I say that but if you tuned in yesterday and saw how much trouble I had with trying to sort things you'll know that it's it's not that simple at least for me it's not that simple all right so um let me check the live chat quickly um Sam says you can use Google Sheets it's a free backend for small project projects yes you can I've actually done projects like that uh and it's really cool I've done it before to store form data and I also had uh one of the students had to do a website as a like a senior project like a senior thesis project and he um I I helped work with him on it this was just this past uh spring he he did the project and I advised him to use Google Sheets for a backend and Pull It in uh with JavaScript like real time it ended up being really really cool uh and it worked and I uh when he gave his presentation his classmates were impressed with his site so I was really happy for him he actually got a job as a Java developer out near Washington DC uh which is awesome Yep Sam says you can write app script and it will serve data as a web app Sam says I'm probably going to write going to probably write a blog post about it it's really cool awesome go for it Sam I'll read that blog post send me a link to it when it's done uh yeah you can do cool stuff with um the back like I know I've I've gotten form data and then based on that form data I've sent the data to uh obviously I've logged it into Google sheet but then I've also sent emails out from from uh from the Google sheet uh with Gmail so like all automatically happening so really cool stuff um Brandon says this this site has some js Snippets for calculating distance between lat and longitude cool I think I think this is going to work the way we did it if it doesn't and I start getting some weird stuff happening I'll check out what some other people did but usually I'm all for looking up with other people did not Reinventing the wheel but in this case I thought I'd just test my idea and even if you know everybody else already figured this out before me it feels good that I did it myself and didn't look it up I mean if I did this all the time I'd never get anything done but every once in a while it's nice it's nice to do that so let's at least try to get you know do this math and get that working let me see what time it is 330 an hour and a half okay um yeah let's maybe try to get a little bit more a little bit more done so just trying to think where I should do this I like this git location function being really simple so I don't think I'm going to add anything to it it's just literally going to get to location and so probably want another function and let me see actually I just realized now I haven't merge the Sorting into master so whenever I made this Branch based on master I don't have any of that in there and I wish I did have it in there I really don't want to do it on the same Branch but I want some of that how about this um let me obvious I think this is possible and it shouldn't make any it shouldn't mess anything up but I can just merge the branch that we were doing the Sorting on into this branch and then I'll have those changes correct I'm going to try it first I'm going to save this stuff where is my okay so in my terminal I have it set so to show a little asteris when there's changes uh so it may or may not happen when your terminal depending on how you set it up so this tells me I type get status it tells me what changed and now I'm going to do get commit and I'm just going to write am okay that means I'm going to add and write a commit message at the same time which I use this a lot because normally you know I'm making really small commits and it's fine to do that occasionally you want to maybe break it up and only commit certain files uh you know individually so get commit am and I'm just going to say uh get location yeah get user location that's pretty much all we did right we just got the user location all right and all right great everything worked so now I'm going to merge the other Branch uh I forgot what I called it and events sorted okay so let's do a get merge event sorted uh oh and looks like we're going to have merge conflicts oh no we didn't okay it's just asking me to do a a message I don't know um um I'm always really terrible about merge messages like I just wanted to merge the branches I don't know what to say um merge features into geolocation BR all right not sure if that's decent commit message or not but it's all I can come up with right now so I'm going to close I really kind of wish I didn't set this to come up in Adam it's actually a lot easier just to have it come up in like Nano or something right in the terminal uh it's more of a pain to do it an Adam so there we go yep so you check this out if you haven't done merging before with Git check out maybe like two days the episode I did I think two days ago we did some merging and stuff maybe three days ago so at some point this week I went through like more thoroughly how to do merges so I actually kind of wish I had merge conflicts because I didn't get to demonstrate that live and that would have been probably useful if you've never had any conflicts just to see the process for resolving this but I'm sure it'll happen one day when I'm streaming so we'll get to see it at some point so let's check out what we have here awesome okay so this gives us a much better picture of what this page is actually going to look like once we get all the Sorting sorted and um so here here's what we want we're going to save some of this [Music] data how I going to save this all right so this is the part where I may need your help because I'm feeling really uh kind of tired and my brain is not working so here's what we want to do let's go back to our list just to keep keep me on track uh so we've got this we've got this we we need to compare location so let's do this let's compare this and then what I'm worried about is getting to the point where I'm actually sorting so I obviously need to do the comparison save that data and then do something with that data to sort it uh but then have that associated with the actual of the rest of the data for the event okay so hopefully that makes sense uh to you all okay so where we at we'll just do another function here let's go compare compare location I kind of just want to say l just loc but I've already used location so I'm just going to stick with that it probably would have been sufficient just to say look uh all right so here's what we want to do we want to take are oh actually we need we need this so we need to save I'm thinking maybe I ought to just save this into state if there's any reason why I shouldn't just save it into State instead of just some variable somewhere let me know but uh I don't I can't really think of any reason I couldn't just put this in state so uh let's see I'm going to break it out into two things so it's going to be uh this Dot and let's use an arrow function um Arrow function is going to as Patrick uh so eloquently wrote in the live chat yesterday it's going to lexically bind the value of this so basically this is going to mean what I want it to mean so uh you can check out I I tried to explain it I think yesterday in my stream so you can check that out or uh you know look it up for a a better explanation than I gave so now I don't want to say this right here what I want to say is this set State and we're going to say curly brackets and we want um user lat and we want that to be position okay uh let me know if I do I have to Define this up here first before I do this so let me know I'm going to finish it out with this one but then uh if if you know off hand otherwise I'll just save it and see if I get an error uh and then we'll know set States I it seems like I'm doing this with a lot less errors than yesterday if you're here yesterday you know it was slightly painful uh all the all the mistakes I was making just you know syntax errors spelling errors logic errors it's all over the place errors okay so let me comment this out quickly just to save this and see what's going on see if it works where I don't know where I put it events there go okay so uh Patrick says not sure if it is required but I have always seen the default State get initialized with all the values okay cool I'm I'm fine with doing that I actually think it's it would be helpful for someone trying to read this if they could see everything that is is going to end up being in State instead of having to read through and piece together what's there so I'm going to do that even if it's not necessary so uh so this may not be necessary but I think it would just be good practice so how should I data type onance I'm I'm thinking I I don't really need to set this to anything uh is there a way that I can just set this with no value should I just make it at this point an empty string is that is that legit would that be the best way to do that oh man Patrick I remember you told me I'm pretty sure you told me the same thing yesterday Patrick just says don't call set state twice and I definitely forgot that um it's not like it's once Patrick reminds me of it it's like H that's obvious but for some reason I just cannot remember it all right so there we go so let's say man I was I have uh Spotify going in my headphones and I've been listening to a song I don't even liked for like three minutes and I just realized that I I hate when that happens okay so this should work and I just want to make sure I'm not getting an error anywhere oh here we go so this is nope not events yet let's click events I'm going to I'm just going to reset the dev server there we go okay so it loads we're not getting we're not getting any uh you know error screen there I'm not getting any errors I have the uh console open and Dev tools on my other screen no errors there oh you zero oh yeah why yeah obviously uh it's a number I'm going for so Rohan both Rohan and Patrick are saying use zero it's valid L and long longitude yep okay so let's use zero instead zero okay and yeah so that that reloaded no errors at least no errors related to that uh I always have a few errors when I'm developing locally just it basically for like I don't know where but something with fetching some script uh I think it has to do with me doing it from local hosts and it it works when I have it a legit URL [Applause] okay so Patrick saying in this case and yesterday setting state twice wouldn't have made a difference but in the case where you are changing values that are displayed in the Dom you will cause two updates okay thanks for explaining that so I mean I was definitely I mean I was convinced that I shouldn't be doing it twice just to not you just to keep my code a little more simple but that's that's also an even better reason there uh so thanks Patrick for that all right Quincy says I've got to run to a meeting but it's been a blast hanging out with you all and watching Jesse code live usually I just watch when time permits and double speed thank you so much for uh joining in today Quincy this this really made my day and I really appreciate it I'll see you all right so I too would like to um would like to be gone soon uh cuz I've been at work for a long time and I'd like to go home so let's do a little bit more with this I just hate to leave this commented out so let's at least get this finished and then I will go home maybe I'll go home actually I have to review a bunch of uh job applications for the uh web developer position that um so we're hiring a web developer here and uh I've gotten a little bit behind on reviewing the application and I need to have them all done by tomorrow afternoon so I don't have that I think I maybe at most have like five more to review so it's not a huge deal I can usually get them reviewed like I don't know maybe 15 minutes per application it takes me depending some some people are like really obviously not qualified so I can kind of very quickly ruled them out uh okay so here's where we want to do our math so we want let's see so we want to in trying to think how to do this the best way okay so we have this saved in state so we're good there um it just occurred to me that I I want to be careful I don't want this function to ever be called if we don't have these right cuz then it won't be able to do anything it'll it'll just give different so I don't think we have to worry about it right now to do what we want to do but I I need to remember um there has to be some some safeguard that if the user has not shared their location then then this doesn't work cuz I don't want uh errors to come up uh because of that so I'll have to think about the best way to accomplish that but for now we just want to do um all right so let me think we want to get we basically want for each event we want a value that is the result of what we got you know in our spreadsheet so basically we want this value to be attached somehow to each event so that we can sort by it so that's going to be the goal of this function the end goal will have this be attached to each event all right oh okay it looks like I I uh made a mistake earlier and uh Patrick is pointing this out Patrick said he was not arguing for using zero he was saying that if zero is a valid latitude and longitude null would be a better idea uh it says it says this has not been initialized okay so Brandon says latitude longitude 0 Z put you on the west coast of Africa and the ocean so Patrick says yes set the default to null test against that and Brandon agrees with Patrick all right thanks for clarifying that uh I really I know I said this yesterday I'll say it again today you all are very patient with me because sometimes it takes me a while to get what you're saying and I really appreciate that so let me go up here no Okay cool so here's here's where uh my my thinking is I'm not exactly sure what to do I'm trying to think how do I go about attaching these values these values to the events so I'll have the events already stored they're they're basically already stored in state at at this point uh we'll have yeah we'll have the default stored did we store it on on uh load or not or does it happen when we sort I don't think we actually store anything in do we store anything in state yeah we do on component did Mount so in in state we're storing this props data okay so all everything we need is already in this props data so it should be we should go to um set state data and then it should be like dot do something right so data dot h so I should do something like I'm doing down here basically I I want to uh loop through everything so let me show you here so basically I want to look Bas I mean in a sense like we could do a map so it's going to be this state data right and we're going to map that and then inside of that I want to well first of all grab the latitude and longitude make the comparison and then the result of that I will use this I'll use set State and then I'll set I'll add yeah I think at that point I will add something into the state for for this particular particular one how would I I'm just thinking what what would this mean inside of here or what would be the right okay so I I've explained it about as as far as I can think to do it let me know if that makes sense okay so Patrick's uh Patrick's saying this props data map okay good so at least I was on the right track there and then insert a distance to event property on each event okay good so that's what I'm thinking the only thing I'm a bit worried about is um if I use map will that preserve this or will I have to just let me know so do I need to throw an arrow function somewhere to preserve the value of this so I can do this set State um let me know all right so within here let's go with oops let me do the arrow function so that I can lexically bind this um and let's go with this state data map function and oh actually Patrick says this props data map is there a reason why I should use this props data map instead of this state data map I mean obviously uh the same at at least on initial load props would be the same as uh whatever is in in data but if some other sorting has happened after that point then they would be different okay St map function wait a second sorry I just got to sorry if you get motion sck that was probably I just wanted to check the syntax and I can call this if event right I don't think I will need to know the you know have that I in there at this point I don't think I have any use for that all right so within this we're going to say okay all right so Patrick says in response to my question about you props versus state state is fine but don't forget to capture that in a variable and then set state with the modified data map is a pure function that is going to return the modifications okay all right so we need to do some math first actually I need to look at the uh how this is in the API so we need ACF location map and then lat or LNG okay I'm going to show this on my other screen so I can see it when I'm doing this so we're going to say so we need this I'm just I'm going to just type this out so I get it all out and then we'll clean it up so I need this uh state right what do we call this user lad this state yeah user L uh minus and that's going to be event. ACF do what was it uh location map dolet okay so you're going to do that and then it's going to be plus um okay so that was our basic formula uh that we wanted to use all right so the result of this is what we want to set as the value for and what were Patrick had a name for it I liked it I'm I'm trying to find it in the live stream distance to event so I like that name so property on each event okay so we want to say all right so Patrick the last all we we just got a question here when when will the data visualization be available in uh free code academy I'm assuming you meant free code Camp correct uh so if so I don't know when the data visualization will be available uh but Quincy the founder of free code Camp was just in the chat a few minutes ago and said that the new curriculum uh will be up and running as soon as possible uh so no dates given but they're working really hard on it and it'll be up soon and I haven't looked at the beta curriculum for a long time so I can't say for sure but I'm assuming that all the data visualization stuff uh will be in there and completed you can check it out out though uh I can't remember what the URL is but if you uh you know search for the free code Camp beta uh curriculum you'll be able to get a preview of what it's what it's going to be like uh if if you want to kind of get a jump start you can even work through some of the stuff some of the uh the problems and um the lessons Okay so back to this all right so let me go back to what Patrick just said to review this so we need capture that in a variable and then set state with modified data okay so um should we say let distance equals there we go and then set State I have a feeling I'm not doing this the way that uh Patrick was trying to describe it to me so so uh I fully am am aware of that so just Patrick just let me let me know sorry and uh let me know it's going so this set State and let's do we need distance to a vent so it's going to be this set State data no no no what was it shoot actually we may have there's probably a better way to do this but I just I think we actually have use of uh this value for the iterator because we can go data and then put I in there and that'll give us the one that we want right uh so this say State data um I and then we're going to add the field right so distance to events equals distance okay let's see con new data this is oh yeah con I'm I'm trying to uh based on the wisdom that you all shared with me about when to use const and let so My Philosophy was like I always use let unless I knew I wanted a const but it seemed like the better way is use con all the time unless you really need let so I I still haven't broken myself of my first habit and but I'm going to try to so this state data map const new data Oh shoot that's not what even I don't think that's what Patrick was talking about con new data equals this state data map there we go so he was talking about um which I can use that in there anyway I suppose because it's going to go again so here I need okay so he say don't don't set the state inside the loop okay I kind of was wondering about that I I assumed you would let me know when I tried to do it if if I shouldn't do it uh Pat said after this set State all right so const so this is where we're going to do to const um I'm just going to write write this how your put it new data and then after we're going to do this set state or wait this set state I'm just going to copy this for a second uh oh no I'm going to copy this what you put in but Patrick put in um there we go this set St data new data and then I can remove this and what I need to do is then should this be return instead of actually making this a variable do I need that is is that uh not necessary here I guess I'll hit save and see see what happens all right well no errors yet so that's a good sign but what I really need to see is let's see says you need to okay so uh sha says yeah yeah return it good okay Patrick says you need to return it but you need to set the new property with the calculated value this set State yeah you're right I just I just read uh he says you need to set the new properly calculated value so I turned my head over and just saw what I was doing here realized it and then turned back and I saw Patrick said that wipes out your data so yeah oh man um this is the same thing I did yesterday I think I just tried to push it and get too much done when my brain was just not ready just too tired for all this um okay what was I I did want to ask really quickly so these are the Dev tools for react so I wanted to show them and also ask a question so you have a react tab um I forget I it's some sort of extension I think that you have to download for this to work but I just wondered I can I can see props but I don't see anywhere for State although I wonder perhaps I just overwrote on my state and that's why I can't see it oh no Lyon just joined and said can't believe I Got a notification uh 2 hours in I'm really sorry I um I set the notifications to to go out beforehand uh so I'm not sure if I can do anything to remedy that except maybe uh create the event earlier in the day so today I created it kind of late because I had a Twitter poll on the topic uh so but it was all kind of late I spent all morning in meetings so everything was delayed more than I wanted it to so I'll try to get the event scheduled earlier in the day and hopefully that'll stop the um the notifications from going out late as well okay all right so Patrick is giving me lots of stuff here let's let's go back to this um Patrick says event distance to event equals in return event all right so distance all right lynon says it's okay I'll catch up tomorrow cheers all right um I'm just I'm going to read uh I had a comment just come up not necessarily related to what we're working on but I'm just going to read it right now to give my my brain a slight break here uh uh mamy um is saying hi this helps me a lot and thank you Jesse some things are small and the videos help me review over and over until I see what you are clicking and it is fun Jesse I am new I nothing I know nothing at all okay cool um thanks for watching um yeah I'm I'm glad you're getting something out of it uh I think I said at the beginning this is kind of more advanced stuff so uh if you're just learning this might be kind of difficult I'll try to do my best to explain and um yeah you're saying some things are really small so watch it to see what I'm clicking so um yeah so I mean I'll try to um keep the you know everything as large as I can in terms of font size and everything but let me know if it is really too small uh and you can't see all right so let's finish this up so event distance to events all right so we need oops okay so we need to return the event so uh let me read out what Patrick's saying uh for those of you watching later on uh so he's saying we need all Rohan says got to go really sleepy yeah what is it like 2 or 3:00 in the morning where you're at probably I can't believe you stayed up uh this late as it is so yeah get some sleep I'll see you um actually not tomorrow uh I won't be streaming tomorrow because I will be hopefully taking a nap because I'm going to drive through the night uh about 8 hours uh to take uh my family uh to the beach for vacation so I won't I won't be streaming tomorrow but uh I'll it might be a week before I um I stream again so thanks for staying up this late and hanging in there Rohan all right sorry Patrick I keep messing around and uh you're being really patient with me so all right so events so from what I'm what I'm thinking that Patrick is saying here um is that we need to return where is it at I'm losing it here okay um then return event okay so event. distance to event return event set event. distance to event equals oops let's do this all right this is making a little bit of sense to me so hopefully I'm doing this right and then we're going to return event awesome and then that's what's going to be so event now this event uh with and I guess I don't need this huh uh so this event is now the value of uh new data right and okay Patrick Patrick says there's a big thunderstorm uh rolling in uh so might might lose power uh well I I hope you don't lose power uh for your sake and for my sake because you're helping me out a lot right now uh says he's rolling in over the mountain where if you don't mind me asking where where are you at Patrick I mean just in general uh if you got if you got mountains around you turn EV all right uh so Patrick let me ask you okay East East Tennessee cool um I'm from I'm from West Virginia myself so um not not super far uh from Tennessee actually trying to think is there any point I don't think there's any point where West Virginia borders Tennesse but it it's pretty close in the southern point of West Virginia so um I have been to Tennessee a few times uh really nice uh my wife has has family in Tennessee Okay so Patrick am I am I doing this right so far at least in in this area oh cool Patrick says uh drives through West Virginia on the way to see family in Pittsburgh really cool um yeah I said I'm I'm about um to drive from where I'm at to Pittsburgh only takes about 30 minutes it depends on where at in Pittsburgh I I mean I can get to the uh like the west side of Pittsburgh in about 30 minutes takes longer of course to get you know through the city over to the east side but uh yeah Pittsburgh is a cool City yeah if anybody is ever around Pittsburgh or anything um let me know uh I don't know I don't know if we'll get to meet up or or what if that'll be if that'll be possible oh cool uh coropolis Pat says coropolis by the airport oh yes so that's only about a half hour drive from where I'm at awesome and it's actually only about I don't know 15 25 minutes away from where I grew up uh which was right on the border of Pennsylvania and West Virginia uh at one point in my I could walk in my backyard and cross the border into Pennsylvania I used to like to stand like right in the line between West Virginia and Pennsylvania and uh like say like one of my feet was in one state and the other was in the other state so when I was a kid I thought that was really cool okay awesome so Patrick says thinks that's right uh okay log it all right cool um yeah let's see what's going on here let me see she want me to log it mean like console log it I'm like nervous now every time I type something in I'm going to look over and uh Patrick's going to type in like LOL what are you doing n Patrick's really cool about everything and patient with me but um it's it's happened quite a few times oh cool you went to um Patrick went to Moon middle school for a year in seventh grade oh really yeah I know yeah definitely been uh in that area plenty of times so that's really cool yeah I have cousins that went to um West alany uh High School up there so not not in the same area Pittsburg obviously but you might be familiar with that if you were uh if you were up in that area oh cool Brian lives in Pittsburgh too awesome did anyone go there was a Tech Conference in Pittsburgh uh did did you happen to go to that Brian or did you I just found out about it like two days before it happened and they had already stopped selling tickets I really wanted to go and uh maybe like do some interviews like I did uh for a conference a couple weeks ago but maybe next year okay Patrick says this is uh Patrick Patrick says I'm old this was a long time ago uh oh actually I I keep like think why is why am I not seeing anything happening I'm never actually calling compare location anywhere so that actually here's what I should do why not call I I said I wanted to make sure that we had the users location before we did this so let's just call compare location from within here and I mean right now this is this is happening right away but it will happen uh once the user actually clicks on something at some point yeah uh Brian asked which conference I can't remember what it was called um I just saw it on Twitter somebody tweeted about it but um yeah there was some sort of Tech conference they had lots of different stuff like front end stuff back end all all different kinds of uh like programming things uh and it it looked cool it was held at some like college I think like Community College or something uh in Pittsburgh uh yeah so it it looked really cool I'd like to go next year I did I followed the uh conference Twitter so if you check out my Twitter and uh my followers it's it should be one of the uh most recent uh accounts that I followed I actually think it might be cool to like maybe apply to speak at at that conference I've never spoken at a um at a Tech conference so I think that would be really cool I I used to teach so I'm I'm used to speaking for a long time and I guess I do the same thing when I do my streams uh so I don't think it would be like too much of a stretch for me it might be fun I just have to think of a good topic that uh might be helpful to people all right this compare location all right let's try this I saved it nothing happened I saw no change at all in uh in Dev tools or anything all right I think I think that's because my server once again is frozen oh P Patrick says he's terrified of public speaking more power to you and anyone who can do it oh well it's I don't know I I never um I'm not going to say I've never gotten like that nervous feeling beforehand but I've never um been like really really nervous about public speaking before uh so I I guess I'm kind of lucky that I I just really never had that so it's not like it's not really any credit to me of being brave or anything because I've never really felt uh fear about it so it's uh oh man so that's not let me show you what happened this is definitely not the result that I wanted so I'm doing something wrong somewhere oh I get yeah obviously I didn't fix that um let's see it's giving me f to fetch whoa actually it's saying the fetch failed that should not happen that that seems an unrelated issue to what we're doing I'll show you what I was what I'm getting I'm getting all these errors let's see let me just get rid of this for a second um the old debugging by commenting things out not the most efficient way to do it but it works eventually all right so I mean that did at least bring this stuff back so that's good what is going on let me get rid of this bring it back up huh why is this happening okay where I this is looking more useful I forgot to probably forgot to say 39 event 39 what am I doing wrong here uh it looks like I'll show you the error again but it looks like it's saying okay so cannot repr property set state of undefined and us us so is this saying that this is not working why is this oh uh I'm not exactly sure but it could it be since I'm calling it from in here I also need to make this an arrow function I'm not really sure but why not why not make them all Arrow functions and then they all match okay so uh I didn't get the error again so this is still the old error so this is all the new stuff did not get the err so that's that's good um let me do a refresh and get rid of all this stuff just to be sure show you what I got Okay cool so didn't get the error but oh and here we go got it again so I did it was just delayed hey all right fabian's here hey how's it going hey I I want to know um Fabian or Fabian or how do you prefer your name to be pronounced I know it's hard to type that out but try if you could I would love to uh say it correctly so let me know also thanks for joining all right Chen says hello I just saw the stream but have to go now all right well thank thanks for stopping in for a bit uh yeah you have a nice day too uh this is L what looks like LOL LOL uh says I can't speak in public uh but also I need a job so that I can get surgery wow um I'm I hope it's not like anything super serious but um and now the message is retracted I'm sorry if you didn't want me to read that out uh now I see the message is retracted so uh sorry about that actually just so that everybody knows I do kind of read out the live chat a lot so if you have something you don't really want to be read out direct message me on Twitter and then I I won't share anything from a direct uh message on Twitter if um unless you tell me like go ahead and share it um so anyway I hopefully though you all if if you're trying to get a job in programming hopefully this helps you a little bit um or may maybe helps you make a decision as to whether or not you want to do do this I I don't claim that this is what it's like for all developers but it's what it's like for me and uh I'm a a front-end developer transform function position to position all right let me all right let me move this out of here so I'm looking so F so I asked Fabian how to pronounce his name and he just typed his name in I so is it is Fabian okay I'm really thinking there's no way that that's how people pronounce that in France okay so anyway he said uh transform function position to position and the arrow function function so where sorry for not getting this at all but uh Fabian where where are you um directing me to change this because I'm I'm not sure like the error message I'm getting is for this line but I wasn't sure if it had to do with anything I'm doing up here since I'm calling it there you transform error functions to use this set State oh oh okay now I see where that talking about this here I just totally didn't didn't see that at all sorry about that now that I see this your previous messages super clear um shoot you know what I mentioned something about that earlier and then totally forgot uh so all right so let's try it out now whoa what just happened I got some errors here did I did I mess it up I mean this this isn't whoops L 35 okay I see it L 35 what am I oh okay okay shoot I forgot to take out function sorry about that that was a silly mistake okay all right thanks thanks Sebastian I just saw uh there's a delay in the um you know between what what I'm doing and and what you all uh see and here so but Sebastian found that and let me know what it was you do you still need okay and also uh Bal found it as well Brandon says it's pronounced Fabian Fabian according to google okay so maybe I'm not that far off what all right for some reason it's it's still showing me what I had before restart server oh really Sebastian says it's like a 5-second delay that's not bad at times it's been like more closer to a minute so I guess that's good actually the stream the stream Health has been good you know the whole time so uh not bad I was actually really worried because all the thunderstorms here that I wouldn't even be able to stream so we're having power outages but um nothing nothing has happened so far and this has been a really long stream all right there we go okay awesome let's see make sure we have this great Okay so load everything all right let's see all right so my this St see my console log is not firing so why am I not actually I should probably no I don't want an error function here right because I want this to be actually what's inside this um uh Patrick says maybe you need to revoke geolocation off so it will ask you again yeah actually now that I think about it it should have I guess I took that console log out didn't I the git location console log I'm going to I actually want to add it back in because I want to see if this is doing anything um I'm just I guess I don't need both latitude and longitude I just need oops this States um yeah so this get location yeah this is not yeah this is not working let me show you what happened here so I'm not getting that console log of the latitude like I should be and I'm not I'm not getting anything I wonder I'm just going to conso L you know basically anything uh yeah it's not showing me anything I um my my thought right now is uh what if I've exceeded the amount of times I could use this uh you know in like I I've just refreshed the page way too many times Maybe so I'm wondering if this is just hanging and not not getting down to where it needs needs to be to run anything else yep all right so see that worked when I log that when I put it up above above here um but let's see if I can find and I'm just going to verify that if I put it down here it's not going to do anything so I save that I'm going to do a refresh no actually it did work this time I don't know what happened before and why it it didn't work and then it worked oh okay sorry Patrick I just saw that uh your last message so location um always ask okay all right let's see okay awesome so it asks okay so at least you know this this portion worked and so then I'm assuming but we'll check that if I log position that I will in fact get the position and I need to I got to remember to keep refreshing because it's not going to run that again uh I think just if I reload the modules there we go there's the position the Geo position object great all right so that is running all right line 45 needs to be an arrow function okay so it does I'd considered that and then thought it might mess things up so hopefully this is it and this fixes it I'll bring this over so we can all see the result in the console okay got that and that's it we should have gotten more than that right so we should have gotten after this it should have [Music] ran compare location which should have logged event correct yes at least um all right shoot starting to run out of ideas wellow I just checked my phone I have 11 slack messages doesn't look doesn't look like it's anything that's serious I think it's all just people joking so not going to look at them uh okay so Fabian says this set State doesn't immediately change the state okay so where am I at with this set state so talking about this this time when I use it up here on line 37 yelden says uh do you use routes a set State also reloads the Dom okay I'm I'm not sure um what you mean by routes uh yelden could you explain it a little bit more uh so I can give you a better answer try to log this state okay all right and this is turning into what the heck much more of an epic stream than I expected I mean I should have expected it more I've never done this before so well my plan for the stream is I know what I want to happen but I don't know how to make it happen then I should expect that it could take a while uh I think my Dev server just needs reset I I know I've said this a million times already but I just I really need to figure out why this keeps happening uh because it's like occasionally it happens frequently and it's annoying sometimes I go uh pretty far without it happening okay that should be working now if I refresh yeah oh goodness okay but at least we got State okay so that's what we wanted so here we console log the state um right here on line 38 so let's see okay we do in fact have user lat Us lawn okay so we have that so we have this state data it it has it has the data in it so I kind of wish it didn't and then we would have found a problem um okay Yen uh is explaining what he meant uh so react router allows you to have routes for multiple Pages just curious if you're using that um do you use the react add-on for Chrome I do have the react add-on for [Music] Chrome um it but I'm I'm haven't I don't use it a lot I'm not that familiar with it is there something in here that would help at this point uh let me know and I'll I'll check it out in here uh I really want to know like should should I not be able to see like I can see props right here is there any way to see state right here here so I don't have to console log State um and then answer your question yoden I'm not using react router uh for this project uh because I'm doing this I'm using nextjs with this project and it comes with their own router I am doing some custom routing so if you check out the GitHub repo for this look at the server.js file you can see some of the custom routing I'm doing uh I needed to do some parameterized routing uh because there's some like blog style Pages going on so um but basically it's just the default routing from nextjs uh with with the exception of uh slight modifications but I would like to learn other like more about react router and other ways to do it uh because I I think I think I'm limiting myself uh by not you know definitely by not learning that I could be doing more um dragos I'm using adom uh from from that's from GitHub right yeah GitHub makes Adam uh okay so let's goes so Fabian said you're logging State inside location with which is triggered seconds after calling compare location okay so should we try it somewhere else should I try should I try somewhere else maybe I don't know here or I me right it should be oh oh goodness okay so when I log it from there there's nothing in data all right so let's check this out so inside here it has the data inside here no [Music] data so we're actually calling get location first and then from in there is compare location so what's happening what is happening between here and here that's wiping that out oh okay so Fabian is saying I need to move uh this function call inside here all right let me refresh um yelden says where is your state set do you have a main component that is housing the state and you're accessing it from a subcomponent um all right so that yeah that did it in terms of you know now we're getting we're getting data here all right but now we cannot read property lad of undefined and that's on line 48 so we're getting somewhere cuz that's a new error um all right so in here event ACF location map oh shoot I know it's happening um I don't have I don't have these set for all of the events cuz we only did it for three of the events so it's it's iterating through the first three once it gets to four it's saying this is undefined so um I guess I need to let me see what it looks like if I don't have it so here's here's the uh what this looks let me scroll down a bit find one that doesn't have this so ACF okay so it just doesn't have it at all so if I check for has if has in property so I'm going to do this and say [Music] um if I don't know there may be a better place to put this if statement so um this oops event. ACF has on property that's the right one right has in property I don't know why it didn't autofill that for me um and then we want location map then we want to do that okay so that should at least get rid of that error because it won't attempt to read that assuming that that was the right name for that function uh Brandon says I think fabian's on the right track try move and compare location call to within the geolocation call bag um Pedro says it's not really an IDE it's just Visual Studio codes this is referring to to Adam actually um actually Pedro I'm using Adam and you're right yeah Adam it's not an it's not really an IDE it's um it's just a code editor uh but yeah I mean oh nice I didn't even see what happened CU I was paying attention ention there but that that is uh awesome um it's progress all right great so yeah this is this is good so we can see that was what was happening the first three actually have have values and okay so we see here so did it's thing it did the math and it actually added now uh this to event so this is this is now exactly where we wanted on this object so now we can sort by this so actually let me where am I I want to double check the state so I don't need this anymore here cuz that worked um but I want to check the state at the end here here just to be sure right and let's see let me check this one there we go okay so we do have it it is there awesome so I guess I don't need this then because the state is yeah yoden said this is where tdd saves your sanity so test driven development you are correct um I definitely want to learn how to do test driven development and use it and it would definitely be worth the time spent in learning it yeah okay so amilio ask the way you fixed is that some events don't have a Latin long right yeah actually I'm I don't think I really explained what I was doing so sorry about that uh when I did we were getting an error and it was saying like basically it can't find I forget what the exact error was but basically it was telling me that this did not exist for some of these events uh which made sense because I didn't actually put in a value for some of those events so when I did this so I checked the API uh data just the the raw um data here let me bring it on the screen just to step you through what happened so I checked it here and I saw that ACF you could see it it didn't even have like a blank value or anything it just didn't have it at all it did not have that field so I went in and said if event. ACF has own property location map so this this basically says if if this is even a property here it's just like it says right so then go ahead and and do this calculation otherwise just skip skip down to you know do the return event um and then that ensures that it's not looking for this when it doesn't exist and then that fix the error okay alelo ask I was wondering does the Google API puts puts the data when creating the new event and setting the address I'm not exactly sure what you're asking amelo um uh could you like explain a little bit more so I can give you a good answer uh please uh okay so Patrick saying you can do uh an else on the check for location map add distance to EV to those without it and set it to Infinity then at the end of your map sort do your sword oh okay so basically so basically saying if an event doesn't have uh a location it's it's going to show up at the end then uh Fabian says argue mutating the state without calling set State react won't be aware of something has changed Patrick says you're very close to having this done I'm glad about that oh Amelia says where does the Latin longitude come from for the events oh okay yeah uh so I'll show you so here's what it is coming from so I have here um in WordPress a Google map where you can put in uh the the city and then so you put it in there and then what you get from the API is assuming you put it in you get this here and that information has come from the Google Maps API of the uh latitude and longitude so that's where I get that data from hopefully that explains that answers your question okay so got Patrick saying um map is a pure function where is he mutating State directly and Fabian says event object is updated so so we're talking about where I here all right Patrick replied right but map is pure so it is operating on a copy alelo says got it thanks all right awesome I'm glad I uh glad I answered your question yelden said I'd learn moex or Redux for way better State management using set state has its flows yeah I I want to go with mobex I um I was at a conference recently and I um I listened to a talk about Redux and mobex showing like the differences between them and how to basically showing comparing like how you would do the same thing in both and I I think I definitely want to go with with mobc so when I get a chance I want to want to learn that yelden says mutating state is dangerous anyway all right so there there's some discussion going on about this portion uh in particular this uh in that would react be able to pick up on this change in state right is that the uh yeah I think that's that's it so so I think fabian's saying that since I didn't use this set states to change the state here react won't know about it so should should I then instead of setting it here should I use set state would that fix it could I use set State inside of this and would it work if let's say I just change this to um set State and then made a distance to event at this point I think I'll just try it and see if it see if it works so this set state distance to events oh okay now I got some answers so probably shouldn't have done that uh Patrick says mutate all your data then set State uh Fabian says you need to clone event objects all right so let me get rid of what I just did here oops all right so we need to mutate everything and then use set state to update it all at once instead of trying to update it every time this for every uh every po every event right yeah I'm pretty sure that's just saying okay so let's not need to CL object all right Yen says um this is why Marx and immutable State makes things a lot cleaner and easier easier to manage lots of tutorials around yeah uh yielding yeah definitely I mean I'm not I don't I don't disagree with you at all um if you haven't seen any of the previous streams sorry I got to get some water my throat's uh starting to get really sore um so basically the story is for this site is it was a surprise project that I did not expect uh it was someone else's project um an outside company was supposed to do it and um basically it ended up that it needed to launch and I needed to be able to do it really quickly so yeah so I mean if I had more time I would have done this differently uh and there are definitely areas where I um I would say like I made decisions based on what could be done more quickly and and that was based on what I already knew how to do knowing that I didn't have the time to properly learn something new so uh but I definitely do want to learn mobex so the next time I do a project like this which there there are several projects in the future that will probably use the same kind of setup I will definitely try to learn mobx and incorporate that uh okay uh Patrick says my bad I totally whiffed on the Clone step actually Patrick I kind of think like probably an hour ago at this point you were mentioning something about that uh doing something similar to that so I think I erased that part that we were attempting to do so uh it's probably my fault uh yelden says you have a store file and all your status there and then you use dispatch yeah yeah okay cool uh so yoden was describing uh mobx so yeah I umum I have to look I took a lot of notes at the talk that I went to that uh talked about mobx and hopefully they're going to release the videos for that talk at some point it was syntax con was the conference so uh then maybe I can watch the video again uh and or check out a lot of the other video tutorials uh Fabian says it's important to clone because set state will compare Old State with new one but if you alter the Old State react won't be able to know what really changed Okay cool so um I'm going to ask a very probably aish question here uh but just for the sake of getting this done on time what's the best way like how should I clone this in terms of like what what syntax do I use um yelden also ask on this site do you know the users because i1 still does not Support es6 classes unless you use Babel so yeah I'm I am using Babel so um next JS uh automatically handles a lot of that stuff so actually don't yeah we tested this site 11 at some point I think we went through some testing so yeah we did so it doesn't actually the worst part of the site is some of the CSS because I'm using flexbox for some things and that doesn't work in i11 so um yeah so I mean realistically uh my boss is not concerned about me making things work in ie1 uh his his Viewpoint is it would probably be better for people to just update their browsers anyway if possible so and they're probably used to other parts of the internet work not working correctly so um it it somewhat does depend on our audience though realistically but uh in general if it's not going to cause a huge problem with our our audience um it does seem almost like uh I don't know in in a it kind of in a way it seems like it's better I'm I'm torn between this because part of me is like don't support i11 and put the pressure on everyone to upgrade i11 uh and use something that's better and I mean let's face it more secure right I mean you have less of a chance of getting malware and stuff if you have a newer browser too so it's not just a like I want to do cool stuff you know forget your old browser it's uh people need a reminder that you should be updating these things uh but then the other part of me is like I want everybody possible to be able to have the best experience on my site so I want to support all these older browsers so I'm a little bit torn between the two uh so I just I just kind of consider who the audience is and like when I make sites internally for the University here I have no problem just throwing up a b like a popup at the beginning saying like hey you're using an old browser you need to update this because I mean that's the security issue like I've had people using insanely old browsers like browsers that haven't been updated in seven years and um that's just unacceptable like at at the University I have gotten like bug reports and it says that they're using using browsers that are 7 years old and that's just crazy we can't like we can't have browsers that are 7 years old running on our computers here at the University so at some point we just have to force people to update so um anyway so sorry for the the rant on the side there okay so faban did answer my question that was more to the point before I went on my my little um Sidetrack thing here so he's saying um oh cool you're using the spread operator yeah awesome always love an excuse to use new features all right so let's do this uh so Fabian where are we at cons event clone event okay so let's do I'm assuming this has to be in here this seems like the only reason we'll place to put it to me not that I thought that much about it but uh const event clone equals cool okay all right so this is the spread operator oh Yen says spread operators love and template strings yeah for sure for sure I agree with you 100% okay so number one is this actually where I was supposed to put it I think so number two um we have event clone so does that mean now I should change this to event cloned and then and then at some point after I've changed event cloned then I set State I think I got this now I have I have the concept of what's Happening Now um let's let's try uh where am I at and now a map event return event cloned and this set whoops set state events oops is this what I really want no cuz I don't have a event I want yeah this isn't what I want I messed up at some point right okay I did forget there we go CL event cloned distance to event all right now we're returning turning from this event Clon great and [Music] now am I good so on line 50 do I have the right idea here of all right Andre says there's an error on line 44 what I got which's uh let's see saying objects are not iterable anyway hi Andre welcome I don't I don't remember uh seen you commenting before if you have sorry uh but anyway welcome welcome to the uh live stream uh thanks for for helping out okay spread operators for arrays okay and this is not not arrays oh it is first time awesome Andre welcome welcome I appreciate you uh you watching um is this your first time uh in case you didn't realize it already uh I I don't claim to be an expert this is just me doing my daily work and occasionally like today I attempt to do something that I really have no idea how to do and um usually everybody in the live chat gives me a lot of help sometimes I do things where I really do know what I'm doing and um it's probably more more useful to everyone watching this is one of the days where I'm getting a lot of benefit from from your expertise all right awesome so Ian saying the spread operator works also with objects now cool okay so my last question I I think I've I've changed events NOP I need to change it I guess it doesn't really matter if I change it here or not but I'm going to just for consistency event clone okay if not use cloned equals object assigned event and it's the same okay so fabian's giving an alternative in case the spread operator is not going to work uh for this so I mean actually this I guess I can this EST State event wait a second all right here's where I am oops sorry uh this set State I missed a few things in the live chat here I got to go back and see what's going on uh Patrick says this. set State uh new data and Fabian says and finally this do set State uh. data uh new new date um Patrick don't forget to name the property in this case yes um and ask what do you use to expose Advanced custom fields to WP API uh there's a plugin uh for I I mumbled that sorry Philip ask what do you use to expose Advanced custom fields in the WordPress API there is a plugin uh to expose Advanced custom Fields so I don't remember which plugin I use for sure uh so I can I can check it out when I finish this I kind of want to finish this right now uh before I go back to the WordPress thing but if you stick around for a couple of minutes hopefully it only takes a few minutes to get this this working and then I can check WordPress for you before I end the stream okay Patrick's new day data though um uh yelden said I tried to use spread on an object it doesn't work uh Patrick says are you using a weing a transpiler and um theen says yes oh okay philli just says was wondering if uh I wrote the Plugin or if there was a plugin yeah I didn't write that plugin I got it from from somewhere else so thaton okay all right we're have so there's there's a big discussion still about the um in the live chat about the spread operator um and whether or not this will work so actually let me let's just check this out hopefully I didn't do a lot to break ah shoot I broke I did too much to break this so just gonna get rid of this for now just so I can see what is going on whoops I need and actually I need this stuff okay that should do it oh shoot what is problem here okay so just I don't know if this will help your discussion about the spread operator but basically I am console logging event cloned just to see what it's giving me and here's what I get I get this object here um with all my stuff is that what uh uh Fabian is that what you expecting to see okay so basic say see yeah I sorry everybody I kind of ignored the live chat for a minute because I just thought there's definitely one way to solve this discussion just console log it and see what's going on okay so at least we now know that yes indeed we we do have a uh a copy of of event now so here's here's my question so this part I'm assuming is uh correct uh the part that I'm still I don't know about is now I need to after this all happens I need to set the state uh how do I how do I do and I'm sorry if you've already put this in the live chat this is one of those times where I'm I'm honestly slightly lost right now so uh please be patient with me I will say this though uh when I do streams like this where I am kind of lost for a lot of the time I learn a lot and uh I often don't don't really need um like the next time I do it I remember it and can look back and do it so all right so Fabian saying uh and Patrick are both saying saying this which okay now that now that you put that in there I remember uh you both pasted something like you pasted that in before or you uh wrote that in before so sorry for making you do that again um so is this what is this the right location for for this I mean I'm going to save it and just see if I get a bunch of errors all right lots of Errors now Yen says struggle helps yes it does for sure I mean it takes a long time it can be painful but it takes long time okay so all right so Patrick saying yes this is the race place to do that um oh my goodness now I it just clicked for me uh so in case it was confusing to anyone else watching here's what just clicked for me and this may have been obvious to you but the whole time I'm thinking like that I'm going to have to say set set State and somehow I'm going to set the state of event to event clone but then it occurred to me like wait a second there is no State event right this is this doesn't make any sense forgetting completely that this whole thing we named new data right so anyway um yeah so I I just needed to set data to new data and not anyway so hopefully you can see that that I finally just realized that um so anyway I wish I would have seen that like 15 minutes ago but oh well been staring at this for a long time now so okay but I am all right let me show you the errors that I'm getting right now and so unexpected character at line 54 the set State data new data um um Fabian says uh we had some some people asking about my uh my code editor again um Fabian says put it put Adam in the FAQ I have it in the description actually so um I don't mind people asking about it but uh today is it's actually like every half hour or so I think somebody asks about it which is totally cool I mean somebody has never watched the show before uh you know the stream off obviously wouldn't know uh I'm actually I kind of like that more people new it tells me that new people are joining because uh they're asking about the editor uh Patrick says to be fair I'm not talking commenting answering questions and typing while trying to code you have the harder job here yeah well that makes me feel a little bit better thanks for that Patrick uh I I will say like for sure I work I definitely work faster when I'm not streaming uh but I think it's a good tradeoff because I learn a lot when I do streams like this so I think the long run net effect is that more get a lot more gets done and the end result is a lot better than it would have been if I would just kind of do my own thing all the time and not stream especially with some of the pool requests that you have submitted they're just really amazing and uh I actually like I go through line by line and and try to understand what you're doing and I've learned a lot from that uh I really appreciate that okay so I showed you my um my error here so I got something going on with this set State uh maybe I messed something up when I was changing some things let me see okay so that's good we have this this oops yeah that looks good oh am I missing I think I'm I'm missing a p no I wasn't it was right here I was mistaken uh so that yeah this is closed this is closed all right so it's not like some obvious uh you know like missing curly curly bracket okay uh I'm gonna I'm G to check Fabian says yes courage Jess uh Brandon says streaming is smart you get free help while getting paid to do the job yeah yeah I mean I kind of like to think that I help people too but you're are right Brandon a lot of times I'm I'm getting help uh I'm getting a lot of help and um that's true I'm getting paid for it that's why I did have when I first started streaming I had some people ask about like like giving me donations and stuff and uh I I mentioned a couple times I'm getting paid right now because this is my my regular work so I just I don't really feel like I should take any money if I'm getting paid to do this at some point if I start doing like lots of streams like from home on my free time then maybe I'll think of some way to make money off of it uh if anything just uh I guarantee if I spent my time at home doing streams and videos my wife would get upset pretty quickly but at least if I could say like hey I'm bringing in more income she'd be a little bit happier I don't think she's listening to this if if you are listening back then you could let me know if that's the case oh okay Fabian all right uh I did copy so Fabian says did you copy this set state from chat it seems an invisible character uh has been put in yes yeah okay that explains it so so that's why I say unexpected character and it just says this uh right right here okay so awesome uh so let me um let me just get rid of all this and I'll type it out and then that way I should be pretty sure that I'm going to do it so this dot set state and I'm going to go data new data okay you could see I'm still trying to break myself with the semicolon habit if you notice occasionally when I get to the end like this I tab over I go over because I'm getting ready to put the semicolon in but I stopped myself all right let's see all right so I'm not getting that error again I got a different error but I don't think it's um I don't I don't think it's affecting the page negatively um all right so let's check this out let me show you what I got I got this error but I think that's at events 4 what the heck is at events 4 oh it's something about the sticky n yeah that's that's probably just has something to do with the uh hot module reloading and occasionally I get weird errors with that but of course I never get them you know on the live site because I'm not doing the hot modle reloading there uh okay that's better cool so let's now that we have this this let say data new data okay uh awesome job uh Fabian at catching that by the way CU that that was definitely the problem uh Alberto says yay for non-display characters I'm currently doing a lot of parsing um on uh sln a andf in my current project um okay so at this point I really wanted to actually get the sorted sorting working but honestly it's like almost 6:00 p.m. at my time and um I got in like trying to think how long I've been here at this point um I'm definitely I'm I'm definitely way past the uh amount of time that I am supposed to work and I expect that my wife is wondering where I am so I think I'm going to cut it short I really hate to leave it like right in the middle like this um especially since I'm not going to stream for a while so I'm going to do my best um when I I'm I I probably won't get to it for till after I get back from vacation but I want to do my best to actually now make this work with the sworting and uh thanks actually Patrick says sword AB uh a distance to event B distance to event hey distance to event okay so actually maybe I will sort it because Patrick just gave me what I need in here so um let's see so Patrick if I do the Sorting all right so let me paste in what Patrick just just so everybody can see this Patrick just uh pasted this in and but you need an else on location map that sets the distance to event on others okay cool um yeah I'm definitely uh I'm not going to have time to influent this so I am going to leave this in here like this just so that I mean normally I don't really like leaving in like partial code and commenting it out uh but in this case this is probably the best place for me to put it so I'll actually remember uh so at least I'll know where to go from um so this he is it you know put it above set state which makes sense uh so that basically uh if you're watching just just for explanation of uh in case I don't finish this in a stream and I just do it on my own uh basically if we sort before we set uh new data then uh react will react of course picks up on the change in data and since down here uh we're actually like we're actually rendering these sorry I got to scroll the way down um these events so we're rendering this this data in these events so if the order of this data if anything in data changes then it react's going to rerender these so um if we change the order based on location in state react picks up on the state change and then these will automatically reorder and that's exactly what we want to happen so basically that is the last step in this process is simply sorting by distance uh before we set this and then at that point when this gets set everything will rerender it will work so um so Patrick saying but you need an elone location map that sets the distance to event on others what I'm going to do I think is um either have the uh uh the person who's in charge of content go in and set the location for everything so I won't have to worry about not having a location in there or I'll just go in and do it myself and then I'm going to make that a required field so every new event added in it they have to put the location on it um I I don't think there's going to be anything like a online event or anything where there wouldn't be a location so I think I can get away with setting that as mandatory and then I won't have to worry about it and that'll save me the time from having to put that uh in the code anyway Brandon says should always check for no anyways can never depend on your users and a thumbs up for that yeah if I do although I was if I make it a required field then they won't actually even be able to make a new event unless they set the field so if there were to be um an error it would be either like the Google API uh stopped working like maybe I hit my limit on on that or something so actually um it there could be there could be an instance where maybe um something happened with the Google API messing up so uh so I will do that um let me add this all right so Patrick's saying add uh infinity what how do I add how do how do I make something Infinity this is another one of those questions that I'm just like I probably should know this uh I'm sure this is one of those um like questions in uh JavaScript Basics that I just don't know because cuz I always jumped around when learning things to just learn whatever I needed for the project that I was doing and uh I have gaps in my education math Infinity okay cool thank you that makes sense and I mean honestly I probably sorry I even asked that I definitely could have looked that up so um oh you don't even need math so you could uh so so I can just do Infinity then that's really cool all right so yeah actually that's legit check this out in uh the console so infinity is infinity awesome uh so sweet so that should work cool that's cool I learned so many new things new and useful things today uh so I am going to make sure I commit this and push it to the get repo cuz if I need to or want to work on this on vacation I'll definitely need it in the repo uh because I can't take my iMac with me all right so just want to make sure it's I I probably don't need to do this but I always type get status like almost always just to make sure that I didn't accidentally um edit any other files uh without realizing it so and try like what did it's been so long we've been working on this so I want to make sure I remember what we did our last commit was um what was that we didn't have a last commit did we okay get user location I thought we did so we have get user location uh so now it's going to be um all right that works that pretty much sums up what we did it's crazy that all that work summed up in such a short commit message but I still feel good that we did it and by we I mean mostly you and I did the typing whoa what errors figures it figures I thought I was done and now I have errors uh where's my error irregular white space seriously irregular white space well at least it tells me exactly where so JS 56 so is it because it's because of this stuff what is this white where is my irregular white space I don't even know does anybody know what what the heck it's doing to me for regular irregular white space um all right let me see let me check the live chat um you all don't have to watch me uh figure out these errors because this is not like major errors everything works it's just I have some weird white space somewhere that I have to find um let me check really quick in the chat uh I'm probably not going to go through the whole chat this time to answer questions for two reasons one I'm just I'm really tired and I need to just be done also like this stream has been so long uh there probably aren't that many people that have been here since the beginning so they might not even be around to hear the answer so I am going to save this live chat and then read through it later on and um and try to answer that maybe in a future in a future live stream or put it in the comments for this video or something like that all right so Andre has a quick question which setting did you use in order to be able to use the spread operator on objects when I use it in Chrome Dev tools it does not work um let's see okay Patrick Patrick gave the answer that I was going to give uh yeah so all my all the Babel transpiling stuff that I'm doing right now is building an xjs I haven't uh I haven't done anything with that so I'm not sure exactly what they have going on it probably says in their documentation uh so I'm assuming that they are allowing you know they're they're transpiling pretty much you know The Cutting Edge uh since I I've never used anything that hasn't worked uh in terms of newer JavaScript stuff so whatever whatever um flavor of bble they're using uh is covers most most things at least everything I've tried um let's see oh okay I copy and pasted okay sha thank you so much um so I copy EV I copied and pasted this line [Music] from the chat which I need to just quit that because it keeps messing me up so maybe maybe that'll solve it let's see shoot it's happening again uh but actually I I didn't think about this before but it is telling me it's line what is it line 56 40 so where am I 40 whoa oh man that's weird do you guys see that so I can click here this is really weird so I I'm going to click three times and watch what happens I click three times one two three between that second and third click it doesn't move so that's definitely it and hopefully this isn't okay looks like that one works that is so weird I've I've never seen that there we go and that worked awesome sweet okay so all everything we just did is now up in the repo on GitHub under the geolocation Branch so uh you can check it out if you want to um all right so thank you to everyone this was insanely a long stream and uh thanks everybody who stuck around what was this like a 4our stream I can't believe that um so uh yeah I'm I'm not going to talk a lot at the end of this one uh thanks and I will see you all I'll be back a week not next week but the week after I should be back on Monday uh so uh yeah thanks thanks everybody I really appreciate um have a have a great day and have a have a great weekend and next week and um and I'll see you later and I'll be on Twitter and in the um IRC room and stuff like that so uh you got any questions or anything like that just you know message me on Twitter I'll be around