Complete React Native Tutorial #23 - Creating New Records

Key Takeaways

All right, then. So, we set up this book's context in the last lesson, and now we need to start fleshing out these different functions inside it. And we're going to start with the create book one down here. Now, this function is for saving books to the database collection. And for this, we can use a method on the databases instance that we set up in the app file a couple of lessons back. So I'm going to say inside the try block const new book is equal to await databases and we need to make sure this gets imported from the app right file from the lib folder and then we'll use a method called create document and invoke it. So we use this method to save new records to a collection in the database and as a first argument we need to pass in the database ID which we added up at the top of the file before. So we can just copy that constant name and then we can paste it down here inside the function call. Now as a second argument we need the collection ID to say what collection we want to save this new record too. And again we added that collection ID before up at the top of the file. So we can just grab that and paste it down inside the function again. This time as the second argument. Now as a third argument we need to pass an ID for the record and we can use the special ID class given to us by the apprite package to make a new a unique one for us. So we can just say ID all in caps. Make sure that gets imported from apprite. And then we're going to use a method on that called unique to generate the unique ID. All right. And now we need to pass the data that we want to save as an object as the next argument. And this object is going to represent the record that eventually gets saved in the collection. So it needs to have all of those correct attributes that we specified when we made that collection. Now in the last lesson we said that this function should accept an object called data right as an argument. And that data object should contain the properties we need for that record. The title, the author and the description. So we can just spread those data properties into then this object. But on top of that we also need the user ID property which should be the ID of the user currently logged in who's creating this book. Right? And if you remember back to when we created these uh these attributes on apprint, we did that so that if we ever needed to fetch all the books that a particular user created, we could use this user ID to do that by searching for it. And we'll see exactly how to do it later. Anyway, for now, let's add this user ID property to the object after the data. And the value of this needs to be the ID of whatever user is currently logged into the application. So, we need a way to use that user state. And to do that we can come up to the top of this component and say const then curly braces and we want the user and that comes from the use user hook which we also need to import and then we invoke that hook. So this user remember comes from the user context and gives us information about the currently logged in user including the ID of that user. So back down in the create document method, we can use that user ID for the value right here by saying user dot and then it's dollar sign ID. So that's the ID property that apprite attaches to this user object for us. All right. So now we've passed the database ID, the collection ID, the new record ID, and now the data itself into that function that we want to save. Right? And there's one more argument that we need to pass in which is an array of document permissions. So you know before when we set up the collection on apprite we checked the option that said something like allow document permissions and what that meant is that we can apply user permissions at a document level so that we can restrict access to it on a userby- basis and inside this array is where we declare those permissions when we create it. So then to make a permission we use the permission class which comes from apprite. So make sure that gets imported and then on that we use a method to describe the interaction type that we want to set a permission for. For example, that could be the read method to create a permission for read access to the document. And then inside this method as an argument we can say who has access to do this thing to read it. And to do that we can use a role class again that comes from the apprite package. So make sure you import it. And then we can specify the role to be a user but not just any user. It needs to be the user who created this record. The user who is currently logged into this application doing this thing and we have access to that. So we can just pass in as an argument to this user method the ID of the current user. And now we've set a document level permission which only allows this current user logged in to read this document in the future. And that makes sense because if one user creates a book, we don't then want different users having access to that book. It's private. Okay. So now I'm just going to copy in another couple of permissions. And these are coming from my course files. I'm just going to paste them in over here underneath the other one. And these permissions just allow only that same user who is currently logged in to update and delete this record as well because we will be adding those functionalities in the future most likely. All right, cool. So now we finally need to invoke this function after a user enters the new book details into a form and submits it. And for that, we need to make a form on the create page inside the dashboard group. Now, I'm not going to waste your time by writing this form out from scratch. We've already seen how to create forms when we created the authentication forms. Instead, what I'm going to do is just copy some snippets from my course files and then walk you through them one bit at a time. So, first of all, I'm going to paste in the imports that we need. And you can see right here, we've got stylesheet, we've got text, we've got touchable without feedback. Not sure whether I've shown you that yet or not, but we will cover it in a second. We've also got keyboard um which we're going to use to dismiss the keyboard. In fact, let me open up the off screen. Take a look at these. So, we don't have it in the login, but we do have it in the touchable without feedback uh feedback and the keyboard as well. Yeah. So, we have seen how to to use those. Um so, we have those. We have the use books, use router, and use state. Then, we've got some themed components as well. All right. So next I'm going to paste in some state that we need inside this component. So let me do that right here. So we have a title, author, and description. They're going to come from input fields shortly. Then we've got some loading state as well, which we're going to update when we try to save the new book. I'm also going to copy a couple more things and paste them down here. So we have the create book function from the use books hook that gets it us from the context over here. This function, right? That's what we're going to invoke when we submit the form eventually. And then after that, I'm going to come down and grab all the template. Let me just copy all this and paste it down here like so. And if I scroll to the top, it's very simple. So, we have this touchable without feedback that wraps the entire thing. And we've seen what that does in the register form already. It just means that if we're within some kind of text import field and we click anywhere else on the screen, it's going to dismiss the keyboard. So that's all it does. Then inside that, we've got a view with some styles. We have some text for the title. Then we have a text input for the title itself. And we update the state, the title when we type into that. Same for the author. And then same for the description. only this time we set multi-line to be true because it's going to be multiple lines that this text input is going to be going down. And then down here we have a themed button and when we press that we're going to fire a function which we've not created yet called handle submit and then it's disabled this button when the loading state is true. So, if we scroll back to the top, we created this loading state, right? It starts as false, but later when we submit the form, we're going to set that to be true while it makes the request to save the new book. And that stops us then hitting the submit button again to try and make the request a second time until it's completed. Then, inside that, we have some text, which is white, and the text depends on that loading state. If this is false, then it's going to be create book. If it's true, then it's going to say saving to let us know that we're currently trying to load something. All right. So that is the template and in fact no we won't view it yet because I want to create this function up here called handle submit. So let's do that const handle submit and set that equal to a function. All right. So what do we want to do inside this function? Well first of all we want to check that we have values in each of these things. Right? And if we don't we just want to return out of the function for now. I mean, if you wanted to, what you could do is show some kind of error. I'm not going to do that. I'm going to skip that part and I'm just going to return out of the function and not do anything else. So, let me paste in this if check that says if title.trim. So, we're trimming any white space. If we don't have a value for that, or the author or the description, then we're just going to return out of the function. We're not going to go any further. We're not going to try to save the new book. All right. So, the next thing we want to do is set the loading state to be true. So let's say set loading and that's going to be true because at this point if we reach here we know we have values for each of these and we're going to try saving the book now right. So we set loading to be true and that means that the button down here while loading is true is going to be disabled and also we're going to show this text inside the button. Okay. So after that we want to create the book. So we'll say await and then we're going to use that function create book that we just created and that comes from the use books hook. So we invoke this and we pass in the data. If we go back to the context you can see we expect that data. So it's an object with the title, author and description. So title, author, description. They're all stored in those pieces of state. Now we're getting an error here and that's because this is not an asynchronous function yet. So, let's make it one async. And then after this, once we've done this, and we're not going to do any error handling inside here. We're just going to try and do this for now. But after we've done it, we're going to reset the fields inside the form. So, let's do that. Going to paste this in. And all we're doing is setting the title, author, and description back to their original default values, empty strings. And when we do that, because we have this two-way data binding using the value prop, it's going to update those forms to or those form fields rather to be those empty strings. So we're resetting the form and then once we've done that, we want to redirect the user. So comment to say redirect and then we will use that router that we used right here uh that we grabbed rather and then use a method on that called replace and we're going to replace to the books screen. So that's this screen right here. And then finally, we need to update the loading again. So we'll say reset loading state. And to do that, we'll say set loading to be false because we're finished now. Okay. Now, the final thing I want to just paste inside this file is going to be some styles. So let me grab those from my repo. This is not really important. You've seen how to style components before. So let me paste them in. We have one for the container heading for the input fields themselves and also for the multi-line one. If we go up here, you can see I give this one a class or a style rather of multi-line. That's for the description. So, we start that a little bit different. All right. Okay. So, let's save this now. And then I'm going to head to the profile first of all. And I need to login. So, let's log in. Um, I think Bowser was an account at ninja.dev, if I can spell it. And then test one, two, three, 4. Going to log in. All right. So now we can go to the create screen. And I'm getting an error. Okay. So it turned out that in my use books hook that I created earlier, we didn't rename this to use books, which was really silly. So now if I go to the profile page and then create. Okay, cool. So now we can see that form and I'm going to try adding a new book. So let's say name of the wind by Patrick Rothfus. And I'm just going to try this keyboard dismiss by clicking somewhere. Yeah, that works. And then book description. A rather good book. All right. Very detailed. And then I'm going to try creating this book. Hopefully, we're going to get redirected to the books page. When we do that, yeah, we did. And I don't know whether you saw it. If you were eager eyed, you might have seen that little loading message on the button itself when we submitted the form. And now on the project back end in app, right, I'm going to go to databases and check inside this collection that a book has been added. So books. And yeah, we can see it. Name of the wind. Awesome.