Master React's Reusable Modals with Material UI

okay so what I want to do now is create a app model so when I click on this I want a model to appear with the list of the contacts coming from the firestore database so coming from here all of the users that get listed on here so let's go ahead and do that so in the components folder I'm just going to create a new folder in here called app model and in here I'm going to create a file index.tsx and rafce this is the app model component and this is ireact.fc and what I want to do is create this model and make it reusable so what we'll be doing is importing the model coming from Material UI so if we check the docs from Material UI if we scroll down we have a section where it talks about models just here so this is the type of model we want to create as you can see this is what we will be doing so if we go back in our app we're going to have an alternative and then an Innovative inside here and increase is going to be the toggle for the whether the model is open or not so on click is going to be equal to handle open which we need to create some new state for that and then we're going to render a icon that we click on so we'll pass that in as prompt and let's close that div off so the props we will receive are is the icon as the first prop after that what I want to do is just bring in my code so essentially what I'm doing is bringing in model which is coming from Material UI the box is coming from Material UI and then what I want to do is first of all render the title which comes from the procs as well so that will be the title being rendered within the model so everything in here is the model so anything everything inside this div here and then we got an active so we don't need that and we need to create use State for the open and the handle open and handle Clause functionality so let's create that now so essentially what it is is the use day of open and open handle open will basically set open to true and hundred dollars you set up and defaults I also need the Box styling so I'm going to create that in a separate helper file so helper.ts and if we go into material UI documentation it gives you the box style anyway so we can just copy that which is essentially this over here so if we go in our board here and I just want the export this like so and it's going to be called box style so now all I need to do is import this box style in from the helper and now I now need to render the app model somewhere so passing in the icon and the title and I also want to pass in the model type because we want it to be reusable so we can handle the model children inside here so first of all I'm going to create props so type props is equal to Icon title model type and then we just need to pass this in here like so so the I con is going to be a GSX element because the icon is coming from Material UI which is essentially a component the jsx element and then the title will be a string and a model type will be a string so that's fine so we need to then import up model on to the sidebar header component so let's find that component in the sidebar sidebar header so instead of the chart outline icon it's going to be the app model like so but what will happen is we will pass in the relevant props so the props for our model is the icon which is the outlined icon the title is a string of all contacts and this model type is the chat or you could call it contacts whatever you wish so now that is there so now if I save and now if I click onto here we now have a model working on the page which says alt contacts so now what we need to do is fetch all of the user information in here so now what I want to do in here is fetch all of the user information but we need to add some users into our user database so let's go ahead and do that so I'm just going to quickly add some users and be right back so if you go into our Cloud firestore all you want to do is add a document so add a document Auto ID in here and then I'm just going to add another user in so I've got a user of Yoda from Star Wars so this is a email address we want to add in the name which is Yoda we want to add the photo which I will get and then last online is a timestamp so this will be of type timestamp you can put whatever you want in here I'm just putting in some random time in there and then the last one is the uid so this is the structure of what we will have in our database when we create a new user and it is the same when we do that and we are doing that already so now now we have two other users other than myself so we should be able to fetch Darth Vader and Yoda into our old contacts model so going back into our code in here I've got this function in here which handles the children of the model depending on what model type it is so we need to create this function so if I create this function in the helper the export const the handle model children and this will bring in the relevant argument which is the model type the contacts and handle clause which is essentially going to close the model so we need to Define these types the first off the icon model type is going to be a type that we need to create so type of Icon model type is a union type and it's not add an edit it's going to be upload and it is also going to be the chart which is what we passed in as props that one's set up correctly and I just want to export it in case it's needed also in the app and then the contacts type is essentially going to be this object here so email last online name photo and uid so what I'm going to do is declare this in the types.d.ts over here and I'm just going to bring you at the bottom which is the contact type of email string ID of string last online is an object name photo and uid so all I will do is put ID as optional because we don't have it in at the moment so that is the contact type so if we go back into our helper function we just need to import this in now like so which is there and then in here we need to handle something so I'm going to handle it based on the model type so switch model type if it is upload then we want to return uh upload model which we can do in here so upload model and again we want to pass in the handle Clause because that is being passed in from the parent components or in app model like so and then we also want the case for chart which essentially is going to be the chat model and we pass in the contacts and the handle tools as well so the default is just going to be a return like that and then finally we just need to close it off and we don't need to return anything actually so there's a few things we need to do upload More release need to be needs to be created and also the chat model so what I'll do with the upload model is just put it in string for now so it just returns that as a string and then the chat model we need to create inside here so new file is going to be chatmodel.tsx and what you can do is you can separate it into subfolders or however you want to have your folder structure but for this I'm just going to put it in the same folder and I'm going to do refce and then in here I'm just going to put a P tag this is the chat model so and then react.fc in here and save and I'm going to also create the upload model as well uploadmodel.ts X and paste this in but instead of chart this time it's just going to be upload like so and then in the helper all I now need to do is import it in from the relevant file path and if I save all and then import from the relevant file path but what I also need to do I've just realized is I've got jsx in this file but this is only a TS file so let's rename this to TSX because we are rendering jsx in here so now we can import the relevant files that we need and then if we just copy these as they are needed in the relevant model files so chat model will receive these props in here of contacts and handle close like so and we just need to put a comma in here and then the upload model will have the handle closed in here like so and again we need to define the type for these so we can do that in a helper file so what I'm going to do is I'm going to do index dot interface dot TS which will handle all of the types in this app model folder so first off we've got this type in here which we want to handle in the interface file so paste that in and then we can import this in here the handle Clause is going to be of type void so essentially it's not returning anything so going to here we need tap model props and we also need upload model prop so export type of chat model props and chat model props it takes in contact and handle Clause so we already have copied the handle Clause one so I just need to copy the contacts one as well paste them in and import contacts type from the types.d.ts over here and then I just want to copy this but this time is going to be the upload model prompt and in the upload model blocks we just need the handle closed this time so going back in here we can delete this one so now we have chat module props which is the type that we can import but that is handled there and then the upload model props is handled in here and then if we go into here we just need to import handle model children and we can see here there's an error saying string is not assignable to parameter icon model type so if we go into model type that is a string and cannot find name contacts so we would need to fetch the contacts so first of all I'm going to say cons contacts is an array so that's the contacts and then the model type we need to pass in so now we've got the area of model type I just want to double check the prop of model type is being passed in correctly so it's either upload or chat so if I go into the sidebar header component the model type is cha so that is correct and it's a string as well so that's fine so if we go into the the app model once again and app model receives icon title and model type so essentially what I want to do here is change this from a string to Icon model type and then that error should fix itself now which it has done and then contacts we now need to fetch the contacts data so let's go ahead and do that so now what I want to do is fetch contacts in real time so effects use the data use a compact in real time from five stop pixel and then we need contacts or I'm going to declare reuse day for contact which is going to be equal to contacts type array and then after that I'm going to bring in a use effect so essentially what would happen is the use effect would have an on snapshot of the user's collection which is coming from our user controller which essentially is accessing the collection of the firestore and in particular the user's collection so going back into our app model we need to import the snapshot which is of type Queen 3D snapshot and document data so that is imported up top here document data and query snapshot and then now we need to create a get snapshot doc function and essentially what I'll get snapshot doc function is is essentially an object that is going to be returned so let's go ahead and create that in the user controller so what I'm going to do is create the function so export function of get snapshot Doc and this takes in a dock which is of type document data from firestore so if I import that and essentially what will happen is it will return an object of ID of dot ID and data of dot dot data in here so that is the structure that it will have so if I go back in app model all I now need to do is import that in and now that is all the contact set what I now want to do is console log the contacts just to see if we are affecting the contacts in here so we should be getting three contacts including the logged in contact as well so if I go back into the browser in here it's just loading now so if we inspect we want to see in the console the contact list so when I open the model we now have a list of three contacts in here that is including myself so we need to filter myself out from here so let's go ahead and render the UI now so in the browser we are getting the contacts in here so let's delete this Contour log and then in handle model children what we now have is access to the contacts so in the chat model which is where the contacts are being rendered and passed in as props all we now need to do is go into here and into the chat model this should be called the contact list so let me just rename this sharp model to contact list across the board so now that is the contact list if we go into it we just need to render the UI for the contact list now we have access to the contracts first of all what I want to do is filter the contact.fill okay so for each contact.id I want to get access to the one that is not equal to the auth.currentuser.uid which is essentially all the contacts that are not the same as the logged in user so that's the first thing we need to do and I want to do optional tuning here then I want to do plot map and for each contact I want to implicitly return a div or H1 for now to seeing the contact dot name in here just to see if that works so now if I save we have an error in here so we just need to add an extra parenthesis in here and there's an error because we need to add a key to all react children and this key is going to be the contact dot ID in here so now if I save and check the browser we should have a list of two contacts in here which is Darth Vader and Yoda because we filtered out myself which is in the contacts array over here foreign

Channel: Imran Codes

Views: 535

Keywords: react material ui, react, react modal component, material ui, material ui react, react modal, material ui tutorial, react material ui tutorial, material ui react tutorial, react form with re-usable components, how to create a modal in react js, modal popup in react material ui, reusable components, material ui components, react modal popup on button click, react component, material ui react textfield, material ui form react, how to make a modal in react

Id: 5JWDdazLwE8

Length: 15min 1sec (901 seconds)

Published: Mon Jun 19 2023