React Native TypeScript - A Comprehensive Tutorial

hey what's going on guys and welcome to my comprehensive react native tutorial in this tutorial you will learn how to build a react native application and integrate firebase with it as you can see that we will be adding login and uh sign up with firebase and there would be an extra content for the admins and they can approve or reject the user posts as you see on the screen that there is nothing right now but the post is made by the user so admin will see it in the dashboard so if i click on the dashboard and if i approve it from here it will be synced in real time as you can see that it is hiding from the dashboard but it is showing and the is in the main screen so let's start with the project structure all right so let's start with the tutorial as you can see that is completely fresh react native project and nothing has been done uh inside of it so in order to define the project structure let's create a folder called source all of our react native codes will be inside of this source folder so let's create a new folder we'll call it the navigation and this would hold all the codes related to navigations one more folder let's call it screens and that's one more folder that's called constants and for the moment i think these are enough let's create one more and that would be components and i think these are enough so let's start with the uh constant first uh we'll create a new file here and we'll call it firebase.es then inside of the navigation we'll have two stacks so let's create the first one called odd stack esx here this would be this should hold the authentication stack then let's create a new stack and call it the app stack and this should hold all the stack in related to the app and then one more there should be our main navigation dot tsx and this should be the main navigation actually and react navi previous react navigations uh we'll use a switch navigator and all that stuff and that configuration will be doing here let's come to the screens first of all uh create a screen and we'll call it as the login.tsx the other screen that would be signup.tsx one more that would be the home.tsx and finally one more that would be the dashboard.psx all right so inside of the components will initially create one component that will call it input.tsx and we'll create an index for it and also an index here all right so now we can start writing our code so first of all let's start with the signup.dsx so import react from react and then uh we'll create a functional component so const app that would be the functional component fc stands for functional component and it should return a view and inside of the view i'll write a text simply says sign that screen let's create a style for it actually text is not imported so let's import the text and also style sheet all right so let's create a style const style styles equals style sheet dot create and here i'll create a container flex 1 justify content center and align items to center initially we will use that in order to make the text this text exactly at the center of string just like you see this one so let's apply this style here and save the changes one thing that we need to do and then we are good so export default app all right so this is our signup screen now go to the index.ts import sign up from sign up and then export sign up okay so this is the index for all the screens and we'll be importing these screens from this directly from this folder so that's why you're creating index for it so let's go ahead and copy all these uh code and then go to the login screen and paste it here just change this text to login and i think we're good so let's import login also login from login and export login same goes for the home screen and for the dashboard screen save the changes go to the index import home from home and import dashboard from dashboard let's export it and save the changes now we are done with this now let's go to the um odd stack actually so let's import uh i have to say that i've already installed react navigation 5 so you can go to the react navigation website and install it for expo or react native project you're using so i'm using react navigation 5 for this tutorial so import react from react and here i'll import create stack navigator create stack navigator from react navigation stack then const navigator screen equals create stack navigator then i'll create a component so const app equals uh app stack actually uh auth stack equals actually i'll export it also export default so it would be export default no worries hot stack equals it should be a functional component and then it should return the odd stack so that would be the screen so let's import the odd screen so import from screens you can see that i'm directly exporting for importing from the screens folder what screens do i need here one is sign up and the other is login cool let's create use the navigator [Music] and then inside of that we'll use screens so the name of the screens would be sign up and the component would be sign up so this is the first this is our first screen let's duplicate this and change it to login and also this one all right so we are done with the odd stacks let's export it and we are done with the odd stack same way we can create the app stack so copy and paste and let's change these screens so that would be the home screen and this one would be the dashboard let's change this also so home screen and the dashboard screen also change the name and save the changes now we have created our navigator but for the main navigator we'll need to configure firebase because uh we'll detect the from firebase or that whether or not the user has logged in if he has logged in then the uh this navigator would redirect him to the app stack otherwise if he is not logged in then it will be redirected to the odd stack so let's configure firebase go to the firebase click on add project create native tutorial just close this create project and you can see that our project is being created and this is our project so click on the web and then nam the app so we'll call it rn t u t so this is for react native tutorial again click on register app adding firebase sdk now just copy this configuration and there you see we have created the firebase ots press this configuration change the wire to const and import firebase from firebase all right so again i'm saying that i have installed the firebase as npm installed firebase you can do that quite easily and here i'll use firebase dot initialize app and then pass in the firebase config all right so or we have added firebase to the project so one step is required to complete the addition process that is the importing that firebase into the main app so import source constants firebase all right so firebase has been integrated to the app just reload the app okay so now let's go to the firebase itself click on continue to the console and what we need uh we need the authentication and firestore to enable for this project so go to the authentication click on sign in method and enable email and password so click on this and enable email and password and save the changes email and password has now been enabled go to the cloud file store click on create database database has been created so click on rules now and change this from false to true click on publish once the changes have been saved we are clear to use firestore and authentication inside of our app so come back to the app and then go to the uh firebase of main navigator and let's import react from react then import navigation container from uh react navigation native and then uh import firebase from firebase all right so create a functional component const a main navigator equals that is a functional component and all right so this is our uh main navigator so return we'll use the use state also hook so const is a user set user equals eu's state and that will be the null for the moment all right so the next thing that we are doing is if we create a function first of all let's uh let's create the navigation container and we'll use the if statement that if user not equal to null then take him to the abstract otherwise take him to the auth stack but as you can see that a user is null for the moment so let's uh create a function that can detect that the user is logged in or not from firebase so let's create a function cost and we'll call it as the bootstrap equals a function okay so now firebase dot auth dot on or state changed and then uh we'll take a user it will give us a call by function that would have a user and if a user uh just uh we wanna make sure that the we should set that user right here so set user to user all right so this is a little bit confusing so let's change this name what's wrong here is argument of type user is not assignable to type user provider not match for signature okay so we want to use here is the type of this user so we want to use this as any and now it is it will accept every kind of users okay so this user will be and i think that is enough for that particular navigation and let's use another hook that's called use effect and here we will call that bootstrap function so put strap and we'll pass in an empty array so that we make sure that this function is executed exactly once all right so now what you need to do is to export that export default main navigator and save the changes back to the app.ts just remove these because we don't need them anymore and here we'll use main navigator save the changes and reload the app just get rid of these styles these imports and wait for it to complete and then we will be back and see as you can see that it took me to the sign up screen that's because we have not logged in yet into the firebase and the odds tag it it took me to the odd stack and as you can see that the odd stack the first screen is the sign up screen we'll also specify the screen options as the header shown to false we don't need that header also and same goes for the app stack all right so now it's time to design this sign up screen and then we will hope we can log in and then we create that dashboard and home screen all that so let's go to the uh components and we have created the input component so let's uh create the actual component inside of it so import react from react then create a functional component cost input fc equals and it should take some props so we'll create an interface for it interface props and then the it should have a placeholder the input have a placeholder and that should be of the type string you should also have a function that's called the on change text that would be taking a text string as the functional argument and then it should be not returning anything so we should specify it as void inputs should also have the secure text entry that would be a an optional and we'll use it we'll have to specify it as the boolean all right so i think this interface is enough for the moment if we need something extra we will add it right here so this functional component implements that props interface and we'll pass in the props and let's start creating the input component we should start with a view and then inside of the view we'll use text input all right so the placeholder for this text input would be props dot placeholder and the on change text should be props dot on change text also the secure uh text entry that is a little bit changed from these two that would be if the props dot secure text entry are false all right so what's wrong with this view so let's hover over it can't find the name view all right so let's import it from react native save the changes and you can see that it's working create a style for it okay so the width of the uh the input field that would be the width should be the width divided by 1.1 and where is that width variable comes from so let's specify that width here cost height and width equals dimensions dot get screen okay so we get the width of the screen and then it's divided by 1.1 what's the problem here is does not exist type new style sheet okay where is that style sheet um let's import the style sheet also and that is fixed so another style that would be the align self that would be center the background color should be e3 e3 e3 border radius of 5 and let's try it actually styles.container and styles.input all right so let's export it first and then let's try to import it in the index import input from input export input all right so now it's time to use that input inside of our signup screen and we'll use the placeholder as to it should be the name the own change text so you can see that it takes the uh text as a string or and will pass in the text and then it should just console log that text right here we don't want to pass the secure text entry for the name because the name is not the secure text as you can see that the beautiful component have been created and actually for the signup we need three of them it should be a very simple sign up and no need to work on too much on the stylings and all that stuff let's use the margin vertical pen and i think that's good for the sign up let's change the placeholder so the one is name the other is email and the last one is of course password and that would be the secure text entry let's check these values cool let's check out the console there you go you can see that everything is console logged perfect this is the email and this is the password that is secure all right so we will create uh three uh states it's a const name set name equals use state and that would be of type string kernel and that would be the null for the moment because let's duplicate this and we'll use email set email password and set password save the changes now instead of just starting the console logging we'll change it to set name text set email text and finally the set password to text created this side of screen except the one button remains so let's create this button right here so i we should create it inside of the component so that we can reuse it inside of our other screens so let's create the new file and i'll name it as button.tsx here what we need to do is to go to the input and let's grab these files and let's put it inside of here now let's create the interface props and that would be the button title that would be title and it should be of the type str string not strong and one thing that would be the on press method that would be avoid okay now the next thing that would be the it's okay for the moment we'll add it if we need anything so cost app fc equals uh actually it implements the props equals a function that has props and then return a view and inside of the view actually we don't need a view here so we need directly uh touchable opacity so get rid of the view and inside of the touchable opacity there would be a text and that would be the props dot title all right and then the on press method on press that would be props dot on press all right awesome all right there's something wrong with the text the textual content of the element if an element no markup okay there's no text so let's import text and it is fixed now let's create the style so const styles equals stylesheet.create what is container and the other one is the text okay so the container should be the background it should have a background color we'll use simple black and the align items to center justified content center align self center padding of 10 and border radius of it and i think these are enough and use the color for the text that would be white and save the changes let's implement these styles style equals styles.container and here style equals styles.txt save the changes and now let's use this this component that we've created inside of the sign up screen so export default app and save the changes go to the index import button from button and then export it button now let's go to the sign up screen and let's bring in the button and use it here all right you can see that we have a nice uh sort of this button so a little bit styling further styling is required it's not too much but we'll give it some margin vertical obtained and now it looks better also use the padding horizontal to 20 and it looks much better now go back to the sign up screen if you click on this button then there will be an alert and that would be displaying the message pressed okay so we have created this sign up screen now let's create the uh the the text here that would say that if you already have an account then it should take us to the login screen so how do we do that it's actually simple let's create a view and inside of that create text already have an account then disable opacity here save the changes okay okay actually we need a text for it and now it's fixed party we need some styling so style equals styles dot login text let's create this flex direction of row the margin vertical 20 and the [Music] i think it's okay that's fine now let's use some styling here also so style equals margin horizontal of 5 and for this one also that's looking better we'll also use the color for the for this so and that would be some sort of bluish color so that would be rgb a um eight one one three five two double zero and then one so this is some sort of bluish color and we can click on it so on press it should be an error function and it should take us to the props navigation dot navigate and it should take to the login screen there is no props implemented here so we should specify the props save the changes and if i click on it it should take me to the login screen awesome now in order to create the login screen it would be super simple because we already have the components these button and this text right here so first of all we will copy this text go to the login screen and here we need to implement this right here okay we don't have these login text or touchable opacity or whatever we have a on sign up so let's bring in these two also and now we need to copy these styles so that is of course this whole style and replace it with this one so if i go here as you can see that we have some text inside of this and should have the don't have an account sign up here and it should take to sign up if i click on sign up here it says can't find variable props save the changes now if you click on it it should take us back to the signup screen now we also need some inputs here so go to the sign up screen and the email and the password so copy these two and use it inside of the login we also need a button for the login to work this is how the reusable components help it takes a little bit time to create them but once you create them it should be super easy for you to reuse it throughout the project so as you can see that this it is helping me to create uh extremely uh beautiful and uh consistent uh components and while in no time actually i'm just reusing the same code that i've previously built so okay we need to use state now so let's uh bring in the use state from react and go to the sign up again the email and password copy it and paste it here now we have created the login and sign up screens now let's implement the login and sign up so that we can go further in it so save the changes go to the sign up screen and create a function called const sign up equals a function an asynchronous function actually and that would be the function that will create the account so let's go ahead and create an account here so if name email and password save the changes and if we don't have these then we should alert dot alert um missing fields okay so now what we need to do here is to is to use the try and catch and let's just log the error if we have any error and then we'll use the const user equals await and this should create an account and then f user alert dot alert json.stringify user all right so that way we should create an account save the changes and this side of function should be attached to just get rid of this arrow function and use sign up save the changes and we use the type of we should we can create the interface but we don't want to do it right now let's open firebase so that we can see that we are actually adding some data through this form so go to the console to the react native tote and let's go to the authentication and you can see that we don't have any data inside of it so let's save the changes again and refresh the app and let's use okay so if i click on the sign up there's no loading indicator we have implemented but you can see that i am getting this data which means that i have the uid and all that stuff of these of this user and which means that the user have been created successfully if i refresh the firebase and you can see that the authentication has a user now delete this user for the moment and it took me to the home screen because we have implemented the logic previously that if i am logged in then it should take me to the ho or to the op app stack otherwise it should take me to the odd stack all right so this is working we need to store these data inside of the firestore so cost uh await firebase.firestore dot collection users dot document we need to destructure this object and then we use the eoid dot set and what kind of data we want to set we're gonna set name email and password name email and password okay so it should set everything up inside of the firebase and it should take us to the home screen so we are done with the sign up let's create an account here so john doe let's use the email that would be john gmail.com let's give it some password click on the sign up you can see that it took us to the home screen and we are logged in successfully to the app now we need to implement the login also so how do we sign out of this we need to add a sign up sign out button at the home screen so go to the home screen and there is the home screen uh add a button that would be the let's import the button from components import button from components and then use that button here sign out and on press should be the sign out method that we will be creating shortly let's create this method so that would be const sign out equals a function that would be firebase dot dot sign out just simple as that import firebase from firebase and save the changes you can see there is a sign out button let's create a function const again equals async function and now what you're going to do that if email and password else alert dot alert missing fields then you want to use the const user equals await firebase dot auth dot sign in with email and password that would be email and password and i think it should be good so let's import firebase from firebase save the changes and now let's check it out let's a use that function there let's get rid of this and use login okay so we use the same account john let's get rid of this john okay so here john gmail.com and then for the password we use the password that we've created previously and as you can see that we have logged in six now what we need to do is to uh add a text input and it should enable the users to add a message or something and then we'll create the admin function admin uh account and that admin account could uh could approve or decline the message and if it he approves then it should show up on the dashboard otherwise it should be not showing up on the dashboard so how would we do that first of all we need to this sign out button create a view and inside of that view we'll use the input and it should have a placeholder of the write something here the on change text that should have a text and that would be set message to text there's no set message will create it so const message set message equals use state that should be either of type string or null and we'll use null for the moment okay i guess okay it's perfect save the changes you can see that there is a text input and it can take the input from us and also create a new button and that would be the title of the post and the on press should be post let's create a new method called post and then we just alert post some of the changes you can see that we have a post if i click on it it should alert the post okay so we'll use f message else alert dot alert missing fields so the changes there is no alert so let's bring in the alert from react native okay so if we have the message then what we're going to do here is to we'll use the data const data equals that would be the message and it should be the timestamp that would be date.now and it should be approved of false okay so this should be approved by the admin now we need to put that data inside of the cloud firestore so wait firebase.firestore dot collection posts dot set document but we don't have any document so we'll use add and then we want to add this data okay uh we need to use try cache so in case we have any errors then we could catch these errors and debug them so just going to log the error if we have any and i think this should post the data that we create right here to the cloud firestore so let's go to the firebase let's add a new user let's use the email of the admin and gmail.com so in case uh this person is in the admin and let's use the password that would be for the admin password we'll use the pro and one two three add this user okay so admin would be created manually we don't have the option inside of the app to create admins so that's why we have created it manually i just copy the uid okay so inside of that there is the users inside of users i will add the document the user id would be this one the name would be admin the um email would be admin gmail.com the password is not gonna include here but is admin that would be of the type boolean and that would be true save the changes and now we have created our admin okay cool so next thing that we want to do that if we will make a post and then we should set up some instructions for the dashboard that do not show the post that is not approved and then we'll show the for the admin all the posts should show up but only uh admin can approve or decline that post on decline the post would be deleted so okay let's create a post so this is my post um hoping that admin will approve it okay so this is my post if i click on the post and go to the firebase just refresh this and you can see that the posts have been added there is the post and you can see that we have the data inside of the database awesome what we want to do now is that we we could have this post shown here but we need to uh have the dashboard access for the admin so let's uh let's fetch the current user uh and then if the current user is admin then we want to you create a button here that should take him to the dashboard so what we're gonna do here is uh we will create a function const fetch current user that would be an async function all right so use const user set user equals use state of any and that would be null okay so this will be our user let's fetch this user here's a const user equals a firebase dot ah firestore uh actually this would be just a user firebase.firestore.collectionusers.document firebase.com so it would fetch the user which have the which is logged in basically and okay so we'll use the const euid equals and let's use this statement right here it is giving some error but i think it should work fine don't worry about it so okay next thing that we want to be doing is the we have the user now so set user and it we should set it to an object that would have the id of user dot id let's use a weight here and the then after the id we should copy the data of the users or spread operator user.data actually this object means that we have the user data inside of this object but we also added the id of the user all right so this is our current user now we'll use use effect to fetch this current user fetch current user save the changes and now we need to use the the current user right here so let's use the javascript inside of the jsx use the user if we have user then the else null if we have the user then user dot is admin then we should use something otherwise null if the user is admin then we should do something right here a view and inside of the view there would be a button and that should be the title of two dashboard and the on press that would be the arrow function that would take us to the props dot navigation dot navigate to [Music] dashboard save the changes now you can see that we don't you don't see any data added right here but if we log in from the go to the sign out from here and if we log in from the admin account we should see the dashboard right here so click on the login and admin and gmail.com then we'll use the password click on sign up as you can see that we have the dashboard button if i click on it it should take me to the dashboard screen now what we're going to do here is that inside of the dashboard screen we should see all the posts that are awaiting for the approval so let's create a component called render post render pending post dot tsx import react from react crosstab fc equals props and we'll need an interface also but let's first of all let's create a view basic for it so return view and inside of the view uh actually what is the data inside of the post so let's let me check it once again there is an approved message and time stamp so uh what you're going to do here is the first of all we should have the message let's create the interface perhaps the message of type string the proof of stamp string and the uh timestamp of that number all right so we have these props and then we'll use it right here and we are good now inside of the view we should create uh we should write a text that would be the props dot message let's import a view and text from react native and let's simple also use the timestamp but for the timestamp we need to format this timestamp for in order to use it right here so in order to format the timestamp uh what are you going to do that you should create a function to cost format time save the changes and let's use the calculated time so text you want to use for mat time props dot timestamp save the changes and let's just wrap it inside of another view and lastly what we want to do here is that we need to uh to create two buttons to approve or decline so view and then the button and then again the button one is the title of approve on press equals the it should be approved so on approve it would be a function void and on reject that would be also avoid so we should use the props dot honor group for the approval and title is equals reject that would be on press equals props dot on reject save the changes and let's create style for it let's create a container shhh uh all right so let's actually i create a function that would fetch all the posts that are currently pending so const um const uh that would be fetch pending posts equals an asynchronous function and then it should be cast posts equals await firebase firebase.firestore.collection posts dot where approved equal equals to false dot get so we get these posts that are not approved yet let's import firebase from firebase save the changes now we got the posts that are not approved okay so what are you gonna do with here is let's actually create a state it's a cost posts set posts equals use state any type and that would be enough and then what you're gonna do here is to set posts uh which is basically an array but we cannot directly set it so okay just directly use it don't worry about it so cost um set posts and this should be the array and spread operator post dot docs save the changes and let's actually again create the use effect and call it exactly once then fetch pending posts and it should fetch all the pending posts right let's use the flat list and the data that would be the posts the render item that would be an item and it should be what would be the render item approval render and it requires some props uh what kind of props it requires it record the first prop that should be the message and that would be item dot message the second thing that it requires is actually the timestamp item.timestamp the third thing it requires is the on approved is the item dot approved but we actually don't need this because it's already not approved on approve that would be a function on approve item dot id then on reject that will be also function on reject item dot id okay so it is completed let's create these functions so const on prove that should alert simply should take an id item of id id will approved let's specify the types save the changes and now you can see that we get these uh this sort of card we i which means that we get the data but we couldn't show that the contents of the data inside of here so i think we have some problem what could be the problem here and actually these posts are not getting rendered properly i guess so let me check this again okay so this is not item dot message it is item dot data dot message then item item.data.timestamp then item.data.approved and item.ide and this is ok save the changes and you can see that the data has been shown here the item of finding this will be approved and the item will find this will be rejected that's perfect um what we're going to do next is the container flex1 justify card at center but it is not at the center so what you're gonna do here is and then what we can do is that we'll use the height for this view and you can see that this is this should be our flat list uh but we need to style this uh in order to properly align it so style equals flex direction row justify content excuse me space between okay it's perfect width of let's say 60 to it and the padding actually we want to use padding and let's use padding here of let's say 20 and it looks good now but actually the format is not right you want to use to fixed zero okay so it's not working okay just leave it for now we don't want to mess with it we also need to align these buttons in a row so style equals flex direction row and justify content space around save the changes and you can see that it would be either approved or declined click on approve or click on reject let's create the methods for the approval or the rejection and go to the dashboard so how do we approve it it's super simple what we're gonna do is we need to copy this and paste it here so this is the post uh no uh actually it's a little bit document id that we get from the functional argument then get all right so we got the it should be a nice sync function so we got the id of the post we got the whole data of the post what we're going to do here is the next thing that we're going to use is the post dot ref dot set you want to modify this and we want to use the approved to true this simple as that we want to use the merge to true also so that the other data inside of this document is not messed with on reject that would be a little bit different so the rejection that would be the cost for our post or we don't need any cost so what i use await firebase.firestore dot collection posts dot document id dot delete and it should be deleted and because when it is rejected it says no use all right so we need a back button so that we can go back to the we can go back to the previous screen so in order to add the back button i'm going to use the create a button here the title that would be the back the on press that would be props dot navigation dot actually props dot navigation dot go back okay so where is props there is no props so the changes click on this and it should take me to the back okay awesome so now we need to show the posts that are approved on the home screen to the other user also actually this one should be the id okay so fetch posts uh copy this function we would need this in the home screen all right but we just want to modify the where approved to true and we are good now we need to also copy the state that we've created to the home screen and it save the changes and now we want to create a new render so new file that would be render post dot tsx what you want to do here is we want to copy the whole thing here paste it on approve is not required all reject is not required the this view is not required at all save the changes all right so now we want to go to the home screen index let's import post render from dot slash render posts and then post render save the changes go to the home screen and let's import the post render and let's use the flat list on top of the app so here i want to use the flat list the data for the flat list that would be the posts the render item uh actually it would be the item and it should be the post render what it requires actually it requires the message item dot message the item dot data dot message the uh the next thing that it requires is the timestamp item dot data dot timestamp the approved item dot data dot approved save the changes we want to use the javascript that if the posts dot length is greater than zero then you want to render the flat list otherwise you want to render the view and there should be a text should nothing to [Music] display you should style it a little bit so that would be the flex point one flex should be one justify content center and the align items center and you can see that it says nothing to display if i go to the dashboard if i click on approve this and it should automatically hide but in this case it won't because if i go to the dashboard if i go to the home okay we didn't uh fetch the post so fetch posts you want to use it fetch posts save the changes you can see that the post is right here now and when i use the okay that's great let's change it uh to false again it doesn't work in real time so let's make it in real time so in order to make it in real time what you're going to do here is the you should get rid of this you want to use the firebase.firestore.collection posts dot dot where approved equals to true dot on snapshot query snapshot we want to use the const querysnapshot.docs okay and then we want to set posts to the documents save the changes and you can see that the document is gone we also want to implement this real-time thing in on the dashboard actually and that would be the pending posts that would be false save the changes and now let's actually go to the dashboard uh it's a dashboard screen and this is the post if i click on approve it is gone if i go back and you can see that the post is right here so this is how it works and let's try it let's try that again he's gone from here go to the dashboard it is there let me go back the post is not rare if i click on the dashboard if i approve this post it should hide from here you can see that this is now approved i go back you can see that the approve post is showing here so this is how things work and i hope you like this video and i'll be seeing you guys in the next one make sure you subscribe to the channel and peace get down

Channel: Dope Programming

Views: 14,108

Keywords: react native, react native typescript, react native tutorial, react native typescript tutorial, react native firebase, react native firebase tutorial, react native cloud firestore, react native custom components, react native reusable components, react native project structure, react native comprehensive tutorial, react native for beginners, react native iOS development, react native expo, expo vs react-native cli, covid19, trending, codingwithmosh, flutter vs react native

Id: OZR-iOu82wM

Length: 85min 50sec (5150 seconds)

Published: Mon Oct 19 2020