Moved empty comment creation to function and tried to optimize small …

…code
WordPress · Feb 9, 2022 · d012330 · d012330
1 parent 476ed38
commit d012330
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 36 deletions.
diff --git a/packages/block-library/src/comment-template/edit.js b/packages/block-library/src/comment-template/edit.js
@@ -28,6 +28,56 @@ const TEMPLATE = [
 	[ 'core/comment-edit-link' ],
 ];
 
+/**
+ * Function that returns a comment structure that will be rendered with default placehoders.
+ *
+ * @param {Object}  settings                       Discussion Settings.
+ * @param {number}  [settings.perPage]             - Comments per page setting or block attribute.
+ * @param {boolean} [settings.threadComments]      - Enable threaded (nested) comments setting.
+ * @param {number}  [settings.threadCommentsDepth] - Level deep of threaded comments.
+ *
+ * @typedef {{id: null, children: EmptyComment[]}} EmptyComment
+ * @return {EmptyComment[]}                 		Inner blocks of the Comment Template
+ */
+const getCommentsPlaceholder = ( {
+	perPage,
+	threadComments,
+	threadCommentsDepth,
+} ) => {
+	// In case that `threadCommentsDepth` is falsy, we default to a somewhat
+	// arbitrary value of 3.
+	// In case that the value is set but larger than 3 we truncate it to 3.
+	const commentsDepth = Math.min( threadCommentsDepth || 3, 3 );
+
+	// We set a limit in order not to overload the editor of empty comments.
+	const defaultCommentsToShow =
+		perPage <= commentsDepth ? perPage : commentsDepth;
+	if ( ! threadComments || defaultCommentsToShow === 1 ) {
+		// If displaying threaded comments is disabled, we only show one comment
+		return [ { commentId: null, children: [] } ];
+	} else if ( defaultCommentsToShow === 2 ) {
+		return [
+			{
+				commentId: null,
+				children: [ { commentId: null, children: [] } ],
+			},
+		];
+	}
+
+	// In case that the value is set but larger than 3 we truncate it to 3.
+	return [
+		{
+			commentId: null,
+			children: [
+				{
+					commentId: null,
+					children: [ { commentId: null, children: [] } ],
+				},
+			],
+		},
+	];
+};
+
 /**
  * Component which renders the inner blocks of the Comment Template.
  *
@@ -200,53 +250,18 @@ export default function CommentTemplateEdit( {
 		},
 		[ postId, clientId, order ]
 	);
-
 	// TODO: Replicate the logic used on the server.
 	perPage = perPage || commentsPerPage;
 	// We convert the flat list of comments to tree.
 	// Then, we show only a maximum of `perPage` number of comments.
 	// This is because passing `per_page` to `getEntityRecords()` does not
 	// take into account nested comments.
+
 	let comments = useMemo(
 		() => convertToTree( rawComments ).slice( 0, perPage ),
 		[ rawComments, perPage ]
 	);
 
-	// In case that `threadCommentsDepth` is falsy, we default to a somewhat
-	// arbitrary value of 3.
-	// In case that the value is set but larger than 3 we truncate it to 3.
-	const commentsDepth = Math.min( threadCommentsDepth || 3, 3 );
-
-	// We set a limit in order not to overload the editor of empty comments.
-	const defaultCommentsToShow =
-		perPage <= commentsDepth ? perPage : commentsDepth;
-
-	if ( ! postId ) {
-		if ( ! threadComments || defaultCommentsToShow === 1 ) {
-			// If displaying threaded comments is disabled, we only show one comment
-			comments = [ { commentId: null, children: [] } ];
-		} else if ( defaultCommentsToShow === 2 ) {
-			comments = [
-				{
-					commentId: null,
-					children: [ { commentId: null, children: [] } ],
-				},
-			];
-		} else if ( defaultCommentsToShow === 3 ) {
-			comments = [
-				{
-					commentId: null,
-					children: [
-						{
-							commentId: null,
-							children: [ { commentId: null, children: [] } ],
-						},
-					],
-				},
-			];
-		}
-	}
-
 	if ( ! rawComments ) {
 		return (
 			<p { ...blockProps }>
@@ -255,6 +270,14 @@ export default function CommentTemplateEdit( {
 		);
 	}
 
+	if ( ! postId ) {
+		comments = getCommentsPlaceholder( {
+			perPage,
+			threadComments,
+			threadCommentsDepth,
+		} );
+	}
+
 	if ( ! comments.length ) {
 		return <p { ...blockProps }> { __( 'No results found.' ) }</p>;
 	}

diff --git a/packages/block-library/src/comment-template/util.js b/packages/block-library/src/comment-template/util.js
@@ -29,6 +29,7 @@
  */
 export const convertToTree = ( data ) => {
 	const table = {};
+
 	if ( ! data ) return [];
 
 	// First create a hash table of { [id]: { ...comment, children: [] }}