Comment list template

bandirom · Nov 18, 2023 · 5061950 · 5061950
1 parent 3bf8b97
commit 5061950
Show file tree

Hide file tree

Showing 8 changed files with 144 additions and 82 deletions.
diff --git a/docker/dev/env/.env b/docker/dev/env/.env
@@ -7,7 +7,7 @@ CELERY_BROKER_URL=${REDIS_URL}/2
 CELERY_RESULT_BACKEND=${REDIS_URL}/2
 HEALTH_CHECK_URL=/application/health/
 
-ENABLE_SILK=0
+ENABLE_SILK=1
 ENABLE_DEBUG_TOOLBAR=0
 ENABLE_SENTRY=0
 FRONTEND_URL=http://192.168.59.111:8008

diff --git a/docker/dev/web/Dockerfile b/docker/dev/web/Dockerfile
@@ -14,7 +14,7 @@ ARG GID=1000
 ARG UID=1000
 ARG USER=ubuntu
 
-RUN apk add --update --no-cache curl postgresql-dev gcc python3-dev musl-dev openssl libffi-dev openssl-dev build-base \
+RUN apk add --update --no-cache curl postgresql postgresql-dev gcc python3-dev musl-dev openssl libffi-dev openssl-dev build-base \
     # install Pillow dependencies
     jpeg-dev zlib-dev freetype-dev lcms2-dev openjpeg-dev tiff-dev tk-dev tcl-dev harfbuzz-dev fribidi-dev && \
     pip install --upgrade pip setuptools && \

diff --git a/web/api/v1/blog/serializers.py b/web/api/v1/blog/serializers.py
@@ -63,10 +63,6 @@ class Meta:
 class FullArticleSerializer(ArticleSerializer):
     votes = LikeDislikeRelationSerializer(many=True)
 
-    def get_parent_comment(self, obj):
-        queryset = obj.comment_set.filter(parent_id__isnull=True)
-        return CommentSerializer(queryset, source='comment_set', many=True).data
-
     class Meta(ArticleSerializer.Meta):
         fields = ArticleSerializer.Meta.fields + ('votes',)
 
@@ -90,47 +86,51 @@ def validate_title(self, title: str):
 
 
 class ParentCommentSerializer(serializers.ModelSerializer):
-    user = ShortUserSerializer()
-    like_status = serializers.SerializerMethodField(method_name='get_like_status')
+    user = ShortUserSerializer(read_only=True)
+    # like_status = serializers.SerializerMethodField(method_name='get_like_status')
 
-    def get_like_status(self, obj) -> LikeIconStatus:
-        user = self.context['request'].user
-        if not user.is_authenticated:
-            return LikeIconStatus.EMPTY
-        if like_obj := obj.votes.filter(user=user).first():
-            return LikeIconStatus.LIKED if like_obj.vote == LikeStatus.LIKE else LikeIconStatus.DISLIKED
-        return LikeIconStatus.EMPTY
+    # def get_like_status(self, obj) -> LikeIconStatus:
+    #     user = self.context['request'].user
+    #     if not user.is_authenticated:
+    #         return LikeIconStatus.EMPTY
+    #     if like_obj := obj.votes.filter(user=user).first():
+    #         return LikeIconStatus.LIKED if like_obj.vote == LikeStatus.LIKE else LikeIconStatus.DISLIKED
+    #     return LikeIconStatus.EMPTY
 
     class Meta:
         model = Comment
-        fields = ('id', 'content', 'updated', 'article', 'user', 'like_status')
+        fields = (
+            'id',
+            'content',
+            'updated',
+            'article',
+            'user',
+        )
 
 
-class CommentSerializer(serializers.ModelSerializer):
-    child = ParentCommentSerializer(many=True, read_only=True, source='parent_set')
-    parent_id = serializers.IntegerField(min_value=1, default=None)
+class CommentListSerializer(serializers.ModelSerializer):
+    children = ParentCommentSerializer(many=True, read_only=True, source='parent_set')
     user = ShortUserSerializer(read_only=True)
-    like_status = serializers.SerializerMethodField(method_name='get_like_status')
-
-    def get_like_status(self, obj) -> LikeIconStatus:
-        user = self.context['request'].user
-        if not user.is_authenticated:
-            return LikeIconStatus.EMPTY
-        if like_obj := obj.votes.filter(user=user).first():
-            return LikeIconStatus.LIKED if like_obj.vote == LikeStatus.LIKE else LikeIconStatus.DISLIKED
-        return LikeIconStatus.EMPTY
+    # like_status = serializers.SerializerMethodField(method_name='get_like_status')
+    #
+    # def get_like_status(self, obj) -> LikeIconStatus:
+    #     user = self.context['request'].user
+    #     if not user.is_authenticated:
+    #         return LikeIconStatus.EMPTY
+    #     if like_obj := obj.votes.filter(user=user).first():
+    #         return LikeIconStatus.LIKED if like_obj.vote == LikeStatus.LIKE else LikeIconStatus.DISLIKED
+    #     return LikeIconStatus.EMPTY
 
     class Meta:
         model = Comment
         fields = (
             'id',
             'user',
             'content',
-            'child',
+            'children',
             'updated',
             'article',
-            'parent_id',
-            'like_status',
+            # 'like_status',
         )
 
 

diff --git a/web/api/v1/blog/services.py b/web/api/v1/blog/services.py
@@ -1,4 +1,4 @@
-from django.db.models import Count, Q, QuerySet
+from django.db.models import Count, Prefetch, Q, QuerySet
 
 from blog.choices import ArticleStatus
 from blog.models import Article, ArticleTag, Category, Comment
@@ -33,7 +33,14 @@ def get_queryset() -> QuerySet[Comment]:
         return Comment.objects.all()
 
     def comments_by_article_slug(self, article_slug: str) -> QuerySet[Comment]:
-        return self.get_queryset().filter(article__slug=article_slug)
+        return (
+            self.get_queryset()
+            .filter(article__slug=article_slug, parent__isnull=True)
+            .select_related('user')
+            .prefetch_related(
+                Prefetch('parent_set', queryset=Comment.objects.all().select_related('user')),
+            )
+        )
 
     @staticmethod
     def is_valid_comment_parent(parent_id: int, article: Article) -> bool:

diff --git a/web/api/v1/blog/views.py b/web/api/v1/blog/views.py
@@ -40,7 +40,7 @@ def post(self, request):
 
 
 class CommentListView(ListAPIView):
-    serializer_class = serializers.CommentSerializer
+    serializer_class = serializers.CommentListSerializer
 
     def get_queryset(self):
         slug = self.kwargs['article_slug']

diff --git a/web/blog/static/blog/js/detail.js b/web/blog/static/blog/js/detail.js
@@ -1,6 +1,5 @@
 $(function () {
   const slug = window.location.pathname.split('/')[2]
-
   getArticleDetail(slug);
   getCommentList(slug)
   $('#createCommentForm').submit(createComment);
@@ -86,13 +85,13 @@ function createComment(e) {
     content: this.textComment.value,
     parent_id: this.parent_id.value,
   }
-  console.log('data', data);
   $.ajax({
     url: '/api/v1/blog/comments/',
     type: 'post',
     data: data,
     success: function (data) {
-//      location.reload();
+      const slug = window.location.pathname.split('/')[2]
+      getCommentList(slug);
     },
     error: function (data) {
       $(".help-block").remove()
@@ -127,5 +126,59 @@ function getCommentList(slug) {
 }
 
 function handleComments(data) {
-  console.log('data', data);
+  const commentList = $('#paginationComment')
+  console.log('data', data)
+  const template = data.results.map(comment => commentTemplate(comment)).join('');
+  $('#commentCount').html(`Comments (${data.count})`)
+  commentList.empty();
+  commentList.append(template);
+}
+
+function commentChildTemplate(comment) {
+  const template = `
+    <li>
+      <div class="comment-avatar"><img src="${comment.user.avatar}" alt=""></div>
+      <div class="comment-box">
+        <div class="comment-head">
+          <h6 class="comment-name">
+            <a href="#">${comment.user.full_name}</a>
+          </h6>
+          <span>${comment.updated}</span>
+        </div>
+        <div class="comment-content">${comment.content}</div>
+      </div>
+    </li>
+  `
+  return template
+}
+
+
+function commentTemplate(comment){
+  const childrenTemplate = comment.children.map(comment => commentChildTemplate(comment)).join('');
+  const template = `
+    <li>
+      <div class="comment-main-level">
+        <div class="comment-avatar"><img src="${comment.user.avatar}" alt=""></div>
+        <div class="comment-box">
+          <div class="comment-head">
+            <h6 class="comment-name by-author"><a href="#">${comment.user.full_name}</a></h6>
+            <span>${comment.updated}</span>
+            <a href="#formReview" onclick="addParentToComment('${comment.user.full_name}', '${comment.id}')"><i class="fa fa-reply"></i></a>
+             <i class="fa fa-heart commentLike"
+              data-id="${comment.id}"
+              data-vote=1
+              data-type="comment">
+             </i>
+          </div>
+          <div class="comment-content">
+            ${comment.content}
+          </div>
+        </div>
+      </div>
+      <ul class="comments-list reply-list">
+        ${childrenTemplate}
+      </ul>
+    </li>
+  `
+  return template;
 }
diff --git a/web/blog/templates/blog/includes/commentListTemplate.html b/web/blog/templates/blog/includes/commentListTemplate.html
@@ -0,0 +1,45 @@
+<ul id="paginationComment" class="comments-list" data-id="{{ id }}" data-href-next="#">
+      {% for comment in comments %}
+      <li>
+				<div class="comment-main-level">
+					<div class="comment-avatar"><img src="http://i9.photobucket.com/albums/a88/creaticode/avatar_1_zps8e1c80cd.jpg" alt=""></div>
+					<div class="comment-box">
+						<div class="comment-head">
+							<h6 class="comment-name by-author"><a href="#">{{ comment.author }}</a></h6>
+							<span>{{ comment.updated | date_time }}</span>
+              <a href="#formReview" onclick="addParentToComment('{{ comment.author }}', '{{ comment.id }}')"><i class="fa fa-reply"></i></a>
+               <i class="fa fa-heart commentLike"
+                  data-id="{{ comment.id }}" data-vote=1
+                  data-href="{% url 'actions:like_dislike' %}"
+                  data-type="comment"></i>
+						</div>
+						<div class="comment-content">
+							{{ comment.content }}
+						</div>
+					</div>
+				</div>
+				<!-- Comments reply -->
+				<ul class="comments-list reply-list">
+          {% for child in comment.child %}
+					<li>
+						<div class="comment-avatar"><img src="http://i9.photobucket.com/albums/a88/creaticode/avatar_2_zps7de12f8b.jpg" alt=""></div>
+
+						<div class="comment-box">
+							<div class="comment-head">
+								<h6 class="comment-name"><a href="#"> {{ child.author }}</a></h6>
+								<span>{{ child.updated | date_time }}</span>
+                <i class="fa fa-heart commentLike"
+                   data-id="{{ child.id }}" data-vote=1
+                   data-type="comment" data-href="{% url 'actions:like_dislike' %}">
+                </i>
+							</div>
+							<div class="comment-content">
+								{{ child.content }}
+							</div>
+						</div>
+					</li>
+          {% endfor %}
+				</ul>
+			</li>
+       {% endfor %}
+		</ul>
diff --git a/web/blog/templates/blog/includes/comment_list.html b/web/blog/templates/blog/includes/comment_list.html
@@ -3,51 +3,8 @@
 <!-- the comments -->
 <div class="row">
     <div class="comments-container">
-		<h1>Comments ({{ comments_count }})</h1>
+		<h1 id="commentCount">Comments (0)</h1>
 		<ul id="paginationComment" class="comments-list" data-id="{{ id }}" data-href-next="#">
-      {% for comment in comments %}
-      <li>
-				<div class="comment-main-level">
-					<div class="comment-avatar"><img src="http://i9.photobucket.com/albums/a88/creaticode/avatar_1_zps8e1c80cd.jpg" alt=""></div>
-					<div class="comment-box">
-						<div class="comment-head">
-							<h6 class="comment-name by-author"><a href="#">{{ comment.author }}</a></h6>
-							<span>{{ comment.updated | date_time }}</span>
-              <a href="#formReview" onclick="addParentToComment('{{ comment.author }}', '{{ comment.id }}')"><i class="fa fa-reply"></i></a>
-               <i class="fa fa-heart commentLike"
-                  data-id="{{ comment.id }}" data-vote=1
-                  data-href="{% url 'actions:like_dislike' %}"
-                  data-type="comment"></i>
-						</div>
-						<div class="comment-content">
-							{{ comment.content }}
-						</div>
-					</div>
-				</div>
-				<!-- Comments reply -->
-				<ul class="comments-list reply-list">
-          {% for child in comment.child %}
-					<li>
-						<div class="comment-avatar"><img src="http://i9.photobucket.com/albums/a88/creaticode/avatar_2_zps7de12f8b.jpg" alt=""></div>
-
-						<div class="comment-box">
-							<div class="comment-head">
-								<h6 class="comment-name"><a href="#"> {{ child.author }}</a></h6>
-								<span>{{ child.updated | date_time }}</span>
-                <i class="fa fa-heart commentLike"
-                   data-id="{{ child.id }}" data-vote=1
-                   data-type="comment" data-href="{% url 'actions:like_dislike' %}">
-                </i>
-							</div>
-							<div class="comment-content">
-								{{ child.content }}
-							</div>
-						</div>
-					</li>
-          {% endfor %}
-				</ul>
-			</li>
-       {% endfor %}
 		</ul>
 	</div>
 	</div>