Frontend: Optimize comments reducer

[Reeywhaar]

The problem:

When adding, or editing comment we end up with full rerender of all comments tree due to how we store comments in store. We store them just like we receive them from api in a tree structure.
I see great degradation in rendering of https://remark42.com/demo/, and it will only intersify as soon we get #253

Solution:

Split current comments reducer which has current structure:

type Node = {comment: {id: string, text: string, ...}, replies?: Node[]}

comments: Node[]

Into three objects:

top_comments: (Comment["id"])[], // We filter out top comments ids which allows us to keep sorting that we received from server
childs: {[key: Comment["id"]]: (Comment["id"])[]}, // Map of comment id to it's childs ids (`replies` field we get from server)
comments: {[key: Comment["id"]]: Comment}, // just map of comment's id to its content

Also we can add another reducer:

hashes: {[key: Comment["id"]]: string}, hash is just simple `${comment.id} + (comment.edit ? comment.edit.time : "")`

And with this we can make shouldComponentUpdate to check only if nextProps.hash equals to this.props.hash in such map and bailout of rerender easily.

With these manipulations we get:

• Editing comment becomes replacing one object in comments reducer
• Adding comment becomes adding Comment in comments reducer, and pushing either to childs[id] reducer if it was reply, or pushing id to top_comments, so in case of adding of deep comment only childs[id] and comments[id] object get changed, and not the whole tree.

I'm not sure if it really will help with performance, and even if performance is same, manupulating comments becomes much easier

[Reeywhaar]

done in #397