Update comment counts

[unDemian]

Built on top of #40720

Changes proposed in this Pull Request

Update realtime comment counts

• In following view http://calypso.localhost:3000/read
• In feed view http://calypso.localhost:3000/read/feeds/ you can get there by clicking the author name in the following view
• In full post view for both feed and blog http://calypso.localhost:3000/read/blogs//posts/ by clicking the post title in a feed/conversation

Testing instructions

Example https://d.pr/v/euB0QQ

• Open all the above pages
• Apply patch D41517
• Sandbox one of your blogs, follow it and start a conversation (multiple comments and replies)
• Add a comment to one of your posts on the frontend, the comment count should increase in calypso
• Try the same after hard refreshing the section

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Webpack Runtime (~661 bytes removed 📉 [gzipped])

name      parsed_size           gzip_size
manifest      -6748 B  (-3.8%)     -661 B  (-2.0%)

Webpack runtime for loading modules. It is included in the HTML page as an inline script. Is downloaded and parsed every time the app is loaded.

App Entrypoints (~34359 bytes added 📈 [gzipped])

name                   parsed_size            gzip_size
entry-main               +152268 B  (+10.5%)   +35297 B  (+9.5%)
entry-gutenboarding         +182 B   (+0.0%)     -392 B  (-0.1%)
entry-domains-landing       -142 B   (-0.0%)     -533 B  (-0.3%)
entry-login                  +21 B   (+0.0%)      -13 B  (-0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~167784 bytes removed 📉 [gzipped])

name                    parsed_size            gzip_size
comments                   -90944 B  (-18.3%)   -18964 B  (-16.4%)
stats                      -82997 B  (-10.9%)   -17007 B   (-8.8%)
reader                     -81359 B  (-17.4%)   -22060 B  (-18.2%)
post-editor                -76932 B   (-4.1%)   -14033 B   (-2.7%)
activity                   -69985 B  (-16.0%)   -13238 B  (-11.9%)
help                       -65833 B  (-13.9%)   -12372 B  (-10.6%)
backups                    -64709 B  (-19.7%)   -11869 B  (-14.9%)
settings-writing           -64659 B  (-15.3%)   -12065 B  (-11.3%)
concierge                  -64180 B  (-22.2%)   -11864 B  (-16.9%)
site-blocks                -25462 B   (-9.1%)    -6552 B   (-9.0%)
phoenix                    +22419 B     (new)    +6409 B     (new)
posts-custom               -15095 B   (-4.9%)    -4335 B   (-5.3%)
posts                      -15095 B   (-4.9%)    -4335 B   (-5.2%)
woocommerce                -12390 B   (-0.6%)    -3327 B   (-0.6%)
pages                      -11213 B   (-5.7%)    -3160 B   (-5.7%)
zoninator                  -10639 B   (-4.0%)    -3059 B   (-4.2%)
home                       -10626 B   (-4.2%)    -3860 B   (-5.6%)
gutenberg-editor            -6592 B   (-0.8%)    -1721 B   (-0.8%)
checkout                    -6117 B   (-0.5%)     -411 B   (-0.1%)
people                      -5623 B   (-1.7%)    -1495 B   (-1.7%)
media                       -3218 B   (-0.9%)     -689 B   (-0.7%)
domains                     -1992 B   (-0.2%)     +900 B   (+0.4%)
settings                    -1938 B   (-0.5%)     -404 B   (-0.4%)
themes                      -1713 B   (-0.5%)    -1092 B   (-1.3%)
plugins                     -1679 B   (-0.4%)     -336 B   (-0.3%)
plans                       -1563 B   (-0.4%)     -297 B   (-0.3%)
jetpack-connect             -1563 B   (-0.3%)     -291 B   (-0.2%)
theme                       -1447 B   (-0.6%)    -1022 B   (-1.6%)
settings-security           -1364 B   (-0.6%)     -276 B   (-0.5%)
settings-performance        -1364 B   (-0.6%)     -283 B   (-0.5%)
marketing                   -1364 B   (-0.4%)     -287 B   (-0.3%)
purchases                   -1321 B   (-0.1%)     -297 B   (-0.1%)
account                     -1293 B   (-0.4%)     -305 B   (-0.3%)
export                      -1229 B   (-0.7%)     -240 B   (-0.5%)
google-my-business          -1225 B   (-0.5%)     -251 B   (-0.3%)
email                       -1146 B   (-0.4%)     +479 B   (+0.7%)
signup                      -1117 B   (-0.7%)     -213 B   (-0.5%)
hosting                     -1064 B   (-0.6%)     -224 B   (-0.4%)
earn                        -1064 B   (-0.4%)     -229 B   (-0.3%)
customize                    -943 B   (-0.7%)     -792 B   (-2.0%)
checklist                    -722 B   (-0.3%)     -186 B   (-0.3%)
notification-settings        -718 B   (-0.2%)     -203 B   (-0.2%)
accept-invite                -669 B   (-0.3%)     -157 B   (-0.2%)
wp-super-cache               -560 B   (-0.3%)     -110 B   (-0.2%)
sites                        -560 B   (-0.8%)     -118 B   (-0.6%)
settings-discussion          -560 B   (-0.4%)     -104 B   (-0.3%)
sensei                       -560 B   (-0.7%)     -116 B   (-0.5%)
scan                         -560 B   (-0.4%)     -116 B   (-0.3%)
preview                      -560 B   (-0.8%)     -119 B   (-0.6%)
migrate                      -560 B   (-0.5%)     -111 B   (-0.3%)
jetpack-cloud-settings       -560 B   (-0.6%)     -120 B   (-0.4%)
import                       -560 B   (-0.3%)     -114 B   (-0.2%)
hello-dolly                  -560 B   (-0.6%)     -115 B   (-0.5%)
feature-upsell               -560 B   (-0.4%)     -109 B   (-0.3%)
account-close                -514 B   (-0.2%)     -176 B   (-0.2%)
security                     -214 B   (-0.0%)      -91 B   (-0.1%)
privacy                      -214 B   (-0.1%)      -91 B   (-0.1%)
me                           -214 B   (-0.1%)      -91 B   (-0.2%)
happychat                    -214 B   (-0.1%)      -91 B   (-0.1%)
devdocs                       -34 B   (-0.0%)      +21 B   (+0.1%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~122180 bytes removed 📉 [gzipped])

name                                                         parsed_size            gzip_size
async-load-design-blocks                                       -144849 B   (-5.2%)   -30866 B   (-4.7%)
async-load-components-web-preview-component                     -81487 B  (-18.9%)   -22205 B  (-19.9%)
async-load-blocks-inline-help-popover                           -64480 B  (-27.1%)   -11930 B  (-21.0%)
async-load-signup-steps-clone-point                             -64464 B  (-41.1%)   -11904 B  (-32.7%)
async-load-blocks-calendar-popover                              -63620 B  (-26.5%)   -11726 B  (-25.1%)
async-load-blocks-support-article-dialog-dialog                 -60818 B  (-69.7%)   -17498 B  (-69.3%)
async-load-my-sites-checklist-wpcom-checklist-component-jsx     -10040 B  (-13.8%)    -3955 B  (-20.0%)
async-load-layout-masterbar-drafts-popover                       -9779 B  (-33.5%)    -2792 B  (-32.2%)
async-load-post-editor-media-modal                               -2558 B   (-1.0%)     -602 B   (-0.9%)
async-load-blocks-inline-help                                    -1514 B   (-2.6%)     -307 B   (-2.2%)
async-load-design-playground                                     -1513 B   (-0.1%)     -402 B   (-0.1%)
async-load-design                                                -1513 B   (-0.1%)     -432 B   (-0.1%)
async-load-signup-steps-domains                                  -1385 B   (-0.6%)     -328 B   (-0.6%)
async-load-signup-steps-site-picker                              -1175 B   (-2.6%)     -281 B   (-2.3%)
async-load-signup-steps-plans-atomic-store                        -949 B   (-0.8%)     -204 B   (-0.7%)
async-load-signup-steps-plans                                     -949 B   (-0.6%)     -223 B   (-0.5%)
async-load-my-sites-current-site-notice                           -873 B   (-1.9%)     -208 B   (-1.8%)
async-load-signup-steps-site-topic                                -829 B   (-3.0%)     -205 B   (-2.6%)
async-load-signup-steps-about                                     -829 B   (-1.5%)     -205 B   (-1.3%)
async-load-layout-guided-tours-component                          -665 B   (-0.7%)     -121 B   (-0.6%)
async-load-signup-steps-wp-for-teams-site                         -615 B   (-2.4%)     -156 B   (-2.5%)
async-load-signup-steps-user                                      -615 B   (-0.5%)     -153 B   (-0.5%)
async-load-signup-steps-theme-selection                           -615 B   (-1.0%)     -135 B   (-0.8%)
async-load-signup-steps-test-step                                 -615 B   (-7.7%)     -168 B   (-7.3%)
async-load-signup-steps-survey                                    -615 B   (-3.7%)     -145 B   (-3.3%)
async-load-signup-steps-site-type                                 -615 B   (-5.4%)     -165 B   (-5.2%)
async-load-signup-steps-site-title                                -615 B   (-5.5%)     -163 B   (-5.3%)
async-load-signup-steps-site-style                                -615 B   (-2.1%)     -175 B   (-1.8%)
async-load-signup-steps-site-or-domain                            -615 B   (-3.2%)     -158 B   (-2.9%)
async-load-signup-steps-site                                      -615 B   (-2.5%)     -155 B   (-2.5%)
async-load-signup-steps-rewind-were-backing                       -615 B   (-7.1%)     -168 B   (-6.5%)
async-load-signup-steps-rewind-migrate                            -615 B   (-2.5%)     -167 B   (-2.5%)
async-load-signup-steps-rewind-form-creds                         -615 B   (-1.6%)     -167 B   (-1.6%)
async-load-signup-steps-rebrand-cities-welcome                    -615 B   (-4.7%)     -166 B   (-4.6%)
async-load-signup-steps-reader-landing                            -615 B   (-5.4%)     -169 B   (-5.4%)
async-load-signup-steps-passwordless                              -615 B   (-2.5%)     -159 B   (-2.6%)
async-load-signup-steps-import-url-onboarding                     -615 B   (-1.8%)     -150 B   (-1.6%)
async-load-signup-steps-import-url                                -615 B   (-2.8%)     -151 B   (-2.5%)
async-load-signup-steps-import-preview                            -615 B   (-2.5%)     -158 B   (-2.2%)
async-load-signup-steps-creds-permission                          -615 B   (-2.7%)     -156 B   (-2.5%)
async-load-signup-steps-creds-confirm                             -615 B   (-2.7%)     -156 B   (-2.5%)
async-load-signup-steps-creds-complete                            -615 B   (-7.1%)     -166 B   (-6.4%)
async-load-signup-steps-clone-start                               -615 B   (-4.4%)     -169 B   (-4.1%)
async-load-signup-steps-clone-ready                               -615 B   (-2.2%)     -169 B   (-2.2%)
async-load-signup-steps-clone-jetpack                             -615 B   (-5.9%)     -167 B   (-5.9%)
async-load-signup-steps-clone-destination                         -615 B   (-3.1%)     -166 B   (-3.2%)
async-load-signup-steps-clone-credentials                         -615 B   (-1.1%)     -152 B   (-1.0%)
async-load-signup-steps-clone-cloning                             -615 B   (-4.5%)     -170 B   (-4.3%)
async-load-layout-guided-tours                                    -615 B   (-3.5%)     -148 B   (-3.6%)
async-load-docs-selectors                                         -615 B  (-11.0%)     -172 B   (-9.8%)
async-load-components-sites-popover                               -560 B   (-1.2%)     -127 B   (-1.0%)
async-load-blocks-jitm-templates-sidebar-banner                   -504 B   (-3.2%)     -145 B   (-3.1%)
async-load-blocks-jitm-templates-notice                           -504 B   (-3.1%)     -148 B   (-3.1%)
async-load-blocks-jitm-templates-default                          -504 B   (-4.6%)     -142 B   (-4.3%)
async-load-my-sites-site-settings-seo-settings-form               -369 B   (-0.1%)      -92 B   (-0.1%)
async-load-blocks-product-plan-overlap-notices                    -369 B   (-5.7%)     -100 B   (-4.8%)
async-load-blocks-support-article-dialog                          -301 B  (-29.5%)      -65 B  (-14.5%)
async-load-my-sites-current-site-stale-cart-items-notice          -300 B   (-0.8%)      -68 B   (-0.6%)
async-load-apps-notifications-index-jsx                           -300 B   (-0.3%)      -68 B   (-0.2%)
async-load-blocks-reader-full-post                                +218 B   (+0.5%)      +50 B   (+0.5%)
async-load-layout-nps-survey-notice                               -214 B   (-0.9%)      -53 B   (-0.9%)
async-load-lib-preferences-helper                                  -11 B   (-0.1%)       -9 B   (-0.2%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[mhsdef]

What about bumping the count in the post instead of making a separate pathway (reduxCommentCount)? Would that work?

Something like this (not fully tested -- there's a bit of odd what I presume to be placeholder driven flutter in the window posting):

diff --git a/client/state/comments/actions.js b/client/state/comments/actions.js
index 6ef35729ef..026a1ff093 100644
--- a/client/state/comments/actions.js
+++ b/client/state/comments/actions.js
@@ -6,6 +6,7 @@ import {
        COMMENT_COUNTS_REQUEST,
        COMMENT_REQUEST,
        COMMENTS_CHANGE_STATUS,
+       COMMENTS_COUNT_INCREMENT,
        COMMENTS_DELETE,
        COMMENTS_EDIT,
        COMMENTS_LIKE,
@@ -156,6 +157,19 @@ export const requestCommentCounts = ( siteId, postId ) => ( {
        postId,
 } );
 
+/**
+ * Creates an action that increments the comment count for a given post.
+ *
+ * @param {number} siteId Site identifier
+ * @param {number} [postId] Post identifier
+ * @returns {object} Action that increments comment count for a post.
+ */
+export const incrementCommentCount = ( siteId, postId ) => ( {
+       type: COMMENTS_COUNT_INCREMENT,
+       siteId,
+       postId,
+} );
+
 /**
  * Creates an action that permanently deletes a comment
  * or removes a comment placeholder from the state
diff --git a/client/state/data-layer/wpcom/sites/utils.js b/client/state/data-layer/wpcom/sites/utils.js
index 04d4e02cb8..4bb9ef8d2b 100644
--- a/client/state/data-layer/wpcom/sites/utils.js
+++ b/client/state/data-layer/wpcom/sites/utils.js
@@ -106,8 +106,6 @@ export const updatePlaceholderComment = (
                                },
                        },
                },
-               // increment comments count
-               { type: COMMENTS_COUNT_INCREMENT, siteId, postId },
        ];
 
        if ( !! refreshCommentListQuery ) {
diff --git a/client/state/reader/posts/reducer.js b/client/state/reader/posts/reducer.js
index f6d6f84bc7..9531d8cb59 100644
--- a/client/state/reader/posts/reducer.js
+++ b/client/state/reader/posts/reducer.js
@@ -2,11 +2,12 @@
 /**
  * External dependencies
  */
-import { keyBy, get } from 'lodash';
+import { findKey, get, keyBy } from 'lodash';
 
 /**
  * Internal dependencies
  */
+import { COMMENTS_COUNT_INCREMENT } from 'state/action-types';
 import { READER_POSTS_RECEIVE, READER_POST_SEEN } from 'state/reader/action-types';
 import { combineReducers } from 'state/utils';
 
@@ -22,7 +23,29 @@ export function items( state = {}, action ) {
                case READER_POSTS_RECEIVE:
                        const posts = action.posts || action.payload.posts;
                        return { ...state, ...keyBy( posts, 'global_ID' ) };
+
+               case COMMENTS_COUNT_INCREMENT: {
+                       const globalId = findKey( state, ( { site_ID, ID } ) => {
+                               return site_ID === action.siteId && ID === action.postId;
+                       } );
+
+                       if ( ! globalId ) {
+                               return state;
+                       }
+
+                       return {
+                               ...state,
+                               [ globalId ]: {
+                                       ...state[ globalId ],
+                                       discussion: {
+                                               ...state[ globalId ].discussion,
+                                               comment_count: state[ globalId ].discussion.comment_count + 1,
+                                       },
+                               },
+                       };
+               }
        }
+
        return state;
 }

[mhsdef]

Woof, the "flake" is the flutter between the post-comment-list.jsx way of calculating -- which takes into account the existing tree and what's pending -- and that the COMMENTS_COUNT_INCREMENT dispatch happens after the roundtrip to the serverside.

tl;dr: we need to extract the fancy logic that gives actualCommentCount to somewhere else, so we can use it in ReaderPostActions too.

(on the bright side....we'd be fixing this as master doesn't update at all!)

[unDemian]

This is still work in progress, at first I thought I can just increment totals but as it turns out on hard refreshes it won't work so I added the global_ID on the backend to make it work, I guess updating the inline reader post would make more sense now that we have the global id, I'll have to take a look comments and comments/counts is just so much fun when combined with reader's posts.

[unDemian]

I'm not quite sure I can reproduce the flakiness you mentioned, could you provide a quick video recording if possible. I pushed some updates that would contain the comments count to the reader concern.

[unDemian]

Closed in favor of using lasagna.js