Birmingham | 26-SDC-Mar | Chioma Okeke | Sprint 2 | Chat App

[JanefrancessC]

Learners, PR Template

Self checklist

• I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
• My changes meet the requirements of the task
• I have tested my changes
• My changes follow the style guide

Changelist

Backend link
Frontend link

Additional Feature

• I added the like and dislike buttons, which are incremented on click.

[cjyuan]

1. Code works well on normal circumstances. Well done.

2. Code could use some documentation (comments).

   A useful rule of thumb is to ask yourself whether you could still explain or figure out how the code works few months from now. If the answer is uncertain, consider adding a comment to help future readers understand the intent and reasoning behind it.

3. The README has this requirement:

   It must also support at least one additional feature.

   In the PR description, can you list the extra features you implemented?

[cjyuan]

The code in dislikeMessage() and likeMessage() is nearly identical and could be refactored to reduce duplication.

The same also applies to their counterparts on the server side.

[JanefrancessC]

I will also modify this by creating a generic function, then using a conditional statement to increment either the like or dislike button.

[JanefrancessC]

1. Code works well on normal circumstances. Well done.

2. Code could use some documentation (comments).
   A useful rule of thumb is to ask yourself whether you could still explain or figure out how the code works few months from now. If the answer is uncertain, consider adding a comment to help future readers understand the intent and reasoning behind it.

3. The README has this requirement:

   It must also support at least one additional feature.

   In the PR description, can you list the extra features you implemented?

Thank you for the thorough feedback. I have edited the PR to include the extra feature and will modify my code per the review.

[cjyuan]

Changes look great. I especially like the internal documentation (comments) because they really make reading the code easier.

I only have a few more comments for you to consider. Change is optional.

[cjyuan]

I missed this in my previous review. Could you use an AI to find out

Why /messages would make a better URI than / for a service that get and add messages?

[cjyuan]

Could consider rearrange the code this way to prevent unnecessary operations from being performed when input is invalid:

app.post("/:id/:reaction", (req, res) => {
  const id = Number(req.params.id);
  const reaction = req.params.reaction;

  // Validate id and reaction first

  // if reaction is invalid
  if (...) {
    res.status(400).json({ error: "Invalid reaction!" });
    return;
  }

  const message = messages.find((msg) => msg.id === id);
  if (!message) {
    res.status(404).json({ error: "Message not found" });
    return;
  }

  if (reaction === "like") {
    message.likes++;
  } else if (reaction === "dislike") {
    message.dislikes++;
  }

  res.json(message);
});

[cjyuan]

Note: An alternative is to implement a helper function

function escapeHtml(str) {
  const div = document.createElement("div");
  div.textContent = str;
  return div.innerHTML;
}

to escape special characters and use your original approach to construct the desired element.