What we're going to do next is
get into the
programming of this.
So, I wan't 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
top 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 refrresh 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 wan't 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, 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.