Skip to content

Commit 1125016

Browse files
sazedul-haquesazedul-haque
committed
Lesson comment files organised
1 parent 6560a1c commit 1125016

File tree

6 files changed

+180
-176
lines changed

6 files changed

+180
-176
lines changed

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

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,13 @@ interface ReplyCommentPayload {
1313
/**
1414
* Lesson Comments Component
1515
*/
16-
const lessonComments = (lessonId?: number) => {
16+
const lessonComments = (lessonId?: number, initialCount: number = 0) => {
1717
const query = window.TutorCore.query;
1818

1919
return {
2020
query,
2121
lessonId: lessonId || null,
22+
totalComments: initialCount,
2223
currentPage: 1,
2324
loading: false,
2425
hasMore: true,
@@ -27,7 +28,6 @@ const lessonComments = (lessonId?: number) => {
2728
$el: null as unknown as HTMLElement,
2829
$refs: {} as {
2930
commentList: HTMLElement;
30-
commentItems: HTMLElement;
3131
loadMoreTrigger: HTMLElement;
3232
},
3333
createCommentMutation: null as MutationState<unknown, unknown> | null,
@@ -44,13 +44,9 @@ const lessonComments = (lessonId?: number) => {
4444

4545
// Lesson comment create mutation.
4646
this.createCommentMutation = this.query.useMutation(this.createComment, {
47-
onSuccess: (response) => {
47+
onSuccess: () => {
4848
window.TutorCore.toast.success(__('Comment added successfully.', 'tutor'));
49-
this.$refs.commentList.innerHTML = response.data.html;
50-
51-
// Reset pagination state when new comment is added
52-
this.currentPage = 1;
53-
this.hasMore = true;
49+
this.reloadComments();
5450

5551
const formId = 'lesson-comment-form';
5652
if (window.TutorCore.form.hasForm(formId)) {
@@ -76,13 +72,9 @@ const lessonComments = (lessonId?: number) => {
7672

7773
// Lesson comment reply mutation
7874
this.replyCommentMutation = this.query.useMutation(this.replyComment, {
79-
onSuccess: (response) => {
75+
onSuccess: () => {
8076
window.TutorCore.toast.success(__('Reply saved successfully', 'tutor'));
81-
this.$refs.commentList.innerHTML = response.data.html;
82-
83-
// Reset pagination state when reply is added
84-
this.currentPage = 1;
85-
this.hasMore = true;
77+
this.reloadComments();
8678
},
8779
onError: (error) => {
8880
window.TutorCore.toast.error(convertToErrorMessage(error));
@@ -129,8 +121,12 @@ const lessonComments = (lessonId?: number) => {
129121
})
130122
.then((response) => {
131123
// Replace entire comment list.
132-
this.$refs.commentItems.innerHTML = response.data.html;
124+
this.$refs.commentList.innerHTML = response.data.html;
133125
this.hasMore = response.data.has_more;
126+
127+
if (response.data.count !== undefined) {
128+
this.totalComments = response.data.count;
129+
}
134130
})
135131
.catch((error) => {
136132
window.TutorCore.toast.error(convertToErrorMessage(error));
@@ -160,7 +156,7 @@ const lessonComments = (lessonId?: number) => {
160156

161157
if (response.data.html?.trim()) {
162158
this.currentPage++;
163-
this.$refs.commentItems.insertAdjacentHTML('beforeend', response.data.html);
159+
this.$refs.commentList.insertAdjacentHTML('beforeend', response.data.html);
164160
}
165161
})
166162
.catch((error) => {

‎classes/Lesson.php‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -127,8 +127,34 @@ public function tutor_single_course_lesson_load_more() {
127127

128128
$is_legacy_learning_mode = tutor_utils()->get_option( 'is_legacy_learning_mode' );
129129

130+
// Prepare data for template.
131+
$lesson_id = Input::post( 'comment_post_ID', get_the_ID(), Input::TYPE_INT );
132+
$current_page = max( 1, Input::post( 'current_page', 0, Input::TYPE_INT ) );
133+
$item_per_page = tutor_utils()->get_option( 'pagination_per_page', 10 );
134+
$order_filter = Input::get( 'order' ) ?? Input::post( 'order' ) ?? 'DESC';
135+
136+
$comments_list_args = array(
137+
'post_id' => $lesson_id,
138+
'parent' => 0,
139+
'paged' => $current_page,
140+
'number' => $item_per_page,
141+
'order' => $order_filter,
142+
);
143+
144+
$comment_count_args = array(
145+
'post_id' => $lesson_id,
146+
'parent' => 0,
147+
'count' => true,
148+
);
149+
150+
$comments_count = self::get_comments( $comment_count_args );
151+
$comment_list = self::get_comments( $comments_list_args );
152+
130153
ob_start();
131-
tutor_load_template( $is_legacy_learning_mode ? 'single.lesson.comment' : 'learning-area.lesson.comment-list' );
154+
tutor_load_template(
155+
$is_legacy_learning_mode ? 'single.lesson.comment' : 'learning-area.lesson.comment-items',
156+
compact( 'comment_list', 'comments_count', 'lesson_id', 'order_filter' )
157+
);
132158
$html = ob_get_clean();
133159
wp_send_json_success( array( 'html' => $html ) );
134160
}
@@ -883,7 +909,7 @@ public function load_lesson_comments() {
883909

884910
ob_start();
885911
tutor_load_template(
886-
'learning-area.lesson.comment-items',
912+
'learning-area.lesson.comment-list',
887913
compact( 'comment_list', 'lesson_id' )
888914
);
889915
$html = ob_get_clean();
@@ -896,6 +922,7 @@ public function load_lesson_comments() {
896922
array(
897923
'html' => $html,
898924
'has_more' => $has_more,
925+
'count' => $total_comments,
899926
)
900927
);
901928
}

‎templates/learning-area/index.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,4 +67,4 @@ class="tutor-btn tutor-btn-outline tutor-btn-small tutor-btn-icon tutor-expand-b
6767
</button>
6868
</div>
6969
</div>
70-
<?php wp_footer(); ?>
70+
<?php wp_footer(); ?>

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

Lines changed: 0 additions & 111 deletions
This file was deleted.

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

Lines changed: 93 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -9,54 +9,103 @@
99
* @since 4.0.0
1010
*/
1111

12-
use Tutor\Components\Sorting;
13-
use TUTOR\Input;
14-
use TUTOR\Lesson;
12+
use Tutor\Components\Avatar;
13+
use Tutor\Components\Button;
14+
use Tutor\Components\Constants\InputType;
15+
use Tutor\Components\Constants\Size;
16+
use Tutor\Components\Constants\Variant;
17+
use Tutor\Components\InputField;
18+
use TUTOR\Icon;
1519

1620
defined( 'ABSPATH' ) || exit;
1721

18-
$item_per_page = tutor_utils()->get_option( 'pagination_per_page', 10 );
19-
$current_page = max( 1, Input::post( 'current_page', 0, Input::TYPE_INT ) );
20-
$lesson_id = Input::post( 'comment_post_ID', get_the_ID(), Input::TYPE_INT );
21-
$order_filter = Input::get( 'order' ) ?? Input::post( 'order' ) ?? 'DESC';
22-
23-
$comments_list_args = array(
24-
'post_id' => $lesson_id,
25-
'parent' => 0,
26-
'paged' => $current_page,
27-
'number' => $item_per_page,
28-
'order' => $order_filter,
29-
);
22+
if ( empty( $comment_list ) ) {
23+
return;
24+
}
25+
?>
26+
<?php foreach ( $comment_list as $comment_item ) : ?>
27+
<div class="tutor-comment" x-data="{showReplyForm: false, repliesExpanded: false}">
28+
<?php Avatar::make()->user( $comment_item->user_id )->size( Size::SIZE_40 )->render(); ?>
29+
<div class="tutor-flex-1">
30+
<div class="tutor-flex tutor-items-center tutor-gap-5 tutor-mb-2 tutor-small">
31+
<span class="tutor-discussion-card-author">
32+
<?php echo esc_html( $comment_item->comment_author ); ?>
33+
</span>
34+
<span class="tutor-text-subdued">
35+
<?php
36+
// Translators: %s is the time of comment.
37+
echo esc_html( sprintf( __( '%s ago', 'tutor' ), human_time_diff( strtotime( $comment_item->comment_date_gmt ) ) ) );
38+
?>
39+
</span>
40+
</div>
41+
<div class="tutor-p2 tutor-text-secondary">
42+
<?php echo wp_kses_post( $comment_item->comment_content ); ?>
43+
</div>
44+
<div class="tutor-mt-6">
45+
<button class="tutor-comment-action-btn tutor-comment-action-btn-reply" @click="showReplyForm = !showReplyForm">
46+
<?php tutor_utils()->render_svg_icon( Icon::COMMENTS ); ?>
47+
<?php esc_html_e( 'Reply', 'tutor' ); ?>
48+
</button>
49+
</div>
50+
<form
51+
class="tutor-comment-reply-form tutor-mt-6"
52+
x-show="showReplyForm"
53+
x-collapse
54+
x-data="{ ...tutorForm({ id: 'lesson-comment-reply-form' }), focused: false }"
55+
x-bind="getFormBindings()"
56+
@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)"
57+
>
58+
<?php
59+
InputField::make()
60+
->type( InputType::TEXTAREA )
61+
->name( 'comment' )
62+
->placeholder( __( 'Write your reply', 'tutor' ) )
63+
->attr( 'x-bind', "register('comment', { required: '" . esc_js( __( 'Please enter a reply', 'tutor' ) ) . "' })" )
64+
->attr( '@focus', 'focused = true' )
65+
->attr( '@keydown', 'handleKeydown($event)' )
66+
->render();
67+
?>
68+
<div class="tutor-flex tutor-items-center tutor-justify-between tutor-mt-5" x-cloak :class="{ 'tutor-hidden': !focused }">
69+
<div class="tutor-tiny tutor-text-subdued tutor-flex tutor-items-center tutor-gap-2">
70+
<?php tutor_utils()->render_svg_icon( Icon::COMMAND, 12, 12 ); ?>
71+
<?php esc_html_e( 'Cmd/Ctrl +', 'tutor' ); ?>
72+
<?php tutor_utils()->render_svg_icon( Icon::ENTER, 12, 12 ); ?>
73+
<?php esc_html_e( 'Enter to Save ', 'tutor' ); ?>
74+
</div>
75+
<div class="tutor-flex tutor-items-center tutor-gap-4">
76+
<?php
77+
Button::make()
78+
->label( __( 'Cancel', 'tutor' ) )
79+
->variant( Variant::GHOST )
80+
->size( Size::X_SMALL )
81+
->attr( 'type', 'button' )
82+
->attr( '@click', 'reset(); focused = false; showReplyForm = false' )
83+
->attr( ':disabled', 'replyCommentMutation?.isPending' )
84+
->render();
3085

31-
$comment_count_args = array(
32-
'post_id' => $lesson_id,
33-
'parent' => 0,
34-
'count' => true,
35-
);
86+
Button::make()
87+
->label( __( 'Save', 'tutor' ) )
88+
->variant( Variant::PRIMARY_SOFT )
89+
->size( Size::X_SMALL )
90+
->attr( 'type', 'submit' )
91+
->attr( ':disabled', 'replyCommentMutation?.isPending' )
92+
->attr( ':class', "{ 'tutor-btn-loading': replyCommentMutation?.isPending }" )
93+
->render();
94+
?>
95+
</div>
96+
</div>
97+
</form>
3698

37-
$comments_count = Lesson::get_comments( $comment_count_args );
38-
$comment_list = Lesson::get_comments( $comments_list_args );
39-
?>
40-
<?php if ( ! empty( $comment_list ) ) : ?>
41-
<div x-ref="commentList">
42-
<div
43-
class="tutor-flex tutor-items-center tutor-justify-between tutor-px-6 tutor-py-5 tutor-border-t"
44-
:class="{ 'tutor-loading-spinner': isReloading }"
45-
>
46-
<div class="tutor-small tutor-text-secondary">
47-
<?php esc_html_e( 'Comments', 'tutor' ); ?>
48-
<span class="tutor-text-primary tutor-font-medium">(<?php echo esc_html( $comments_count ); ?>)</span>
99+
<!-- Display Comment Replies -->
100+
<?php
101+
tutor_load_template(
102+
'learning-area.lesson.comment-replies',
103+
array(
104+
'lesson_id' => $lesson_id,
105+
'comment_item' => $comment_item,
106+
)
107+
);
108+
?>
49109
</div>
50-
<?php
51-
Sorting::make()
52-
->order( $order_filter )
53-
->on_change( 'handleChangeOrder' )
54-
->bind_active_order( 'currentOrder' )
55-
->render();
56-
?>
57-
</div>
58-
<div x-ref="commentItems" class="tutor-comments-list tutor-border-t">
59-
<?php tutor_load_template( 'learning-area.lesson.comment-items', compact( 'comment_list', 'lesson_id' ) ); ?>
60110
</div>
61-
</div>
62-
<?php endif; ?>
111+
<?php endforeach; ?>

0 commit comments

Comments
 (0)