This a behind-the-scenes change that will let us do cool stuff later!

Background:

Imagine you want to 'like' a post, or reply to it. We need a way that the client can tell the server which post you are talking about! We could use their position ("I want to reply to the 2nd post"), but that could get confusing if we ever reorder the posts, or delete one. It's simpler if we give every post its own ID number (just like a student ID number)

Part 1

In index.js, when we create a new post, give it a random ID number

post.id = Math.round(Math.random() * 10000);

This isn't a very good way of giving out ID numbers (do you know why?) but it's good enough for now.

How to check your change is working

Remember to kill and restart the server first.
post a new post
Go to http://localhost:3000/posts and see if your new post has an ID number.

NOTE: our posts also have a _id field (with the underscore in front) - that's from our database, which gives the posts id numbers as well. We're going to ignore those though and add our own id as id with no underscore in front.

Optional side adventure

In Chrome, open the Developer Tools and choose 'Console'

Try typing these commands into the console (hit Enter after each one) and see if you can work out what each command does:

Math.random()

Math.random() * 1000

Math.round(Math.random() * 1000)

OK back to work (Part 2)

Let's include the ID in the feed.

Open feed.html

Find the code where we create each post. You will see that we insert various things into the html, like post.message, post.author, maybe post.time… You need to add post.id.

Put post.id inside a new <div> tag and give it class="postId".

[x] Check: the post ids are now displayed in the feed.

Don't worry about making it look good, because we are going to use CSS To make it invisible!

In the style.css file, add a rule to make the ids invisible:

.postId {
    display: none;
}

The ID will still be there if you view the source (using the Developer Tools), but it's invisible to users.

Part 3

Now our posts have unique ids, we can give our server a function to get a particular post when we ask for it.

In index.js, let's make a new special GET request that the server listens to.

app.get('/post', function (req, res) {
   let searchId = req.query.id;
   console.log("Searching for post " + searchId);
   res.send("fix this later");
});

Try it out by restarting the server then going to an address like this: http://localhost:3000/post?id=1001

that's post without the s, not posts

If you look at the Terminal\Command Prompt, you should see "Searching for post 1001"

But it doesn't actually search for the post yet.

How do we find the right post?

We can use the 'find' function to search a list for something that passes a certain test. Our test will simply check if the id is the id we are looking for.

   let post = posts.find(x => x.id == searchId);
   res.send(post);

Test that it's working by going to http://localhost:3000/post?id=1001 again. Instead of 1001 put in the id of an actual post. It should show details of that post.

girlcodeakl / girlcode2018-term2

Give each post a unique ID #18

Part 1

Optional side adventure

OK back to work (Part 2)

Part 3