Click here to subscribe for more videos like this!
What we’re going to do next is get into the programming of this. So, I want to close this, because I no longer need them. And in server, I’m going to create a new directory called Collections. And in here, I’m going to create a new file and I’m going to call this collection, posts. And so, posts=new Mongo Collection posts. And then, I’m going to write Posts.allow insert: function return true: update: function return true: and remove: function. Function, return true. And this is going to allow us to insert update, remove from that collection. So the posts are going to let’s create a way to put the posts in first. So in the Home page, let’s actually I’m going to create a new component here called a InsertPost.jsx Insert Post is going to be the name. It’s going to be put to React.createClass And I’m going to basically render some html to put a post in to the database. So I’m going to form actually I don’t need that. Let’s just use a text area placeholder is going to be Type a post, name is going to be actually let’s just give it a className. And we’re going to put form-control and id of a post-body. The male tag has empty body, alright, and then a button. So, button className is going to be button, btn.info and it’s going to say, Save Post. Let’s save that in the home component, let’s render that. So let’s just InsertPost, there. Alright, I have to wrap it here. There, alright. Let’s indent this so it doesn’t look too bad. And if we refresh this, we’re going to see that our new component has been rendered. But if we type stuff, it doesn’t do anything right now. So let’s have an insert to that collection over here. And how we do that is we’re going to create a new function here called insertTo Collection it’s going to take event. So once you start getting more functions in React components, you need to separate them with comma. And what we’re going to do is we need to, say, onClick and in curly braces type this and then the function name. So this is going to be insert to collection. And we’re not passing anything to it so you could leave out the brackets here at the end. And the first thing we’re going to do is event.preventDefault And then we’re going to get the post body. So, content… Actually I need to var content= or we can just use straight up
Jquery here to get post body. I’m going to console.log content make sure we’re getting it. Didn’t mean to copy that, there. So let’s save that. Come back here, refresh this. There we go. And so we are getting that content into that function. So from this point, it’s a basically regular Meteor stuff, we’re going to type Post insert and then content just content. So, save that and refresh and actually to be able to I’m going to wrap this in a form element just because it’s so, that we can hit Enter, in the text area. And it will also submit it. So, onSubmit we’re going to call this .insertToCollection So, we can just actually change this to type =Submit and remove this part here and this button will also function as a means to insert it to the collection. So, to come back here and refresh let’s make sure that it gets into the collection,so This is a post to insert to the collection. I’m gonna hit Enter. Alright, this is a text area, nevermind. I’m gonna save that. And it logs it out, and If I want to make sure that it inserts it successfully, I’m going to in the console log here, I’m going to find and let’s just do that fetch, and it did put it into the database with content there as the key. So, let’s actually extend that a bit further by adding, date, added, it’s going to be new date. And if you want to be able to read it easier, you can do this, that’s what I usually do, and it’s going to make it easier if you get like huge objects that you are putting in to the collection. So, I’m going to delete that console log now. We do not need that. So, now, we’ve got this working, it’s a component to insert post. But how can we get them out of the database? So, over in our home component, I’m going to do a couple of things, First, it’s going to be, I’m going to add a property called mixins Put a colon and then, this. I’m going to type MeteorReact ReactMeteorData So, now we can create a new function and it’s going to connect MeteorData to the component and the function name is going to be getMeteorData We open it up, we do this. So, right now, I’m going to just get all the posts. And so, I’m going to variable posts, = posts, find fetch. And then in here, we’re going to return certain things to the render function. So, I’m going to just type return and then open up curly brackets here. I’m going to return posts as posts. We’re gonna save this. And now, what we can do is we can access that from the render function by for instance create a variable here called allPosts and is = to this.data.posts I’m going to console log all posts I’m going to save that I’m going to refresh this page, and it’s going to log all the posts, which right now, this is the only one we have. So, that’s awesome. How do we get it into here? Ah, well, let’s actually go back to insert posts here. I’m going to create an input field class name is going to be form-control The idea is going to be, user and the placeholder is just going to say, username. And that let’s put a line break there. I’m also going to put a line break down here. I’m going to also handle this: var user = just straight up JQuery from here, the idea of user .val I’m going to insert that to the collection as well. So, user = user and then a comma. So, we now have three fields that will get entered into the collection. I’m going to remove the current one we’ve got. Because, it doesn’t have this necessary information in it to render it. So, I’m just going to type posts find fetch, I’m going to get that ID, I’m going to say, posts.remove id that connector. Now, if I run post find fetch, it finds nothing because we’ve just removed them.
