More Acebook and Java Sessions
We carried on with Acebook again today of course!
Only Users Can Post
In the morning we tried to implement the feature that you can only post when you are signed in. To do this we would need a way to check if a user was logged in. Initially we tried setting a private variable called currentUser to the user after they sign in. Then we could check that currentUser wasn’t null when we go to post, otherwise return an error. This worked, but…
It didn’t work.
It worked in the fact that we could now check if someone was logged in, however the problem was that once it was deployed to Heroku, the variable currentUser would be accessed by everyone at the same time. If two people used the website at the same time, the currentUser would be set to whoever signed in last for both. If someone signed in, the next person onto the website would be able to post as them. Obviously this is completely wrong so we went back to drawing board!
Sessions
After this we decided we should use Session variables, the same way as we had in Sinatra in Ruby. In Ruby this was really easy, you just enabled sessions and then set your session to whatever you wanted. However after an hour or two of Googling on the team this morning we were unable to find a quick way to do it. The best we had was a guide on how to use Spring Security shared with us by the other team, which handled logging in and sessions for you.
This was a lot of work though, and involved changing a lot of what we had already done, and also adding lots of extra classes and config files which we wouldn’t really understand. I didn’t really feel too comfortable copying it without understanding it, so I kept looking over lunch for an easier solution.
Eventually I was able to figure out a much easier way, using HttpServlet. There wasn’t really any guides on how to do this that I could find, I mostly just pieced information together from different places and trial and errored my way to a working solution! Seeing as there wasn’t anything already out there, I wrote my own guide on how to do it! Hopefully it will help someone in the future stuck in the same position we were!
Basically it worked by saving a cookie in the HTTP header:
We could then access this in the rest of the website.
Doing this allowed us to add checks in for if a user was signed in, so now trying to post while not signed in just takes you to the sign up page.
Adding a Comment
In the afternoon we started work on adding comments to posts. To do this, we had to make a new table for comments in the database, with a Foreign Key relating to the post in the posts table. This way comments could be linked to a specific post.
We followed a lot of the same process for Comments as we did for Posts; creating a form, an html page, and a get and post method in the controller. The main difference was the addition of a PathVariable
@GetMapping(value = "/post/{post_id}/comment")
public ModelAndView comment(Model model, HttpServletRequest request, @PathVariable Long post_id) {
In the Get value, we have {post_id}. Being in the curly brackets means that it can be updated, and it gets updated when we click the link that brings us to this part of the web app, which I will show you in a minute. Adding @PathVariable Long post_id lets us access this post_id variable in our url path.
To update the {post_id} we added a line of code to our post.js file which is a JavaScript file used by the React app.
<a href={"post/"+props.post._links.self.href.split("/")[props.post._links.self.href.split("/").length-1]+"/comment"}>Comment!</a>
Here is a break down of what is happening in this line of code:
<a>– this tag indicates that it is a link
href= – href is how you create a hyperlink on a HTML page
{} – everything inside the curly brackets is the destination of the link.
“post/”+ – this is the first part of the link, just adds ‘post/’ to the end of the url. The + allows us to concatenate something onto the end of it.
props.post._links.self.href – grabs an attribute from the api which contains the ID of the post.
.split(“/”) – as the above returns a URL, this splits the URL at every ‘/’ and puts it into an array.
[props.post._links.self.href.split(“/”).length-1] – as the thing we want is at the end of the array, we do the same thing, but take the length and minus 1 to get the last thing in the array. Putting this inside the square brackets next to the first array selects that item from the array.
+”/comment” – adds comment to the end of the link string
As it is quite hard to explain the array bit above, I will visualise it here below. I have added a console.log() so that every post prints props.post._links.self.href.split(“/”) to the console:
When the posts are loaded, each one prints its array to the console. Each one has a length of 6, with the ID of the post always being at the end (in spot number 5 as arrays start counting from 0). This is why we do the length minus 1 when we want to grab the ID from the array, as it is in position 5.
This means that the comment link for each post takes us to a unique url:
This allows us to save the comment with the post id into the database
Song of the Day:
And actually this remix from YouTube
Josh's Blog 