Repository: answerdev/answer
File: ui/src/components/Comment/index.tsx (TypeScript)

Code before:
  const { t } = useTranslation('translation', { keyPrefix: 'comment' });

  useEffect(() => {
    if (pageIndex === 0 && commentId) {
      console.log('scrollCallback');
      setTimeout(() => {
        const el = document.getElementById(commentId);
        console.log(el);
        scrollToElementTop(el);
        bgFadeOut(el);
      }, 100);
    }

    return () => {
      updateCurrentReplyId('');
    };
  }, []);

  useEffect(() => {
    if (!data) {
      return;
    }
    if (pageIndex === 1 || pageIndex === 0) {
      setComments(data?.list);
    } else {
      setComments([...comments, ...data.list]);
    }
    const user: Types.PageUser[] = [];
    data.list.forEach((item) => {
      user.push({
        id: item.user_id,
        displayName: item.user_display_name,
        userName: item.username,
      });
      user.push({
        id: item.reply_comment_id,
        displayName: item.reply_user_display_name,
        userName: item.username,
      });
    });
    pageUsers.setUsers(user);
  }, [data]);

  const handleReply = (id) => {
    if (!tryNormalLogged(true)) {
      return;
    }
    comments.forEach((item) => {
      if (item.comment_id === id) {
        updateCurrentReplyId(id);
      }

Review comment (suggestion):
Sorry, I missed some conditions yesterday.  `data.count` should be the total number of comments. Here you only need to sort the data loaded for the first time and with the same number of votes by time, so `data.list.length` and `vote_Count` should be used for judgment, and it should only be processed during the first load. So it should be like this

```javascript
  if (pageIndex === 1 || pageIndex === 0) {
      if (data.list.length <= 3) {
        data.list.sort((a, b) => {
          if (a.vote_count === b.vote_count) {
            return a.created_at - b.created_at;
          }
          return 1;
        });
      }
      setComments(data?.list);
    } else {
      setComments([...comments, ...data.list]);
    }
```



Code after:
  const { t } = useTranslation('translation', { keyPrefix: 'comment' });

  useEffect(() => {
    if (pageIndex === 0 && commentId) {
      console.log('scrollCallback');
      setTimeout(() => {
        const el = document.getElementById(commentId);
        console.log(el);
        scrollToElementTop(el);
        bgFadeOut(el);
      }, 100);
    }

    return () => {
      updateCurrentReplyId('');
    };
  }, []);

  useEffect(() => {
    if (!data) {
      return;
    }
    if (data.count <= 3) {
      data.list.sort((a, b) => a.created_at - b.created_at);
    }
    if (pageIndex === 1 || pageIndex === 0) {
      setComments(data?.list);
    } else {
      setComments([...comments, ...data.list]);
    }
    const user: Types.PageUser[] = [];
    data.list.forEach((item) => {
      user.push({
        id: item.user_id,
        displayName: item.user_display_name,
        userName: item.username,
      });
      user.push({
        id: item.reply_comment_id,
        displayName: item.reply_user_display_name,
        userName: item.username,
      });
    });
    pageUsers.setUsers(user);
  }, [data]);

  const handleReply = (id) => {
    if (!tryNormalLogged(true)) {
      return;
    }
    comments.forEach((item) => {