[Phase 2] React Rewrite of Comment System

[noi5e]

The first phase of the React rewrite of the Comment/Legacy System was merged in #9176. Discussion in #9175. Yay! 🥳

To anyone who wants to see the React system in production, visit any research note, and add the following parameter to the end of the URL:

?react=true

I'm going to do a lot of follow-up work (in multiple PRs) in the next two weeks to try to get it as close to the fully functioning system as possible.

Including:

• system tests comparing performance with the Rails system
• emoji reaction system
• comment preview
• moderated comments

To-Do List (last edited Moday April 18th)

• [ ] ❗ temporarily disable user submission & clicking for comment publishing, updating, and deleting; add loading spinners
• [ ] run system tests on stable.publiclab.org
• [ ] reset changes to edit forms when toggling closed
• [ ] add prompt before deleting comment
• [ ] get ESLint for React & React Hooks working again, and working with codeclimate CI too
• [ ] move get_initial_react_props method from the controller to the Comment model
• [ ] make initial Component on document.load a spinner; AJAX request afterward for initial props
• [ ] alter webpacker config so REACT_COMMENTS.md error doesn't occur
• [ ] functional tests for the controller making React's initial props

Done

• [x] system tests showing that React can properly do CRUD with comments
  • [x] editing comment
  • [x] deleting comment
  • [x] posting comment, posting reply to comment
• [x] assign propTypes to nested elements
• [x] implement useReducer hook for textAreaValues and commentFormsVisibility
• [x] guest browsing: show link to /login instead of the main comment form

---

(This issue is part of the larger Comment Editor Overhaul Project with Outreachy. Refer to Planning Issue #9069 for more context)

[noi5e]

I'm back!

Starting to add system tests ensure that basic functionality for React comments exists. See #9665, which tests posting comments, and comment replies.

An added benefit of system tests for React comments is that we can use test runtime as a rough measure of whether or not React comments are faster than the Rails comment system.

React:

Rails:

A difference of .707 seconds, or 3% faster!

[jywarren]

This is awesome. Thanks @noi5e !!!

[noi5e]

Opened PR for editing comments.

Here's the new speed breakdown for all 3 new tests:

React:

Rails:

10% speed difference this time! I guess it can vary a lot depending on many factors, including whether or not processes are slowing down Terminal on my computer.