Okay, let's work on deleting tweets. So if we go to a tweet that belongs to us, we want to be able to delete the tweet. So we have these three dots here. What I want to have happen when we click on this is have a modal show up from the bottom, and then that have the option to delete our tweet. So unfortunately, there is no native component that does this. So we'll make use of a third party library. So the best one I found is this one called react-native-modalize. So let's go ahead and pull this in. So let's yarn add this package.

So let's go ahead and pull this in. So let's yarn add this package. Let me just stop this first. And let's add that. Okay, that's done. Let me just yarn start again. And it also needs react-native-gesture-handler, but we already have that within our project. So let's take a look at usage. And pretty straightforward. We just have to import modalize.

And let's put it somewhere here, let's put it right here. Let me just remove this type here. Let's make sure to use ref here, or import useRef. Okay, this is how you open it. You just call open on the ref. And this is how you make use of it. So let's grab this. You can see it's assigning the ref here. So let's put this at the bottom of our component here. So let's paste this in.

So let's put this at the bottom of our component here. So let's paste this in. And we need to put something in here. So we'll say view, then we'll put a Text component. And let's just say hello there for now. Okay, so now to open it, let's find this button here. So that should be one of the icons here, not these ones, but somewhere up here. So it's this TouchableOpacity right here. So let's just do onPress equals. And let's copy the code for opening it.

So let's just do onPress equals. And let's copy the code for opening it. So again, it's just making use of the ref and calling open. You can see it's using optional chaining here with this ?. notation. Let's paste that in. And I spelled press wrong. So let's save that. And I think we're getting an error with multiple root components. Actually, no, it's just because I have two = signs here. So save that.

Actually, no, it's just because I have two equal signs here. So save that. Okay, so now let's see if it opens up that modal. So if I click the three dots here, and it looks like it does. So let's take a look at some of the options here or the props. We actually only need one, and that's the snapPoint. And this sort of just defines the height of the modal. So let's go back here to our component. Let's set that snapHeight or snapPoint to 200. Okay, and let's try that again.

So for us, we just want to delete tweet. So let's add some styling here for the view. I'm just going to add some padding inline. So say paddingHorizontal. I have that set to 24. And for paddingVertical, I have that set to 32. Okay. And now let's add our menu items here. So these are buttons. So they are TouchableOpacitys.

So these are buttons. So they are touchable opacities. And I'm going to add a name style here. And we'll style it in a second. styles.menuButton is what I named it. And this will have an icon. So I'm going to add two menu items here just so it looks nice, but we'll only implement deleteTweet. So for the first menu item, let's just add an icon for deleting the tweet. So let's go to react-native-vector-icons or expo-vector-icons.

And let's grab the component. Let's go back down to our button. And let's paste that in. I have it as a color of 222. So that's going to be the icon. And then we need text next to it. And again, this will have a name style. And it's just going to say delete tweet. And let's add the style on it. style equals dials.menu.button.text.

And let's add the style on it. Style equals dials.menuButtonText. So let's go ahead and add those styles down here. We have our menuButton, which will be flex-direction row. Okay. And align-items center. Next we have our menuButtonText. And let's make this a bit bigger. So font-size 20. Let's change the color to #222 is what I have.

And let's just name the top one pinTweet. And the icon is called pushPin. PushPin. Oh, I believe. Okay. So let's just add some marginTop on this one. So let's add another style here called styles.mt6 is what I have. And then we'll define mt6 down here. Let's just duplicate this one, say mt6. So it's marginTop 32 is what I have.

Let's just duplicate this one, say MT6. So it's marginTop 32 is what I have. Okay. So that looks pretty good. So when we press this button, I want to add a confirmation to make sure that's what the user wants to do. So let's do that. So let's go to deleteTweet. And for the TouchableOpacity, let's add an onPress here. And let's say, showAlert.

And for the touchable opacity, let's add an onPress here. And let's say, showAlert. So we're going to make use of an alert as sort of a confirmation dialogue. So let's go ahead and define that method up here. Let's just put it right here. showAlert, okay. And you can actually have multiple buttons on an alert. So let's do that. So alert.alert. I'm not sure if I have alert imported.

So alert. alert. I'm not sure if I have alert imported. I don't think I do. So let's make sure to import that. Okay. And the first param is the title. So say delete this tweet, question mark. The second is the message, which I will leave null. And the third, as you see, are the buttons. So we can pass an array here of buttons that are objects.

And the third, as you see, are the buttons. So we can pass an array here of buttons that are objects. So the first button will have the text of cancel. And when we press that, we can define an onPress. And we can say, for now, let's just console.log, canceled. And the style is cancel, okay. And we can do something similar for the okay button. So let's duplicate this. The text will be okay. And onPress, let's call a deleteTweet method here.

The text will be okay. And on press, let's call a deleteTweet method here. Tweet. And the style will be default. Okay. Let's go ahead and define that deleteTweet right here. deleteTweet. And for now, let's just navigate back to the home screen. So we can say navigation.navigate. And I believe the home screen is named home.

So we can say navigation.navigate. And I believe the home screen is named homeOne. Okay. So hopefully I did everything correctly. Let's save that. Okay. If I hit deleteTweet, hopefully we get the alert, and we do. Let's open up our console here. Cancel. Does console.log canceled?

Cancel. Does console log canceled? And okay. Does navigate back to the home screen. Okay. So when we cancel, we can just close the model. So let's just close the model here. So this model. Let's close it when we hit cancel. So pretty much the same thing as opening, but it's close.

this screen to make sure the deleted tweet does not show here anymore. So we did something similar when we did the new tweet. So after the tweet is created, then we redirect back to the home screen, but we add this parameter. So let's add a parameter when we're going back to the home screen. Let's name it tweetDeleted, and it could be anything. Let's just say true. Okay. So in our home screen, if you remember, we are listening for that in one of the useEffect hooks. So right here.

This is just a simple explanation with no code.

Let's also make sure that this menu only shows up for the person who created this tweet. So ideally, we'd have different menu items depending on if they created the tweet. But let's just keep it simple and only show it if they created the tweet. So we can just add a conditional around the three buttons here. So we have to grab the user from our user context and check their ID. And if it's equal to the tweet ID, so tweet.user.id, then go ahead and render those three dots. So we can say, and let's wrap this in brackets and let's close it out. So let's make sure to grab the user from the auth context. So say const user = useContext to import that. And it should be auth context to import that as well.

So say const user equals useContext to import that. And it should be authContext to import that as well. Okay. So does this work? So right now I'm logged in as user one. So any of these should not show the three dots and they don't. But if I find my tweet here, it should be down here somewhere. There it is. Then the three dots do show. Okay.

Then the three dots do show. Okay. Now let's go into the backend and implement deleteTweet. So let's find the endpoint for creating a Tweet. So right here, let's duplicate this, but this will be our deleteTweet. So let's make it a DELETE request. We need to specify a specific Tweet. So we'll grab it from here. We don't need the request here, but we do need the tweet. Okay.

We don't need the request here, but we do need the tweet. Okay. We don't need validation. We do need authorization though, but let's just delete the tweet here as a response or return response()->json(). And we'll just delete it in here. So tweet::delete(), okay. And it'll be a 200 response. And for authorization, let's just say abort() if the tweet.user_id does not equal the loggedInUser->id.

And for authorization, let's just say abort if the tweetUserId does not equal the authId, and let's just say 403. Okay. And we do have the middleware here, so we have to be logged in to perform this action. Okay. So let's save that. Hopefully I did this correctly. So let's go back to our front end. Let's grab this Axios call and we'll modify it for deleting.

So let's go back to our front end. Let's grab this Axios call and we'll modify it for deleting. So let's paste this in. It's a DELETE request to /tweets/{tweetId}, which is fine. Okay. And when it's successful, let's go ahead and navigate to the home screen. So we'll grab this. And put this in here. And let's also put an alert here just to notify the user. So we can say alert.alert, tweet was deleted.

And let's also put an alert here just to notify the user. So we can say alert.alert, tweet was deleted. Okay. And for the error, I'm not going to worry too much about that. There's just console.log. Okay. And we have to make sure to pass through the token. So let me just grab that from another screen here. So let's grab this. Let's paste this before the Axios call.

So let's grab this. Let's paste this before the Axios call. And hopefully I did everything correctly. So I'm going to save this. Let's just reload the app to make sure. Let's open up our database as well. So let me refresh this. So we have 100 tweets. Let's go ahead and try to delete one of our tweets here. So it has to be my tweet because the menu only shows for me or the logged in user.

not create a tweet, then it brings up a different list of options that we can do with this tweet. But for now, I'm pretty happy with this. So let's go ahead and make a commit. So let's say git add, git commit, add, deleting tweets with slide out menu from bottom. And for the front end, or the back end, I mean, git add, git commit, add endpoint for deleting tweets.