React Project 2 Day 13 - Live Coding with Jesse

Key Takeaways

hey everybody it's Jesse and um I hope you all had a good uh good weekend today we're going to keep working on our server uh. JS file so last week we with at least at the end of last week uh we got our file uploads working and we also got the emails working uh with sand grid so the next step is to send data to our project management system which is Reich uh through their API so um they have if you want to check out you know what I'm going to be looking at on my other screen Reich has uh documentation so it's uh developers. re.com uh so I'm going to paste that in the live chat just in case anybody's interested in checking it out hey Sebastian's back in the live chat good to have you back how you been all right and just to show if you see something like this this is the documentation that I'm that I'm going from so Reich has a um a rest API I've already set up all this stuff so we have the API key uh in the M file so you all of course won't have the API key uh but so this obviously is not going to work for you uh if you try to run this uh but that's what I'll be working with I'm not sure if there's a free plan on Reich or not um yeah I really don't know so I'm not sure if he'd be able to sign up for a free account to test it out all right cool last week Sebastian was working a concert and said 12 hours a day standing in the Sun so yeah cool now you can uh hang out inside and watch computer screen back to normal huh hey how's it going everybody oh cool Ocean's back too awesome all right so this is going to be a short stream today because I have a meeting at 300 PM eastern time uh so that is in less than an hour uh so I was kind of hoping that I wouldn't have the meeting uh I have kind of a standing meeting every Monday at 3 p.m. but it often gets cancelled or postponed and things so I was hoping that would happen today but it didn't so probably we're going to do maybe like one commodo cycle of coding and then some questions uh question answer stuff and then I'll be done so uh this would be way shorter than normal but with more within the range that I always kind of shoot for Which is less than an hour uh I never seem to accomplish that so I'm not going to go over uh any of the code that's that's changed to the pool requests um so I think we had four pool requests over the weekend all from Kevin so thank you so much Kevin you can check out if you go to the repo and you go under pool request look at the close request and the last four so it'll be I think the last one was number 30 uh so just look at the last four and uh you can check it out so you'll see the only thing that I'm going to point out because it it may be helpful is we have an example file now for a EnV so obviously uh the normal. N file is not going to be saved because that's where all the API keys are so we don't want to share those uh so this is here just to let you know what should be in that file just give you some examples and I'll have to add to this because I've I've added a few things in which obviously Kevin couldn't see because it was in my uh n file so that might be useful just so you kind of see how it how it should be set up this is actually much more orderly than mine okay and uh I have my I actually have my n file open on my other screen to make sure that I don't accidentally look at it uh and then have to go change all my keys uh but we'll be working today mainly just in server JS uh yeah I don't think we have to do anything in the service request Js while so I'm going to move this over a bit make this bigger uh I'm even going to hide that since we won't need it so let me show you what I've been working on uh really not haven't done much this morning um I caught up on checking out the pool requests merging them emails uh it's kind of a sluggish morning I still feel a bit sluggish I'm not sure I hope I'm not getting sick or anything I just have haven't made been able to shake off just sleepiness from this morning uh but so here's what I've done uh I've made well in mym file I've I've put I think all the things that I'll need to get the Reich API working so the URL that I need to hit the um the API key and then some IDs for uh for people that we have in the system so I I want the way the Reich API works is anything that ha anything that I do through the API is registered to my account so it will show up like I'll be the owner of any projects that get created or tasks but I want our project manager to actually have access to that and be able to have do whatever uh she wants with it so I need her ID and I need to put put that in so you'll see when I when I go to send this this first request to test it out uh you won't be able to see her ID but cuz it's in the as an environment variable but you'll see where I need to have uh that ID in there so for the first step we're just going to try to send something I'm not even going to try to pull in the real data I'm just going to send something uh just to make sure that it's working uh and then after that we can try to send real data from the form and we can also send the files so that'll be tricky I'm not sure if we'll have enough time to get to that because we have to wait for a return from the API uh and that'll give us the ID of the project and then we'll use that to attach the files to it okay wow Sebastian says was trying to sync uh his fork with the repo but when I commit it keeps failing test manage to bypass the test and push but still okay is anybody else having issues like that if you are let me know oh um yeah I don't know I mean maybe send me send me a screenshot of if there's if there's any messages when you fail the tests or anything and uh maybe I'll have to talk to um maybe I have to talk to Kevin about it as well because he's been setting up the test and I've been trying to learn as much as I can from what he's doing uh but he'd probably know better than I would uh since he he set the test up okay Patrick says it's the timeouts okay okay good to know uh well maybe then okay maybe uh I'll have to check those out then okay cool all right okay let me get some code let me do at least one Pomodoro cycle and then I'll go back to the chat and um and then uh I'll answer all the questions and everything okay so let me reset all right so all I'm doing now is uh I'm going to send a post request uh to the API so I just need to put in everything necessary for that request uh to go through so let me see I have okay so on my other screen I have the current request that I'm sending from the live version of this uh with Ajax and I'm not going to put it on my screen because it has the the keys and everything in it you know just in plain text so I'm just going to actually going to have to type it up uh because I don't um I don't want to copy over the keys so let's see for the body I don't I guess I don't really need to put put anything right now uh actually maybe I maybe I will I might have to do this in a particular in a particular way okay so let's try so a lot of this stuff if you're watching and and you're kind of not familiar with doing things like this a lot of this is not going to be necessary every time you make an API call somewhere uh it's just this particular API requires things to be uh in this format so just don't want to don't want to mislead anybody to think you have to have all of this uh to do a a post okay so this where this description is this this is where our form data is going to actually go which for now we're just going to test it with just a string oops okay now this is where we're going to need to put the ID and it needs to be it's a weird format so so it needs to be an array actually let's see how we're going to do this I think I'm going to use a um a template literal yeah this I had trouble with this when I first when I was trying to get this to work before so this is going to look really weird uh but this is what ended up working for me so hopefully we can maybe clean it up AIT bit but for now just uh I I realize that this is going to be weird actually maybe I can get I think I might be able to get rid of those first ones okay okay when I type process.env that's going to let me access whatever variables I have saved in that EnV file uh so always you know it has to be process M and then after that it's whatever name I wanted to give it so I don't remember what name I gave this so I need to check what was it right share ID okay so this is going to be uh the ID the user user ID of the person that I want to share this project with and then we're also have project and we're going to create the project with let's see all right so almost done with this this is probably going to be be like the most tedious boring part of this I'm almost done okay I think I'm done I think that's all I need for now uh at least in this part okay everything else is going to make a little bit more sense but this was like I said very unique to uh the Reich API uh so anyway one of these things in a very specific way so this is what ended up working so hopefully I copy that over correctly uh I need to add headers so let's see we have the URL method body yeah I need headers and then our API key is going to go into uh the headers so Let's see we just we need a bearer authorization okay and uh if you're not sure what's going on with these dollar signs uh I'm not using jQuery this is template literal syntax uh so when I use these little back ticks uh it's a string just like if I was using you know quotation marks but then within the string I can do dollar sign curly uh bracket and then I can put Javascript within there okay so instead of adding a lot of plus signs and concatenating everything we can do it like that and for this one I'm going to need my last whoops forgot this I'm sure you all saw that I'm not even going to look at the live chat right now because I'm sure it's full of people saying that I forgot it okay and here's where our API key goes okay let me do one last check make sure I got everything I think that's it I think that's all that I um this is all I was sending uh in the other version of this uh so and it's working there all right so let's save that and for now it it has everything I don't really have to pass anything in here um so let's just have it [Music] run uh when we submit something so let's see so we'll do it down here below where we're doing emails uh so let's do I don't remember what I named this send re and I guess I'm not going to pass any yeah I don't really need any data in there right now let's see so let's see what happens and I think I have everything on my other screen right now let me find it I'm not sure where there it is have a lot of stuff okay uh let me just refresh to clear some of this I don't really need anything in here so let's submit and I'm going to check I have my the project management uh system open on my other screen and I'm not going to be able to show it because I'm pretty sure that um my bosses would not want me showing all of our projects and the comments on all of our projects on the screen so I'm just going to verify on the other screen that this sent and let's see what would now I gota see what would I name this it would have came out as okay test so could probably all right so I'm not I don't think it worked occasionally it does take a minute for this to show up so I'll check one more time okay yeah so I don't think it worked um yeah Patrick I know I'm I'm hitting uh 9,000 and the problem was just uh if you remember I have that Coors eror on 3000 and I never I never fixed that I actually I checked into the uh plugin uh that someone I can't remember who it was but someone had recommended a plugin uh for Chrome to get rid of the cores error stuff uh I checked it out and um it looked like for some people it worked great and for other people it it messed things up like YouTube wouldn't work for them or just all kind of different Services wouldn't work for them and since I'm running YouTube to do the stream while I'm doing this I didn't want to add the plugin so what I think I'm going to do maybe is um uh if I need to test it I'll just test it on 9,000 or I guess I could do 3,000 on Firefox since it works there um but I shouldn't need I mean as soon as as we have this working I shouldn't really need to test it out anymore so it really won't be a big deal I can just run everything off of 3,000 but for now it just seemed like uh just easier just to do it you know for the few times that we'll need to test it I mean probably only be working with this another day or two uh and then we'll just move on to styling everything uh and adding in the the proper content Okay so let me actually let me see if I have anything in the console I want to try to do this no not okay let me see all right let's see what response we're getting okay I forgot to uh mention I do have the Instagram stream going as well and if you are watching right now on Instagram and you want to see the code check out the free code Camp YouTube channel and then you can see what's going on on my screen screen all right I'm just copying over uh some of what's in the um the documentation for node fetch okay let's give it a shot okay so oh I didn't let me bring this over so yall can see what I'm seeing here so I didn't sorry I didn't realize it I kept looking over to check the uh the console to see what was happening uh so our parameter title is required and it's an invalided invalid parameter so let's check it out so we have title and it's telling me test is invalid all right let's see what I'm currently sending currently I'm just sending a string that's an email address uh as the title okay actually let me check did I bring over the [Music] documentation I think I pulled it back to the other screen uh let's see okay on the in the documentation it does say that it needs a title but the title uh can be a string and that's that's what we're sending right now that's the response we're getting create folder that's what I want okay it's still still a string so this is an example formatted poorly of what I what I actually need to send okay title yeah they're even using test is the title so what am I doing wrong I'm doing something wrong oh cool Patrick says Reich is free for up to five users so if anyone uh really wanted to try out Reich and get get an API key uh I guess you could I'm not sure if the API is available for the free version or not hopefully it is all right so I'm I'm really not sure what the problem is let me bring all right I'm going to show you all what the settings are uh that I'm currently uh sending h on all right yeah let me I'm going to need to clean it up a bit meaning take out all the stuff that the API keys and then I'll I'll show you all okay okay let me show you all right so here's using Ajax these are my settings uh that are working anywhere that it's you see that it's blank that's where um was something that's now an environment variable so just assume that I did have the right thing in there uh so this is the area right right here where we're having trouble and you know this variable for email was just a string with someone's email address in it so you can see I've attempted to replicate everything well pretty much everything I left out a few things I just wanted to see if it worked without it um yeah but see basically what I'm wondering about is if I'm simply missing something between the difference between using Ajax to send this and using fetch to send this if I'm missing something or formatting it wrong although based on the error it does seem like I mean let's show this error again as well I mean it seems like it's hitting the API in because we're getting this description back of title is required uh and it's invalid uh so so anyway I'm basically just not really sure what to do from here so I'm going to give you all just a minute to check that out and see if you have any ideas now now that this is happening I remember it's all coming back to me now I remember working with this API before and having a lot of trial and error uh of trying to get this to work I mean the the biggest difference that I see and I'm not really sure why it would make a difference maybe it wouldn't at all is uh I'm using double quotes everywhere over here and single quotes here and the only reason I even thought of that is I know at least in Json you have to use double quotes um is it possible that that's my issue okay so uh wolf says maybe you need uh to escape the quotes on title yeah let me see I'm not or send something is like uh yeah so the fet are making this easy to read objects in Jon string okay so Patrick says try making those easy to read objects and then Json stringify them I got three they're all in here thank you all right so Bas so Patrick you're saying this part should then be an object that's stringified and then I just pass it in obviously in the same spot or just this part then yeah I think it's you're talking about just this part okay all right cool thank you all right so let's make okay so temporarily we're going to do this I'll all right have a good one okay okay Gavin says that um it's recommended to stringify the body so okay so let's try that I'm sure youall let me know if I did this wrong but we'll give it a try and actually this will probably be or last try whether or not it works uh because my timer is definitely gone up a few minutes ago uh and I want to make sure that I get to your questions uh at least as many as I can before my meeting uh same thing all right let's see all right now I said that was going to be it I'm not going to try anything else um okay Patrick says now get rid of the template literals may need to remove the quotes okay uh let me see what time is it yeah let me answer some questions and uh I'll work on this more later on uh so actually so um Gavin asked is the API expecting the title to be an email no I I don't think so I think it could be well based on the documentation so we had it up on the screen what' I do with it so based on the documentation uh it it's just a string so the only it just can't be empty uh but we just need a string so I mean according to that I mean that's that would work so I mean the these are the parameters that we need and we have so basically this is we just need Title really all this other stuff we don't even need yet uh just to test it folder yeah all right we'll have to try either later on today or uh tomorrow morning I'll try out just all kind of different stuff and see what works uh that's what I had to do the last time don't have quotes on the PRS okay let me uh MFC I'm going to copy your uh the link that you posted in there and I'm going to check that out uh after my meeting probably not after I'll probably have to leave right after my meeting so I'll have to work on this tomorrow morning oh okay remove the quotes from let me try this one thing then actually this this might be the problem and this might this will fix the problem maybe it makes sense I probably don't have to refresh this but I'm just like why not I was doing it before to clear out the fields but now I'm not even using them really want to make sure that this is actually running okay it is yeah and we're still not shoot [Music] yeah all right one more we'll try double quotes let's just see it's possible it's possible they're looking for double quotes yeah parameter title was required parameter yeah maybe maybe I I kind of think now that it's something like maybe I'm not yeah I'll check it out and uh the problem at least I've seen with the Reich API the only thing I don't like about it is it doesn't seem that there's that many people using it because I can't find a lot at least when I worked with it before I couldn't find a lot like on stack Overflow about it so I'll try to look it up tomorrow morning and see if somebody's had similar issues but I'm not really hopeful that I'll find something uh so I don't know what it is if it's just a not not a popular system or people just don't use the API I'm not sure uh but I'm going to check out uh the the links and I'm going to try out the I know there are other uh suggestions and things uh in the live chat so I'm going to check all that out and let me go through now and just see what questions if you have any questions for me uh put them in the um live chat now probably can only take about 10 minutes of questions today yeah okay I just saw wolf that's exactly what I was thinking uh wolf says it sounds like it's not receiving the data section at all that yeah that was my last thought uh after we after we tried to double quote so I I thought maybe it's just not getting this uh because it yeah so it's possible that's I don't know that's what I'm going to check into is is it getting this at all and if not why not okay so I'm going to scroll back up see if I missed any questions and this feels so Rush since I've been doing like 2hour long uh shows lately but this is actually longer than I I originally was doing half hour streams now thinking about it I'm like how did I get anything done in a half an hour but when I started sometimes there was maybe like nobody watching or just one person so the the question answer sessions were a lot shorter uh Hamed says demo deployment on Heroku might help a newcomer like me uh yeah actually can I deploy this yeah maybe I could try to deploy this I think you can deploy create react app stuff on GitHub pages that would probably be the easiest yeah I'll have to think about that oh also I didn't fire up the uh the enro server today and that was actually on purpose um so I was thinking and correct me if I'm wrong if I ran this on enro and someone tried to use the file uploader they could potentially upload files to my local machine correct so if that's correct uh and especially since we don't have any type of security set up to like check the file type or anything uh then I'm probably not going to run enro while we're working on this and then once we get it working I'll just disable it and then run enrock and work on the rest of the site uh Sean says keep the videos please I'm catching up awesome uh yeah I'll definitely definitely keep doing the videos uh and they'll they'll be available on free code Camp's Channel okay Sebastian I saw that you just now that you shared uh a link to the photo I'm guessing of the error errors that you're getting um so I'll check that out and try to get it all um I'll try to get that working uh with the test this is too bad I think um it doesn't seem like Kevin is watching today uh so I was hoping to be able to ask him about it uh Peter says thank you so much for what you're doing you're welcome thanks for watching in okay going through almost to the bottom there's actually not very many questions okay I see Gavin I see your comment now about using curl just to check to see that the API works so the API is working so I have it I have it running basically this this but in the form of I'm using Ajax instead of fetch so I have that running uh on the live version of this site and it works uh so I know the API Works uh I get we get submissions on it every day uh so that's uh that's definitely working uh Matthew asked what is he doing exactly uh Patrick uh had a good answer basically I'm trying to integrate with the project management API yeah that's that is what I'm trying to do the uh the project management system is called Reich Okay evan says you could try double quotes on the Pam names maybe uh because I had that in the settings on the right yeah actually that I did have that in the settings so um yeah I'll have to try that next oh okay so wolf says what if it has to be something like this and let me show you I'm going to copy and paste this over so wol saying what about something like that so body and then data Json stringify test body um yeah maybe I want to see how if this was in a field actually maybe that'll work yeah I'll have to try that uh erery 33 says love the stream and all that FCC free code Camp does are we able to create our own streams uh SLV videos about free code Camp as well uh you can certainly do it um on your own channel uh if you wanted to be able to stream on free code camps Channel or do videos then uh I would get in touch with Quincy um so Quincy is uh at freecode camp on Twitter uh he runs that Twitter um or I'm sure you can get uh on the freec Cod Camp website there's a page where you can get contact info for all the different people that are in charge of various things I'm in charge of nothing except my own stream so uh I can't uh give any permission uh to anyone uh to do videos but you can certainly ask about it and see um if if that's a possibility okay Gavin says I think I'll try to follow along with you using my company's project management jira I have to start from day one though yeah um that's cool I'd love to hear how that goes so keep keep me up to date on how everything's going for you Gavin um yeah there's a lot to catch up on once we get into a project I always know noticed that uh the view count so day one of a project always has like by far the most views and like every day after that it seems like it drops a little bit occasionally depending on what I'm working on I guess it it will fluctuate but the the farther I get in like less and less people make it that far to catch up with everything so um like I think day one for this project has like over 12,000 views now and then the last one we did on Friday has maybe like 1,200 views so it's uh I guess try to get through I know who is it I don't know if Bill's still in here but Bill's will watch sometimes on like four times speed you're able to watch it on which is crazy I wonder how I sound on four times speed oh okay Patrick says Json stringify is handling making uh valid Json with double quotes so it shouldn't matter what I'm doing with the quotes because it should be formatted correctly oh okay cool good idea Gavin let me just write this in here now so I don't forget uh actually I'm just I won't have time I got to go to my meeting in like two minutes so um I'm going to paste that right here so that I don't forget and I'll leave this up on my screen when I leave today so when I log in when I come to work tomorrow I turn uh I never really turned off my computer but when I uh when I log in and this shows up uh then I will remember and I will try it out all right let's see okay wolf says uh the 2hour length on the video is somewhat intimidating this is the first one I'm watching oh welcome uh thanks for watching um yeah I know the length is is intimidating um I had I don't know at various times I try to get it short to be shorter but seems like we'll be working on something and I just want to get it done so we'll keep going or even if I get something the coding portion done you know relatively you know kind of on time then I'll have a lot of questions so if I really wanted I'm not really that worried about it if I wanted to be more disciplined I guess I would just cut it off at a certain time and even if I didn't get to all the questions and I may have to do that you know if there's enough people watching and asking questions at some point I'll just have to cut it off CU I you know I wouldn't be able to answer it to be hours and hours so uh we'll see I do I think I definitely want to start getting it back down towards the 1 hour and not go over two hours anymore so um anyway but I I'll take that in consideration because I've gotten similar uh comments about the length is just it's just really long okay let's see hey Kevin's here how's it going uh okay wolf wolf says I think it's excellent that they are that long just think it has something to do with your view counts yeah yeah you're right all right so I yeah I have two minutes until my meeting starts so I definitely have to go uh if you do have any questions just send them to me on Twitter put them in the comments of the video I'll try to get to him as soon as I can thank you so much uh for watching today and for helping me out sorry we couldn't actually get anything accomplished uh but hopefully I can get it all sorted out tomorrow morning and then show you uh how I got it to work for tomorrow's video I think 2:00 tomorrow will work uh so I will see you then have a great day