How to Create Read and Update AppSync with React - Serverless SaaS Build Series 2.9

do you want to learn how you can create and update posts in your applications in this video that is exactly what i'm going to show you how to do [Music] hi guys my name is sam with complete coding but our aim is to make you into the best developers that you can be in this video we'll be looking at the last week's progress on our linkedin automation tool where we've added the ability to create new posts as well as update them so let's jump into the code and see what we've done in the code we can look at what i did first this week and that was to add the ability to add a new post so i did that by first going into routing groups and finding our signed in root group and here what i've done is i've added a new route for add post with an edit post component inside where we're passing in a create flag the reason i've done this as an edit post and not as a specific create post is that when you edit a post and when you are creating a new post the ui is going to be exactly the same so instead i can just pass in a different flag which will change some of the saving functionality later on so if we pop into this edit post there's a lot of stuff here so i think it's best to show you how it works first over in our app we have obviously a title of create post and this is dynamically created so if you're doing an update it will say update post we also have the option here to save it or save it as a draft and that will then trigger this to be uploaded to the back end so as well as that we then have the title of the post which is an optional value i've left this to be optional because you might not want to have to add a post title to every single post you create then you have the input box this is where you can type your post and it is just at the moment a simple input box i've also added a character counter on the bottom as linkedin has a limit of thousand and if you get to that limit this turns red and also the validator will not allow you to create a post longer than three thousand characters the last thing is this type option so this was actually relatively complicated to build so if you click on type you can choose either a group post or a scheduled post so if i click on group post you can then get a list of all the groups for this company in this case there are no groups so the only thing we can click is back but if you did have a set of groups you could just select the group if you choose a scheduled post it pops up a little date picker like this and you can either enter the date manually or tap on the calendar where you can then enter the date and the time that you want this to actually be published once you've done that you can click ok and that will actually store the date in here and that is what we're going to use as our publish time or in the database it's going to be our ttl we can always click on there and see the full date and time and if we click select date again we can open this up so that we can edit it this is always changeable so we could go in this here again and set it to later on and i'm going to set it to eight o'clock so there is some validation in here so if we try and save the post when there isn't any text it doesn't allow it it also doesn't allow a post to be saved if there isn't either a published date or a group selected once you've added a set of text to your post so this is a new post and you've got a scheduled date you can then save it now this paste is saved in the future it's going to redirect either to the home page or redirect to a view post page but for now i can just go to the home page and if i scroll down to the bottom of my of my posts i can see that this is a new post which is the one i have just created hence the date and it is scheduled for the 27th as i said in the previous video if you don't provide a title it will use the date that the post was created so let's jump into the code and see how we've done that so in here we have quite a few things that are stored in state so the title and the text as well as a post config this post config object is what i'm going to use to store the group or the schedule as well as a couple of other things that are required for that menu section i also use the selected company so if you change the company that you're working with a this will be repopulated and i actually have a use effect in here so that when the select selected company changes i go through each group and i store the group id color and name so that they can be used inside the menu drop down if i scroll down to the right the way down to the actual react section here we can see we have our header we then have our menu option where we have a save button and on here we have the ability to save where we're not passing anything in or if we click on the draft we're actually passing in a draft is draft of true which is how we differentiate between draft posts and normal posts next we move down to the vertical stack where we just have an input for the title then we have that drop down menu where you can choose whether you want to have your post to be assigned to a group or to a schedule and i'll show you this logic in a second finally we have the text area and the counter at the bottom which shows how many characters you've used so in here we have this menu system so because this is all dynamically created i've created functions here to populate those fields so the menu itself will be populated with this post type value function where if there is a group selected then we're going to return the name of the group if there's a schedule we're going to take that schedule convert it into a local date string and take the first five characters which is the day and the month finally if there is a type set but there isn't a schedule or group it's going to return type and that is it so now we go back down to that function all the way down here we also have to populate the options so in a similar way to the title i've populated the options with a function so here if the options if sorry if the post config type has been set to group so if you've selected group in your app so if you've selected on group post then we have a menu list with a group title of choose group or if there aren't any groups it says no groups and then here this is where we are going to use that groups object we have one button or one menu item for going back a stage which just resets the post config and then we map over each of those groups to get the group id and the group data and create a menu item for each of them if you click on the one of the menu one of the groups it will set the group to be that group id and that is all that we need to do similarly if you set the type to be schedule then we have some different menu options first if there's already a schedule set we want to have a title of that schedule so that you know exactly when your post is scheduled for we have the ability to select the date and this is going to call a function called set date picker open which is going to open up a modal which i'll talk about in a sec and finally another back button and this just as before sets the type to undefined and the schedule also to undefined basically setting you back to the start finally if there are neither a group or a schedule selected then you need to choose your post type and you can either choose group post or scheduled post clicking on either of these will set the type to be group or the type to be scheduled and in this case that is what is going to actually cause the change in these if statements to change the options inside the menu now i talked a little bit then about the set date picker open so this is again just a state with a boolean but that boolean is then used right at the very bottom of the page and we are using an modal so this modal is a full screen pop-up which uses that date picker open to define whether it is shown or not and inside here we basically have an input with a type of date time local which allows us to set not only the date but the time and when you click ok that sets the schedule in our case i'll show you that so if we click back go into scheduled post this is the modal i need to rename this title and then you can click on the input of date time local which allows you to set the date and the time clicking ok sets that into our post config so that it can be used when we save our post so now we've looked at quite a lot of the functionality let's go all the way up and have a look at some of the other functions so first is save post what we need to do in here is if the selected company doesn't have a company id then we're going to throw a little error and these errors are actually caught inside a try and then we use toast which is a little pop-up and i'll demonstrate that now so if i try and click save you get this little pop-up at the bottom which is called a toast you can then close that if you need to and that is how i'm showing errors inside this app if there is a company id on the selected company then we do a couple more checks this check is actually for an update so if we've passed an id in then we're going to update the existing post but we'll get back to that in a bit if this is a create which in our case with a new post it will be we create a variables object which is then going to be passed into our graphql mutations we validate that and this just goes through some checks such as does is there a text is there a group id or a publish time because at least one of those is required and if any of them do fail then it's going to throw up a toast finally we await the call to graphql using create post and passing in those variables after this this is where we can put our redirect to home page but deciding on that is for a next video as i've shown before we then create a default title error and if it's a known error then we change the title and show that toast so that is how we are saving a post so the next thing to do is update an existing post first thing i did is i had to go into the signed in routing groups and in here we've added another one of post slash post id and this also goes to edit post to get to this route i had to update the posts table and in here each post has a clickable header so if i go all the way down to here the horizontal stack which in our case contains the avatar the title and that little bit of info which i'll show you now so if we go to our home page this whole bar at the top is editable or is clickable should i say so if i click on that it redirects me to post slash post id so that we can edit that post if we go back into our edit post so in here there's a little bit of extra logic that i added to get editing working first we try and get the post id from the parameters and this is obviously optional because when we do a create we don't have a post id but when we're doing an edit we do with this post id we have another use effect where we first check there is a post id and if there is then we get post for update this is a neat little function where we basically call graphql saying i want to query on this post id we get back all of the data and we take out the group the ttl the text and the title we map them slightly so that the type turns from ttl or group into a scheduled or a group post and then we populate either the group id or the schedule because the schedule in our post config is actually an iso string we need to take the ttl times it by a thousand because dynamo's ttls are in seconds not milliseconds and convert it to an iso string we also set the text and set the title and then we have basically the full view of the post with all of the details pre-populated we can then edit this however we want so we could change that line and if we click on save and save this there's going to be a slight change in the logic so if i find our save post section here with this time when we come through to this stage if post config.post id in our case now that we're updating this will be true so we have some slightly different update post parameters we pass in the post id but we don't need to pass in the company id anymore as well as then passing in the text title the group id and the publish time if they are valid we validate some of those again and then we send that to graphql but this time to the update post mutation so that is how we are able to create new posts and then also update them using the same component this is really neat as it saves you from having to create a lot of the logic in duplicate i will go through and do some tidying up to remove some of the code such as these menu options and moving them into their own component instead of being all in one big file but i don't want to have to bore you with that tidying up so i'll do that before next week's video in this video we've looked at how we can add the ability to create new posts and work with our graphql api as well as update existing posts and do that all within a single view this is really nice as it allows us to incorporate the same logic into both places which reduces the amount of code that we actually have to write and saves us from building the same components multiple times if you've learned something new in this video or if you think this project is a really cool idea it would really help me out if you hit that like button as it shares it with more developers just like yourselves and if you haven't done already make sure to subscribe down here as it makes sure that you get notified next time that i release a video on this series so thank you for watching and i'll see you in next week's video

Channel: Complete Coding

Views: 354

Keywords: AWS, serverless, Serverless Framework, NodeJS

Id: C2gcewyIYyY

Length: 20min 52sec (1252 seconds)

Published: Thu Jul 08 2021