order change option added

Author: sazedul-haque

assets/src/js/frontend/learning-area/lesson/comments.ts

@@ -22,6 +22,8 @@ const lessonComments = (lessonId?: number) => {
     currentPage: 1,
     loading: false,
     hasMore: true,
+    currentOrder: 'DESC' as 'ASC' | 'DESC',
+    isReloading: false,
     $el: null as unknown as HTMLElement,
     $refs: {} as {
       commentList: HTMLElement;
@@ -33,6 +35,11 @@ const lessonComments = (lessonId?: number) => {
     replyCommentMutation: null as MutationState<unknown, ReplyCommentPayload> | null,
 
     init() {
+      // Initialize order from URL.
+      const url = new URL(window.location.href);
+      const orderParam = url.searchParams.get('order');
+      this.currentOrder = orderParam === 'ASC' ? 'ASC' : 'DESC';
+
       this.initInfiniteScroll();
 
       // Lesson comment create mutation.
@@ -95,6 +102,44 @@ const lessonComments = (lessonId?: number) => {
       return wpAjaxInstance.post(endpoints.REPLY_LESSON_COMMENT, payload);
     },
 
+    handleChangeOrder(newOrder: 'ASC' | 'DESC') {
+      if (this.currentOrder === newOrder) return;
+
+      this.currentOrder = newOrder;
+      this.updateURL(newOrder);
+      this.reloadComments();
+    },
+
+    updateURL(order: 'ASC' | 'DESC') {
+      const url = new URL(window.location.href);
+      url.searchParams.set('order', order);
+      window.history.pushState({}, '', url);
+    },
+
+    reloadComments() {
+      this.isReloading = true;
+      this.currentPage = 1;
+      this.hasMore = true;
+
+      wpAjaxInstance
+        .post(endpoints.LOAD_LESSON_COMMENTS, {
+          lesson_id: this.lessonId,
+          current_page: 1,
+          order: this.currentOrder,
+        })
+        .then((response) => {
+          // Replace entire comment list.
+          this.$refs.commentItems.innerHTML = response.data.html;
+          this.hasMore = response.data.has_more;
+        })
+        .catch((error) => {
+          window.TutorCore.toast.error(convertToErrorMessage(error));
+        })
+        .finally(() => {
+          this.isReloading = false;
+        });
+    },
+
     loadNextPage() {
       if (!this.lessonId || this.loading || !this.hasMore) {
         return;
@@ -106,6 +151,7 @@ const lessonComments = (lessonId?: number) => {
         .post(endpoints.LOAD_LESSON_COMMENTS, {
           lesson_id: this.lessonId,
           current_page: this.currentPage + 1,
+          order: this.currentOrder,
         })
         .then((response) => {
           if (response.data.has_more !== undefined) {

classes/Lesson.php

@@ -858,6 +858,7 @@ public function render_single_content( $lesson ): void {
 	public function load_lesson_comments() {
 		$lesson_id    = Input::post( 'lesson_id' ?? 0 );
 		$current_page = Input::post( 'current_page', '1' );
+		$order        = QueryHelper::get_valid_sort_order( Input::post( 'order', 'DESC' ) );
 
 		$item_per_page = tutor_utils()->get_option( 'pagination_per_page', 10 );
 
@@ -867,6 +868,7 @@ public function load_lesson_comments() {
 				'parent'  => 0,
 				'paged'   => $current_page,
 				'number'  => $item_per_page,
+				'order'   => $order,
 			)
 		);
 

templates/learning-area/lesson/comment-items.php

@@ -23,8 +23,7 @@
 	return;
 }
 ?>
-<div x-ref="commentItems" class="tutor-comments-list tutor-border-t">
-	<?php foreach ( $comment_list as $comment_item ) : ?>
+<?php foreach ( $comment_list as $comment_item ) : ?>
 	<div class="tutor-comment" x-data="{showReplyForm: false, repliesExpanded: false}">
 		<?php Avatar::make()->user( $comment_item->user_id )->size( Size::SIZE_40 )->render(); ?>
 		<div class="tutor-flex-1">
@@ -54,7 +53,7 @@ class="tutor-comment-reply-form tutor-mt-6"
 				x-collapse
 				x-data="{ ...tutorForm({ id: 'lesson-comment-reply-form' }), focused: false }"
 				x-bind="getFormBindings()"
-				@submit.prevent="handleSubmit((data) => replyCommentMutation?.mutate({ ...data, comment_post_ID: <?php echo esc_html( $lesson_id ); ?>, comment_parent: <?php echo esc_html( $comment_item->comment_ID ); ?> }))($event)"
+				@submit.prevent="handleSubmit((data) => replyCommentMutation?.mutate({ ...data, comment_post_ID: <?php echo esc_html( $lesson_id ); ?>, comment_parent: <?php echo esc_html( $comment_item->comment_ID ); ?>, order: currentOrder }))($event)"
 			>
 				<?php
 				InputField::make()
@@ -109,5 +108,4 @@ class="tutor-comment-reply-form tutor-mt-6"
 			?>
 		</div>
 	</div>
-	<?php endforeach; ?>
-</div>
+<?php endforeach; ?>

templates/learning-area/lesson/comment-list.php

@@ -18,12 +18,14 @@
 $item_per_page = tutor_utils()->get_option( 'pagination_per_page', 10 );
 $current_page  = max( 1, Input::post( 'current_page', 0, Input::TYPE_INT ) );
 $lesson_id     = Input::post( 'comment_post_ID', get_the_ID(), Input::TYPE_INT );
+$order_filter  = Input::get( 'order' ) ?? Input::post( 'order' ) ?? 'DESC';
 
 $comments_list_args = array(
 	'post_id' => $lesson_id,
 	'parent'  => 0,
 	'paged'   => $current_page,
 	'number'  => $item_per_page,
+	'order'   => $order_filter,
 );
 
 $comment_count_args = array(
@@ -37,13 +39,24 @@
 ?>
 <?php if ( ! empty( $comment_list ) ) : ?>
 <div x-ref="commentList">
-	<div class="tutor-flex tutor-items-center tutor-justify-between tutor-px-6 tutor-py-5 tutor-border-t">
+	<div 
+		class="tutor-flex tutor-items-center tutor-justify-between tutor-px-6 tutor-py-5 tutor-border-t"
+		:class="{ 'tutor-loading-spinner': isReloading }"
+	>
 		<div class="tutor-small tutor-text-secondary">
 			<?php esc_html_e( 'Comments', 'tutor' ); ?>
 			<span class="tutor-text-primary tutor-font-medium">(<?php echo esc_html( $comments_count ); ?>)</span>
 		</div>
-		<?php Sorting::make()->order( Input::get( 'order', 'DESC' ) )->render(); ?>
+		<?php
+		Sorting::make()
+			->order( $order_filter )
+			->on_change( 'handleChangeOrder' )
+			->bind_active_order( 'currentOrder' )
+			->render();
+		?>
+	</div>
+	<div x-ref="commentItems" class="tutor-comments-list tutor-border-t">
+		<?php tutor_load_template( 'learning-area.lesson.comment-items', compact( 'comment_list', 'lesson_id' ) ); ?>
 	</div>
-	<?php tutor_load_template( 'learning-area.lesson.comment-items', compact( 'comment_list', 'lesson_id' ) ); ?>
 </div>
 <?php endif; ?>

templates/learning-area/lesson/comments.php

@@ -24,7 +24,7 @@
 		class="tutor-p-6" 
 		x-data="{ ...tutorForm({ id: 'lesson-comment-form' }), focused: false }"
 		x-bind="getFormBindings()"
-		@submit.prevent="handleSubmit((data) => createCommentMutation?.mutate({ ...data, comment_post_ID: <?php echo esc_html( $lesson_id ); ?>, comment_parent: 0 }))($event)"
+		@submit.prevent="handleSubmit((data) => createCommentMutation?.mutate({ ...data, comment_post_ID: <?php echo esc_html( $lesson_id ); ?>, comment_parent: 0, order: currentOrder }))($event)"
 	>
 		<div class="tutor-text-medium tutor-font-semibold tutor-mb-4">
 			<?php esc_html_e( 'Join The Conversation', 'tutor' ); ?>