Implement useReducer for Comment State Management (React commenting)

[noi5e]

Part of a React rewrite of the commenting system, see #9365 for more context.

In this PR, I begin to switch state management from React's useState hook to useReducer instead. useReducer is modeled after other React state management libraries like Redux.

Why the switch? The app state is starting to get very complex, and will only get more complex as features are added. For example, let's take the example of "disable submit comment button after user clicks on it, and before server sends a response". This is a feature which I'm going to start work on soon, and it will require adding more variables into state: waitingForServerResponse, submitButtonIsDisabled, and the like.

Switching over to useReducer will make this codebase easier to understand and debug in the long run.

I've created a new reducers.js file. Everything the app does that changes state will be described in this file. For now, it looks like this:

/* eslint-disable complexity */
import { makeDeepCopy } from "./helpers";

const reducer = (state, action) => {
  switch(action.type) {
    case "CREATE COMMENT":
      return {
        ...state,
        comments: [
          ...state.comments, 
          action.newComment
        ]
      };
    case "UPDATE COMMENT":
      for (let i = 0; i < state.comments.length; i++) {
        // find the comment in state
        if (state.comments[i].commentId === action.newComment.commentId) {
          let newComment = makeDeepCopy(state.comments[i]);
          newComment.htmlCommentText = action.newComment.htmlCommentText; // update comment text
          newComment.rawCommentText = action.newComment.rawCommentText;
          return {
            ...state,
            comments: Object.assign(
              [],
              state.comments,
              { [i]: newComment }
            )
          }; // keep the rest of state.comments, but replace comment at index i with newComment
        }
      }
      break;
    case "DELETE COMMENT":
      for (let i = 0; i < state.comments.length; i++) {
        // find the comment in state by ID
        if (state.comments[i].commentId === action.commentId) {
          return {
            ...state,
            comments: state.comments.filter(comment => action.commentId !== comment.commentId)
          };
        }
      }
      break;
    default:
      throw new Error(); // default should never be called
  }
}

export {
  reducer
}

---

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

[gitpod-io]

[codeclimate]

Function reducer has a Cognitive Complexity of 11 (exceeds 5 allowed). Consider refactoring.

[codeclimate]

Function reducer has 39 lines of code (exceeds 25 allowed). Consider refactoring.

[codeclimate]

Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

[codeclimate]

Code Climate has analyzed commit 7e76038 and detected 4 issues on this pull request.

Here's the issue category breakdown:

Category	Count
Complexity	3
Style	1

View more on Code Climate.

[codecov]

Codecov Report

❗ No coverage uploaded for pull request base (main@700fdf4). Click here to learn what that means.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main    #9801   +/-   ##
=======================================
  Coverage        ?   82.07%           
=======================================
  Files           ?       98           
  Lines           ?     5940           
  Branches        ?        0           
=======================================
  Hits            ?     4875           
  Misses          ?     1065           
  Partials        ?        0           

[noi5e]

Ready to merge! Tests pass. Asking for an override on the codeclimate issues :)

[jywarren]

Fantastic work, @noi5e, thank you!