Working with LocalStorage and React (P1D44) - Live Coding with Jesse

Key Takeaways

hey everyone welcome to live coding with Jessie sorry about the late start today had some troubleshooting issues with our bulletin app that we're excuse me we're working on converting into react but we did not launch that yet we also wanted to make that a mobile app and a desktop app using react native and electron so we haven't gotten to that yet kind of wish we would have and then I wouldn't have to have this troubleshooting we wouldn't have users with issues the latest issue was someone is using Safari and it's supposed to store some data and local storage so that you don't have to log in every time you should stay logged in for an entire year if you go through the password this login process which is a magic link sent by email but unfortunately it's not working so I've been emailing back and forth trying to figure out what's happening it is the latest version of Safari which is great and now I'm trying to confirm the privacy settings as it's possible the privacy settings are very strict and it's not allowing local storage to work I'm hoping that that's the issue because if it's not I'm out of ideas and I'll probably have to go to this person's office and check the computer myself so hopefully I'll get an email back about that sometime very soon and for today's stream I'm gonna do some things with with cookies we could use local storage for this I guess it depends on what we want to do but I think cookies will be sufficient and we're gonna track whether or not a user has been to our site before if they have been to the site before we're going to show them a different configuration of the homepage then if this is their first time so let me show you the homepage first explain what needs to change and why and then we'll get into some of the code I do want to say thank you to those of you that submitted pull requests over the weekend I've been busy this morning and I have not gotten to review those pull requests but just a little bit that I did see everything looks great so I really appreciate that in a stream later this week I'll go over all this pool requests and and thank you all properly let's see also Harshit finished changing over the resource center project into an electron app so I'm running this now on a Mac so you can see this is it's all working I can download things from here I can send forms actually haven't tried to send the form yet but I'm I think Harsha tried and it did work so yes so this all works as it should which is awesome so I'm gonna do a little bit more testing about that and then hopefully get that out to users as an option so they'll heal her should also finish the react native app as well but I think that when I tried on an Android phone the download feature wasn't working so we'll have to work on that but it'd be nice to offer our users the option of having the mobile app or the desktop app instead of having to rely on their browser and that'll really help users that are having some browser issues with privacy settings or with using an older browser then they won't have to worry about it all right I don't think I've I had a few things to announce I don't think I skipped anything oh the only other thing I wanted to say at the beginning which is just kind of a fun silly thing so I have purchased the domain name JavaScript AF I'm not gonna explain the dot AF part of it if you know then you'll I guess understand why that's kind of funny other I guess you could look it up but I thought it would just be a cool domain to have but I'm not really sure what I want to do with it so I don't know if you'll have any ideas for what type of content should be on JavaScript AF let me know because I I'd like to put something cool on there related to JavaScript and have it be useful so yeah I don't know and if I guess if anybody really wants that domain I could just sell it but I I mean I if I can make some money off that that would be cool I guess but it would also be really cool to actually have a like a useful site Harshit says alert you can't run CloudFlare on AF domains this is bad it hurts to sell it to west boss he has basta si yeah maybe maybe someone will just want to buy it maybe I'll just put it out there on Twitter that I have it if anybody wants it we'll see maybe that could be my personal portfolio side do you think potential employers would think that's funny or would they would that turn them off all right let's see I think sorry I thought I got an email back already about that that issue but it looks like my phone is just behind is getting some old emails okay all right so enough of that let's get started oh I'll go back through when we take our break and reach some warrior suggestions as well and let's see oh I was gonna show you the site first okay let's do that I have it up on my other screen somewhere here we are okay so I made the last time we were working on this we had done this right so that's still there I'm working on adding in a form so that users can request us a mentor training session so I've put in all the server code for setting up a route for that form to go to and then sending it via send grid so I made a new API key if you're interested in learning more about that we did a stream on it earlier so you can go back through the title should be something like using the same grid API something like that and the code is now on the up the upgrade branch so I haven't merged this in the master yet so if you check out the repo in the upgrade branch the last commit was all the code that I added for this so that's available if you want it but today we're going to be working on the home page I'll probably finish up the form later today after the stream assuming I have time so this is what users currently see every user sees this what we're going to change is we're going to keep it like this for new users and then if the user is a returned user we're gonna bring this section up and we're going to display this section as the first section and then the video will be below it so it shouldn't be too difficult probably the most difficult part would just be tracking the user especially if if you've never worked with cookies or local storage or anything like that but I don't think it's going to be a big deal I think we'll get this we'll get through this in today's street so let's get to it let me bring over my plum adoro timer and we'll start it off if you're asking the questions in the live chat now I will get to the questions so just hang on for about 25 minutes and then I'll go back to the questions and answer as many as I can I can also start and grow up and I'm gonna paste a link into the live chat if you follow that link you can see the site as we're working on it when I change something you will see the change you can inspect it with dev tools alright so this was some of the service stuff I was working on let's make it bigger and then move to our our home page index all right I can move this over a bit and let me know if that's large enough so this our own page and for right now we're gonna do everything in this component just to save time might not be a bad idea to make you know kind of a utility component to use but for now this will work what I here's my plan what I think we'll do is in component did mount will check to see will check cookies I'm gonna try to do it with cookies I think but we could do with local storage let me know in the live chat if you see a benefit doing one over the other or if it just doesn't matter I don't really know if there would be any difference between them I know local storage you can put more data in but we really don't need any any data probably just your true or false is all we need but anyway the idea is on component did amount we're gonna check and then based on that I suppose we'll just change our state we'll just add some state here and we'll change the state and then depending on that we can change the position of there's this video but probably this yeah this whole section this whole div section will just change so we can probably should make this its own component if we're going to do that we don't need to if we're just testing but then at some point it would be good to maybe split this out into its own component so it's not taking up so much space especially since we're gonna basically double it Harshit said cookies would get sent to the server which is not required okay maybe we'll do maybe we'll do local storage and yeah which is cool I'm actually more familiar with using local storage than I am with with cookies the harsh it says cookies often get cleared okay all right so let's create a function which check user status [Music] it's how do I always forget to do a how to do an arrow function every time like this why I use arrow functions constantly there we go that's why I just forget the order I've been forgetting weird things lately like yesterday I forgot how to tie a tie for a few minutes I was just and I've known how to tie a tie for years I'm like a slightly afraid and probably irrationally afraid that I have like Alzheimer's starting or something because it does run in my family so now I'm I'm worried about it I really hope that that's not the case I'm only 32 is that even impossible all right so we have the check user status function now and we're going to check local storage all right I do want to do this in a way that to make sure that it doesn't try to do this hmm I don't want it to try to do this server side because we are doing server-side rendering so what does to only happen client-side actually alright I wonder about this so let me know in the live chat if this is not the right way to think about this but users are likely to come to index dodge is the home page first right so that's where they're gonna get a server-side rendered version of this page so we'll component did mount even run in the browser okay harsh it says component did mount does not run on server your right hard you know what I don't know why I was thinking that I mean we're logging a page view here weird initializing the tabs and this most definitely runs so all right I don't know what I was thinking there but this will work so we're good okay so we're gonna check user status and we'll put that in here as well so that will run and we're gonna do let's just put some some comments here it's gonna be checked check local storage or user let's see if true then display news first user to local stores and set state to false okay so let's let's actually this make state C return user so the default is actually going to be true I guess it doesn't matter what we make the default I was making the default true but that's just how I wrote it here okay uh Hersh it says this does make users does oh okay thank you hard I forgot to write this dot check user status right because these two were importing if you see where he's coming in blog page view and I'm porting an in tab strong I guess I'm not importing and it's just running in a separate JavaScript file but anyway that's why I can just do log page view without this but since we're defining this in here and then we're gonna use this if we end up making this its own component then or a utility function then we can take out this but for now good catch on that are okay so let's write some of that let's see local storage when you have to get item so how it goes tricky user returned user is true actually thing we don't need to do anything right we may as well do it set the state to true yeah because the user could navigate around and come back so I guess we'll do that you know what I'm gonna use a regular if statement for this true then say this it's states either that's true I need to do this that's good and then else oops and we need to do the local stores local storage set oops set item and we're gonna say return user so no we do it gonna be okay okay let's see all right so we're good there let's grab this why did I do that there that's not what I needed let's bring this here so we still need this to be so either way we're gonna set it to be true afterwards but if it's false so this else means it was false we're gonna add this here so up here we don't need to obviously because if it already found it okay that's good let's see Harshit saying there's a syntax error so have a syntax error somewhere am I supposed to put is it this is supposed to be a string yeah yeah okay okay that's supposed to be a string and I think this is actually supposed to be a string - whoops okay okay in the set stage is correct okay heart should sing that I should wrap the wrap the string in a json.parse okay where which one do I have to wrap in a json.parse essentially I'm not even actually worried about what the value of return user is because if it's false it's just not even going to be there at all so I just need to know if it exists so if that's the case I'm not sure that I I need to put well I mean at this point they ought to just try it out yes then at least it'll be easier for me to see with what the problems are so for now we can just check our state and dev tools to see what's happening before we do anything in the UI okay it looks like there's still a problem on line 33 all right what do I have alright Sim Sim Renji what's what's the problem with line 33 so this would be line 33 here all right oh the me window dot local storage so what's the problem with windowed local storage alright let's just save it and then did you see that Harsha did you see it it updated on save it formatted finally got that working thank you for that okay so let's check out hey awesome didn't get any errors very cool and let's go into dev tools and this will be cool if you've never done any troubleshooting with react and chrome dev tools I'll show you how to get to it so you can get the react dev tools so I don't even remember how to get this for Chrome to be honest with you I wish I did cuz I'd like to tell you but it was too long ago that I got it so check out the react dev tools I'm sure you'll it'll be high up in the search results alright so yeah - no let me make this bigger you all probably can't see anything alright so let me expand this we don't need this down here okay so you can see here this looks like your normal your layout of dev tools except these are all the components right so we do see some things like headers and divs and all that but normally in dev tools you wouldn't see all the component names as you can see here we this is our like root component and we can go all the way down here's our layout and let's find our trying to find our main component here it's a suit maybe not some trying to understate see where I stay loose to speak what did we call this component now it's just export default it's just index No I remember we call this maybe I will have to do something in the UI since I can't seem to find my state let's see this should be I had enough we should be somewhere between the nav main it's not where it's gonna be no heroes all right so this is weird I cannot I cannot find the state for that it's possible I'm doing something wrong it happens frequently all right all right harsh it says it is the class one that's what I thought it would be but oh my goodness how did I not see that harshly good job again I'm pretty sure we click that one before anyway I must have just been clicking too fast all right cool so you can see our stake for return user is true which is wonderful and now we can even check in local storage and return user is true wonderful so now we should be able to go in here do whatever you want to do with the UI and let me check my time two minutes we'll see what I can do in two minutes actually let's see if I can get this to work in two minutes I don't really think I can but it'll be fun just to try to do this quickly okay so here's our div and we want to now wrap this div in a ternary that's gonna say this state return user and if it's true then we're going to render this section nope I'm not if it's false I'm going to render this section so let's say the state return user if it's true we're actually going to render the news if it's false we're gonna render this section so let's grab the news down here news announcements okay early yet there we are it's at this stiff it's just think it's this one thanks you okay just copy that and put it here and then down here we're gonna do another ternary and that's gonna be if this state return user is not equal to true what the heck am i doing if if this state return user so if this day return user is false then we're gonna and then we're gonna render this stuff actually this would be so much faster okay let's save it aha I couldn't do it adjacent elements must be wrapped in a closed inside looks like I maybe took one too many divs we're not enough let's pour a div out and see what happens what did I do oh well my timer went off will troubleshoot this after we talk about this so oh well it was fun it was fun to try to do it quickly five minutes in the live chat and then we'll go back to it and figure out what I messed up I think the logic was okay it was just I messed up something with the closing tag a lot of you were saying hi so hey everyone thanks for watching alright real Vignesh says document dot get element by ID some ID inner HTML equals enter HTML plus one can you please explain this statement it looks like somebody was explaining so Dimitri says if inner HTML was a variable then yes this one yeah I'm I'm actually not so you're trying to set the innerhtml of an element with the idea of some ID all right so there's a few things that are weird about that so the some ID has a space there I'm I'm not exactly sure you could do that like it would have to be all together or there's a hyphen in between and then is inter HTML really capitalized like I is capitalized and HTML it could be I just I always thought it would just be lowercase I anyway and then inner HTML plus 1 so normally like what would happen there basically is inner HTML would come up as you're using it there it seems like it's a variable so it will come up as enter HTML zonda fine unless you've defined in or HTML earlier and if you've done that then saying dot inner HTML in your document dot get element by ID is is probably I mean I guess it would still work so if inner HTML is already defined as a variable beforehand and it's a number then that would just increase the number by one if it's a string you would just get the number one concatenated onto the end of it correct I don't know if anybody in the live chat can see that and has a different answer let me know but I think real Vignesh if you're still there and you have like a larger code sample that might help or if you have any response to any of that to clarify that might help all right so here are some ideas for my JavaScript AF domain let's see cloud says maybe fun little code snippets sub in says add cool JavaScript tutorial or should horseshit said sell to west boss Pedro says Don AF is Afghanistan yeah got AF is Afghanistan Clause says that could sell for a lot yeah maybe if it I mean at first I just wanted to buy it because I thought it was fun but yeah you're right I mean maybe someone will want it maybe it'll sell for a lot I just tell them it means at Franciscan yeah that's what I'll tell people at work that it means at Franciscan Andy says react is a good choice but I prefer angular for single page applications I think angular is good - I haven't really worked with the newer versions of angular at all though but I mean a lot of companies and good Deb's use it so I'm sure it's a good option as well John Hanson says doesn't it matter more to what each user expects to see as their personal view of the site cookies set this up easier than doing this in react which may still need a call to the server I'm not sure let's see how this works and see if there's problems with it and it we can always switch back over to cookies if we need to okay him Anshu asks what init tabs means all right let's go back we might as well start this again now we're getting back to the code anyway so here we have a knit tabs this is simply a JavaScript function that I have in another file and all it does is it initializes our tab system which we can't see now I can show you in the live site actually so we have our tabs here so it enables this now this seems really weird in react and it is really weird I don't recommend doing this but this is run by jQuery that's why we did it like that and it is not ideal and I'd love to switch it over to something more proper to react at some point but right now I just need to get this done as quickly as possible so I can get back to the main website project and have that done very soon so that's what it attaches though so I'm gonna get back to the project if I can find a pen I know that I don't have a pen anywhere I need a friend of hence I can write down where I left off sorry I guess it's not gonna happen because I don't have a pen all right blitz let's figure out what I did wrong so it looks like I messed something up with these divs so here's our index this is getting huge we will refactor this at some point hopefully maybe because this is just way too too large all right so here's our main let's scroll all the way up and see what we have after main here just say main main all right so it should be fine that stickiness that's humanity where's the end of stickiness oh there's the end of sticky nevets it's a self-closing tag all right okay so let's make sure we have this close properly we have this div oh this is yeah okay that's closing this out that's fine Oh I think I needed an extra div there okay so I need an extra div there and so down here let's make sure I have the right dose now it looks like I need take these two divs out we put them here let's save it now yay all right cool hmm oops I messed up in my logic all right so this is cool so this works it's up here and then down here we don't have anything so that part works the part I messed up with in my logic was we still want the video to show up we just want it to be below so let's go up to where we did that and what we want really what we can do is completely take this video out of here here we are there's more videos so let's take the video out and put the video here and then I'll clean this up a bit and what we need to do here is say this state return user then we're going to render that this is a little short circuit for your ternary there we are so now we should see a wonderful so we have the news right off the bat then we have our video and then the rest of the page wonderful this works good now let's test out what happens whenever we go back to being a new user just to make sure so we can go into react and we can go back to our component and let's change this to false and now let's see what our page looks like there we are so you can see now we've changed it to false manually and here's how our page looks and this is at the bottom whoa all right you know what that this isn't working only because we changed it manually because it needs component yeah so let's let's refresh so this works now and these do work and let me go I'm gonna use my let's use an incognito window to go to the same place why did it see that look willows should not persist in incognito correct all right we bring up an entirely different browser hmm I think I may have messed something up because here in Safari we have the same thing all right let's take a look back here what we're doing so we're gonna check user status if the get item returned user is there at least that's what I thought it was gonna be oh I never mind all right let's try this try a new incognito window there we are okay all right let me explain what I had done that that was just silly so what I was doing was I was setting the state to true no matter what so if returnin user did exist in local storage we're setting it to true which is correct but then if it didn't exist we're still setting the state to true which is not what we wanted right what I had done I believe was copy and pasted this from here and never change the value so we want to set this to false but then afterwards set our local storage to true now what I want to do is test this out again here let's still check ok all right so this is working and let's double check in another browser so I'm gonna put a firefox this time make sure it all works so let's go I don't know there we go 3,000 all right good so first time we're here we're seeing this and now that's let's go to an interior page and then let's come back great now we're return user right we've come back to this page again and now we have our other view wonderful alright cool so we verified it works we've gotten it to load on three different browsers awesome ok so I'm not the the holo reasoning behind knowing it like this is that the the people who are doing this site for really wanted users when they come back to immediately see what's new what's going on so that's why they wanted this here but they really really liked this video this video explains what this thing is all about so they wanted a nice introduction for new people but then they want to return users to be able to see this so that's when I there was a debate about what section to put at the top and I said well I mean we could just switch it based on whether the users been here already or not so that's why we ended up going with this jammed up being good because then we didn't have to debate it anymore we could move on to other stuff so anyway that was the point of this it works which is great and we got it done pretty quickly so not bad I mean I don't want to make myself sound really good but I'm just like I'm happy when things work out so quickly it's I'm happy about that alright so let's go let me go to the live chat and I'll have have some time to answer some questions so if you have any questions please put them in the live chat now and that's I can remember where it left off here all right I found it Muhammad says hello how's it going thanks for watching Muhammad says all I know is basic basic HTML but I'm a 3d modeler so I don't feel guilty so that wish I could learn this yeah well Muhammad feel free to ask as many questions as you want here I'll do my best to answer them and if you need me to go over something again I mean I can do that sorry alright there's a lot of talk about whether or not I was writing these functions correctly got it oh that's just hey tech says today's question is using cookies in JavaScript yeah basically we were I was thinking we would use cookies but we end up using local storage which is easy either local storage is easier anyway so that works maybe I'll go back and change the title to local storage it's sec a stood I'm using Visual Studio code today to my earlier videos I used atom a lot and now I've switched over to the s code they're both really good Lucas says hi Jesse my name is Lucas and I'm from Brazil I I like so much your your live your code is very good awesome thank you thank you for saying that I really appreciate that see Brooke says hi oh just got back from [Music] kanessa therapy what did I miss can easily repeat I don't know how to pronounce that type of therapy but anyway I'm glad you're back rook I hope everything's going well with your therapy basically we just saved some data to local storage we just wanted to know whether or not a user has been there or not so we really just could save anything we wanted to local storage and just check to see if there is anything in local storage for this domain and then based on that we show the sections on the front page in a different order sumon says Wow how do you maintain such a huge file I do the same thing to ya right now the file is larger than I would like so it's just it's just it makes it difficult the larger the file gets the more difficult I think is to keep in your head where everything is so it's just like extra cognitive load on your mind so I think smaller files are much easier to deal with so there are a few areas in this file right now where we could refactor and make it a lot smaller so I think that's that would be good to do maybe I'll put that in as an issue in the github repo and if anybody's interested you can take a shot at refactoring to be honest with you I'm probably not gonna take the time to refactor right now because I need to get back to my other project so this will be something at least for my to do this this will be something that's like hey if you ever have some time where you don't have anything that's due like right now go back and refactor this sathya says hey how about a session on material UI next with react is material UI next a thing or are you saying like material you I and next with react so we have done some sessions on material UI and next we're going to be we're going to continue working with material James says is this to show how to make a cookie yeah well we ended up going with local storage so local stories essentially does pretty much the same things as cookies doing in some sites I'm not saying they are the same but they are used in the same use cases frequently so we ended up going with local storage - not exactly cookies although in some browsers if you go to empty the cookies it actually empties out local storage well which is odd I think maybe like Internet Explorer does that and maybe like if you use CCleaner on Windows and you go to empty out the I think it's cookies I can't remember for sure but I have come across before that local storage gets lumped into the category of cookies which is kind of misleading I guess but sometimes that does happen I know says hello everybody hey how's it going yes all right I've got a question here in another language ready to google translate that let's see all right so I think maybe my Google Translate is not working properly because it says that the attend read just said what is India doing in the hey so I I'm not really sure I think I the translated it doesn't seem correct so so let me know what that that was really supposed to mean yet and rrah so it says the language is Hindi so if anybody knows Hindi you can let me know Sathya says just fold the code they copy them oh that would have been such a good idea okay I got a customer service Co here hello yeah yeah hey how are you oh yeah definitely so I'm when you come in the marketing department and you you make immediately make a left and I'm the first office there it'll say okay yeah yeah go to the middle down by the the seminar room and then there's that door to go into marketing and development everything yep and I'm first order left my name will be on there all right no problem all right so that's cool so the professor that was having trouble with the bulletin is gonna bring his laptop over here which is awesome because normally I have to go find other people at their office and I I do that just yeah the courtesy you know I say hey you know my sites not working I'll come help you just as soon as for dinner all right let's see all right you all Michael and hard you all saw my my problem before I did so thanks for that I should just looked over let's see ash says I thought this project was done yeah it it was done and launched but then we had a meeting and there were some updates that they wanted so basically like they're adding some things on that they didn't have before so offerings like they have his mentor training going on and they I guess they've gotten some feedback had some new ideas so there's a series of updates that are gonna happen some of them need to happen right now some of them can wait until later and are a little bit more complicated so I'm just gonna do the updates that need to be done right now I'm gonna try to do them now so we can move back into our other project which to be honest with you is is more important right now because it's going to serve a lot more users so it's tough to tell you know a client or somebody like hey I got other projects that are more important because everybody thinks their projects is important which is it's important to them it's true but I want to do at least do something so that I can so we can get some of the features on this site first and then move it over so today I'll probably be working on this site and then maybe tomorrow after I want to be done with it all I will probably have to wait on some feedback and content from them so I can't actually get this stuff live as soon as I want that's but that's kinda how it is I that's how it always is you know if you don't have the content you can't really launch Harshit says there is a delay in switching the views for new users as CDM is not fired immediately use my method all right so hard saying change default state to false and remove set state from else and change default state the Falls all right let's see they were react all right so remove this and then make the default state false okay I like that we got rid of two lines of one minor code just verified still gonna work yeah it still works open up incognito window oh yeah yeah just go in have a seat okay I'm doing a live show here so I'm just gonna finish it up oh it's nice you brought me some beer good didn't have money to go all right everyone so I have a professor here who I'm gonna help out with some issues with that bulletin project that we were working on before and anyway so uh I think I got to everybody's question on how I see your question you know what send me a direct message on Twitter or can you put that question in the comments and I will get to that I'll answer that sometime today and anybody else who has a question that I can't get to right now go ahead and just send me a DM or put in the comments so anyway thank you so much for watching I appreciate all the help it definitely saved me a lot of time I will be back tomorrow around 12 p.m. Eastern time and until then have a great day