Okay, let's work on adding new tweets. So when we hit this button here, we want to be able to add a new tweet here. So I don't have often place yet. So we'll just hard code a user for now. And once we have often place, we'll go ahead and update this. So let's start on the backend and create an endpoint for creating new tweets. So let's do that first. It's a post request, we'll say tweets, and this should accept the request. Let's make sure to import request, okay. And let's add some validation here.

Let's make sure to import request, okay. And let's add some validation here. So request validate. And we only have one field, it's the body, and let's just say required, okay. And then we'll create a new tweet here. So tweet, create. And like I said, we don't have often place yet. So we'll just hard code a user, we'll just say one. And the body is going to be the request body. Okay, let's also make sure to set the guarded array on the tweet to an empty

And the body is going to be the request body. Okay, let's also make sure to set the guarded array on the tweet to an empty array. So let's add that, okay, and let's test this out in our rest client here. So the endpoint is going to be a post request to slash tweets, and let's add a body here. This is fine. Actually, I'm not returning anything. So let's make sure to return something here. Let's just return the tweet that was created.

So let's make sure to return something here. Let's just return the tweet that was created. So we'll just return this, okay. Back to our client, let's go ahead and add the body. This is a new tweet from rest client, and let's test that out, okay. So it looks like that worked. Let's double check our database, it's refresh, and there is the new tweet. So let's go ahead and hook this up to our front end. So back to our React Native app. We are in our new tweet screen, and let's just grab an Axios call from the

So back to our React Native app. We are in our new tweet screen, and let's just grab an Axios call from the other screen we have. Actually, let's grab the import first, let's add that here, and let's grab the Axios call. So Axios config right here. So let's grab this. We're also going to need a piece of state for the loading indicator. Let's add this first in our send tweet method.

We're also going to need a piece of state for the loading indicator. Let's add this first in our send tweet method. So it's going to be a post request to slash tweets, and the body is going to be the tweet, and we already have a piece of state for that. That's bound to the text area here. And once that is successful, then we can go ahead and navigate back to the home screen. So let's remove this, paste this in, and I navigate it to the tab screen here, which

So let's remove this, paste this in, and I navigate it to the tab screen here, which is the same as the home screen, but we're going to have to pass it some data, so we'll say home. I believe I named it home one. Let me check my app JSX, yeah, so it's this screen right here, okay, and let's make sure to add our loading state. So let's grab that from here, and it's paste that up here.

to add our loading state. So let's grab that from here, and it's paste that up here. So we'll add the activity indicator in a second, but first let's see if this works. Let me just clean this up, let's try again, and let's say hello from React Native. Let's hit tweet, okay, so it goes back to the home screen. It doesn't show here, which we do want, and we'll work on that in a second, but let's just see if the tweet showed up.

let's just see if the tweet showed up. So I'm going to pull down to refresh, and there it is, cool. So let's work on the activity indicator first. So while it's loading, we want to show a loading spinner, and maybe even disable the button. So where's this button here? Should be a touchable opacity, okay, actually before we make the Axios call, we should set is loading to true right here, okay, so set that to true, because it should be

should set is loading to true right here, okay, so set that to true, because it should be false to start with, okay. So let's go to that button, and let's just add a loading spinner next to it, so I wanted to show right here. So let's just wrap this in a container, this touchable opacity with a view, and let's make it flex row.

let's make it flex row. So let's say, I'm just going to do it in line style here, flex direction row, and let's do align items center, and let's just go ahead and add an activity indicator right here. So let's just grab one from the other screen, activity indicator, it's fine, let's paste that here, don't need this margin top, let's make sure to import activity indicator, and

that here, don't need this margin top, let's make sure to import activity indicator, and let's see how that looks, okay, that's too big for me. I believe there is a small size, okay, and let's give it a margin right actually instead. So let's add the style here, style equals margin right of eight, okay, so we only want to show this if we are loading. So we can just do is loading, and, and this should be, okay, let's make sure to close

So we can just do is loading, and, and this should be, okay, let's make sure to close that out, save, and let's simulate some lag here, so let's go back to the back end. Let's sleep for two seconds, and let's also add some client side validation, should be pretty straightforward. So let's just check if there's at least one character typed into the text box, when we send a tweet, so right here, we can add some validation.

when we send a tweet, so right here, we can add some validation. So if tweet.length is zero, then let's just return, and it's also show an alert , so we'll just make use of React Native's alert here. So say alert.alert, please enter a tweet, okay, let's make sure to import alert from React Native, so it's this one, save that, and now we should have client side validation so if I just hit tweet, we do get this alert.

validation so if I just hit tweet, we do get this alert. Let's see if our loading indicator works, testing, loading indicator, actually before I do that, I want to also disable the button while it's loading, so let's go back to our touchable opacity, and we can add a disabled prop here, and you'll notice disabled because you shouldn't be able to click it, so if I just say disabled, which will make it disabled,

you shouldn't be able to click it, so if I just say disabled, which will make it disabled, we are not able to click this, so let's just say disabled, or disable it when it's loading, and you can add a specific style too, but I'm okay with just doing it like this , so we can prevent multiple button presses, okay, so let's try this out, there should be a loading indicator here, and we should not be able to press this multiple times, okay, so it

indicator here, and we should not be able to press this multiple times, okay, so it does work, awesome, so again it doesn't show here, so now let's make it refresh this page after we create a new tweet, so again if we pull to refresh, there's that new tweet there, but we want it to load automatically, so I tried several approaches and this is the one I ended up using, when we're going back to the home screen over here, let's pass in

one I ended up using, when we're going back to the home screen over here, let's pass in a variable, let's say new tweet added, and this can be anything, but it has to be unique for each new tweet, so what I did was just add the actual tweet, we just added, it could be something like a timestamp as well, but this worked for me, so now on the home screen, we should have this new tweet added peram, but only when we're coming back from the new

we should have this new tweet added peram, but only when we're coming back from the new tweet screen, so when we first load the app, this peram does not exist, so for example if I were to reload this app, right now this peram does not exist, but if I add a new tweet here, so let's do that again, add a new tweet, add that tweet, and at this point this new tweet added peram does exist on the home screen, so let's go to the home screen , let's say

tweet added peram does exist on the home screen, so let's go to the home screen , let's say this first, go back to the home screen, and what I did here was create another user fact hook, so let's duplicate this, but now this parameter is going to be that variable, so remember this hook gets run whenever this variable in this array changes, so we can say route dot params dot new tweet added, and let's make sure to accept the route up

say route dot params dot new tweet added, and let's make sure to accept the route up here, but like I said, when we load the app, this peram doesn't exist yet, so what we can do is use optional chaining in JavaScript, so we don't get an error, so we can just add a question mark there, and initially this will be undefined, but once we come back from the screen where a new tweet was added, this will change, and then this user fact hook

the screen where a new tweet was added, this will change, and then this user fact hook will run, it also runs when the screen is created, so we want to make sure that we don't run it, so we can add a conditional here, if same thing if route dot params dot new tweet added, so if it exists, then go ahead and we're not going to use this method here, because it has a lot of the functionality dealing with pagination and pull to refresh, so I'm

it has a lot of the functionality dealing with pagination and pull to refresh, so I'm just going to make a new method here, which is almost the same, and we'll name it get all tweets refresh, okay, so I hope that makes sense, we only want to run this once we're coming back from the screen and a new tweet was added, so it won't run when the screen is initially loaded, so let's go ahead and grab this method, it's almost going to be

is initially loaded, so let's go ahead and grab this method, it's almost going to be the same, but it's not going to have the stuff with pagination, and pull to refresh, so we don't need the page here, we don't need this stuff here, so we do need to set the data, we don't need to append anything, we don't need this to check if it's at the end of scrolling, and we still want to update this state here, okay, so before we do the axios call, we also

and we still want to update this state here, okay, so before we do the axios call, we also want to reset a few things, so we'll paste that in, but we also want to set the page back to one, okay, so hopefully this works, and once we come back from this screen, this list should reload, and the tweet we added should show on top, so let me save this, let me just reload everything, let's go ahead and go to the new tweet screen, say hopefully this works, hit tweet,

let's go ahead and go to the new tweet screen, say hopefully this works, hit tweet, get all tweets refresh, yes I forgot to name this refresh, sorry, let's reload the app again, it did work, but let's start from the beginning again, refresh, say another one , actually let me go back, and let's add some pages here to make sure the reset works, so we'll actually scroll down till there's no more, okay, let's go ahead and add a tweet, does this work , add that tweet,

down till there's no more, okay, let's go ahead and add a tweet, does this work , add that tweet, and I think this did work, but we wanted to scroll back to the top, so if I were to scroll up here, it does show, so we have to make sure to scroll to the top, and I don 't think we have any errors, and we don't, cool, so to scroll to the top of the flat list, we need a reference to the actual flat list, so let's do that, so let's add a ref here, say const flat list ref,

the actual flat list, so let's do that, so let's add a ref here, say const flat list ref, equals use ref, let's make sure to import that, sorry, it's this one I think, did that import, right here use ref, okay, don't need this, and let's just set it to nothing to start, and in our flat list, so let me just grab this, let's go to our flat list, we can say ref equals that new ref we created, okay, and now in our use effect hook that we made, for this one, we can scroll here, so we can say flat list ref dot current,

okay, and now in our use effect hook that we made, for this one, we can scroll here, so we can say flat list ref dot current, and we can say scroll to offset, and it just says zero, offset zero, to scroll to the top of the flat list, okay, one more try, let's reload, let's scroll down, or all the way down, until there's no more tweets, okay, let's say hopefully this scrolls to top, let's go ahead and tweet, and it does scroll to the top, and there's a new tweet, and hopefully everything else still works, like polter refresh and pagination, and it does, cool,

and hopefully everything else still works, like polter refresh and pagination, and it does, cool, so I don't know if you saw that, but there was no loading spinner when we were scrolling down, that's because I meant to set this, so set is at end of scrolling to be false, and not the loading state, so let's try that one more time, let's refresh everything, let's scroll down to the end, you can see the loading indicator there, before we hit the new tweet screen, okay, so it's at the end,

you can see the loading indicator there, before we hit the new tweet screen, okay, so it's at the end, one last time hit tweet, okay, there it is, if we scroll down, the indicator is still there, cool, awesome, so everything is working correctly, we can get rid of the sleep on the back end as well, so let's go ahead and make a commit as always, this is the front end, so let's say get add, get commit, add new tweet, and for the back end, get add, get commit, add end point for adding a new tweet,

add new tweet, and for the back end, get add, get commit, add end point for adding a new tweet, and like I said, once we have auth in place, we'll make sure to replace this with the logged in user, and also we'll make sure to wrap this in middle ware for the logged in user.