This Week in CloseBrace - 4/28/17

Man! Another week gone by already. Well, that's all right. Without the inexorable march of time, it'd still be freezing cold and snowy out, and that would be a tremendous bummer. Instead it's just raining a lot, which is great for the grass I planted out front, and—wait, sorry, this is supposed to be a blog about coding and such. Let's talk about that!

First off, I posted two new tutorials this week. The first, Five Minute React 13 – Express Routing, dives into how Express's routes work, and gives you some example code to manipulate them. The second, Five Minute React 14 – Express Cleanup and API Setup, accomplishes three things: we switch app.js over to ES6/ES7, we install a handy program called Nodemon so we don't have to keep manually resetting our server, and we created the skeleton for our API, through which we'll send data to the MusicList front-end. Sweet!

On the development side, I've written more than 300 lines of JavaScript for the commenting system so far (and that doesn't include all of the lines that I wrote and then deleted due to refactoring or finding a superior approach to a problem). I got posts rendering last week, but that was superficial – just JavaScript that hit the API, produced some HTML, and could figure out if a comment was a reply or not (thus threading it properly). This week required a much deeper dive into the guts of things.

Because I'm doing single threading, I had to figure out how to associate comments with the parent comment, even if the reply was technically made to another reply. I solved that in this way:

const commentId = this.dataset.commentid;
const parentId = this.dataset.parentid;
const replyToId = parentId === 'null' ? commentId : parentId;

Which is basically saying "if the reply link is passing a parent ID in a data attribute, it means we're already in a thread, so use that parent ID to keep this reply in the same thread. But if there's no parent ID passed, it means this comment being replied to is a top-level comment, so start a new thread." This is fine, especially since replies still track who was being replied to, so you'll see "by ReplyAuthor in reply to CommentAuthor" on each reply. Like this:

Comments with In Reply To enabled

You can see that unlike last week, those comments have appropriate links down at the bottom. I had to write the routine to generate them, and then also had to write a new routine to assign them event handlers, since I'm not using jQuery, and vanilla JS event handlers only apply to stuff that exists in the DOM when the click handler's assigned. Since all of those comment boxes are generated by JavaScript, you have to manually iterate through them after they've been rendered in order to catch click events on the links.

I also built out a routine that creates a reply box and appends it below the comment being replied to, while nuking any other open reply boxes previously generated … with an "are you sure?" check if any of those boxes has text in it.

Lots more to go on the comments system - I've been focusing on display but will soon have to jump over to writing the API routines for posting (to make sure comments get correctly associated with their replies, and so forth). Still, lots of good progress made. I'm excited to get this thing out the door, since right now I think the commenting system is the weakest aspect of CloseBrace.

See you next week!

Image copyright: dragon_fang / 123RF Stock Photo

Author image
Founder and creator of CloseBrace
Providence, RI, USA Website