Vue & Firebase Real-time Chat (Preview) #8 - New Message Component

okay so we've made this chat window right here this component and we said that we wanted to separate this form at the bottom where a user adds a new message into its own component so let's create that new component first of all over here and we'll call it new message view now then we don't need to create a route for this because obviously it's not going to have its own page we're just going to nest this component inside here so we'll do that first of all we'll import the file inside here we'll say import and it would be new message from and then apps forward slash components forward slash new message okay so now we can register it down here we'll create a new property core components which will be an object and inside this object will register the new message component okay so now instead of this input field right here we'll nest the new message component now in this new message component we'll be getting the message from the user in an input field and sending it to the database but we also want to get from the user the name now we currently have access to the name here as a prop but we can pass it also down into this new message component as well so we'll say name is equal to and then we'll say name in here now this is going to pass downn name as a literal string so we need to do some data binding here to bind something dynamic in here so now it will look for this property name over here and we can pass it down into this component so we have access to it okay so let's save that first of all and then head to new message to create this template so template tags first of all then inside we need a div with a class of new - message so inside this component we just want basically a form with an input field and maybe a label so let's create that form first of all we don't need the action but we will attach a submit event to it so at sign submit and we want to prevent the default action will set this equal to a function called add message now we don't have that created yet we'll do it in a minute okay so inside this form we want a label first of all and this is going to be for the new message input field and in the text area we'll say new message and then I want a user to click enter to add this because when you click enter in a form that submits the form we don't just have to click on a button we can click enter inside a form and that will fire the submit event as well so I'll just say in brackets enter to add okay so now we have the label we just need the input field so import it's of type text and it's gonna have a name property equal to new - message alright now we'll create our script tag down here and then come back to this in a second so let's do I'm a script tag where we have our data property inside this returns an object okay so now we need some kind of property to store the value of this input field um now we'll call this new message so new message like so and to begin with set it equal to null now what we can do over here then is say v-model equals new message so that whatever user types into this field it updates this property with so we're storing that property now we also need to give this a nameless component and it's new message and remember we're receiving a prop from the parent component so we'll say props and that prop is the name okay so now we have this hooked up to here so when a user clicks enter it's gonna fire this function right here ads message so let's define that in our methods property create the function called add message and inside here what do we want to do well ultimately we want to send this data the message and the name and also a timestamp of when this message was created to the database but for now let's just log them to the console we'll say console.log this new message will also log this name because that's the proper receive it and then we'll also log date now to create a timestamp so when a user clicks enter it's going to grab the now date and it's going to tap that on here and we're going to publish that to the database as well so let's save this and see if it works over here we can see this component is embedded into the chat window if we inspect the elements so we can get the console over here we have some errors there but if we refresh hopefully we don't get those errors okay cool now we'll enter in a name first of all mário enter the chat and let's add a message so we'll just say Haider press ENTER and now we get hey there the message Mario the name and this timestamp right here now this is milliseconds since a certain date so it doesn't look like a particular time but that millisecond value will allow us to form at a time later on okay so we'll use this to store in the database then when we retrieve it back we can take that time stamp this millisecond value and we can turn it into a date that is logical something like 4:00 p.m. on Thursday or something like that okay so there we go we've created this new message component now and we grab the data that we need so now we can look at how it can get this data and send it to our fire store