Sort likes with current user on top (#95139)

client/blocks/post-likes/index.jsx

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import QueryPostLikers from 'calypso/components/data/query-post-likers';
 import Gravatar from 'calypso/components/gravatar';
 import { recordGoogleEvent } from 'calypso/state/analytics/actions';
+import { getCurrentUserId } from 'calypso/state/current-user/selectors';
 import { countPostLikes } from 'calypso/state/posts/selectors/count-post-likes';
 import { getPostLikes } from 'calypso/state/posts/selectors/get-post-likes';
 
@@ -70,8 +71,22 @@ class PostLikes extends PureComponent {
 			showDisplayNames,
 			onMouseEnter,
 			onMouseLeave,
+			currentUserId,
 		} = this.props;
 
+		// Sort likes so that the current user's like is always first
+		const sortedLikes = likes
+			? [ ...likes ].sort( ( a, b ) => {
+					if ( a.ID === currentUserId ) {
+						return -1;
+					}
+					if ( b.ID === currentUserId ) {
+						return 1;
+					}
+					return 0;
+			  } )
+			: [];
+
 		let noLikesLabel;
 
 		if ( postType === 'page' ) {
@@ -81,7 +96,7 @@ class PostLikes extends PureComponent {
 		}
 
 		// Prevent loading for postId `0`
-		const isLoading = !! postId && ! likes;
+		const isLoading = !! postId && ! sortedLikes;
 
 		const classes = clsx( 'post-likes', {
 			'has-display-names': showDisplayNames,
@@ -97,7 +112,7 @@ class PostLikes extends PureComponent {
 						…
 					</span>
 				) }
-				{ likes && likes.map( this.renderLike ) }
+				{ sortedLikes && sortedLikes.map( this.renderLike ) }
 				{ this.renderExtraCount() }
 				{ ! isLoading && ! likeCount && noLikesLabel }
 			</div>
@@ -109,9 +124,11 @@ export default connect(
 	( state, { siteId, postId } ) => {
 		const likeCount = countPostLikes( state, siteId, postId );
 		const likes = getPostLikes( state, siteId, postId );
+		const currentUserId = getCurrentUserId( state );
 		return {
 			likeCount,
 			likes,
+			currentUserId,
 		};
 	},
 	{ recordGoogleEvent }