forgeplus-react/src/forums/new_comments/comments.js

import React, { useState, useEffect } from "react";

import axios from "axios";

import { List, Pagination, message, Spin } from "antd";

import Title from "./Title";
import NewComment from "./new_comment";
import CommentList from "./comment_list";
import ClickReply from "./head_reply_button";
import "./comment.scss";

function comments({
  target_id,
  target_type,
  current_user_image,
  current_login,
  props
}) {
  const [currentImage, setCurrentImage] = useState(null);
  const [replies, setReplies] = useState([]);
  const [replies_count, setRepliesCount] = useState(0);

  const [isSpin, setIsSpin] = useState(false);
  const [page, setListPage] = useState(1);
  const [limit, setLimitType] = useState(10);
  const [isClick, setIsClick] = useState(false);
  useEffect(() => {
    async function init() {
      setIsSpin(true);
      let url = `/${target_type}/${target_id}/more_reply.json`;
      axios
        .get(url, {
          params: { page, limit },
        })
        .then((result) => {
          if (result && result.data.memo_replies) {
            setReplies(result.data.memo_replies);
            setRepliesCount(result.data.memos_count);
          }
          setIsSpin(false);
        })
        .catch((e) => {
          setIsSpin(false);
          message.error(e);
        });
    }
    init();
  }, [page, target_id]);

  useEffect(() => {
    if (current_user_image) {
      setCurrentImage(current_user_image);
    } else {
      setCurrentImage("/images/avatars/User/boy.jpg");
    }
  }, []);
  // 翻页
  function changePage(page) {
    setListPage(page);
  }

  const click_reply = (reply_boolean) => {
    if(current_login){
      setIsClick(reply_boolean);
    }else{
      props.showLoginDialog();
      return;
    }
    
  };

  const create_new_reply = (reply) => {
    let new_memos_count = replies_count + 1
    setRepliesCount(new_memos_count)
    setReplies([reply, ...replies]);
    setIsClick(false);
  };

  const success_delete_reply = (reply) => {
    let new_memos_count = replies_count - 1
    setRepliesCount(new_memos_count)
  };

  return (
    <div>
      <Title className="b-bottom-none">
        <span className="greenLiftLine">
          评论
          {replies_count > 0 && (
            <span className="tip_tag">{replies_count}</span>
          )}
        </span>
      </Title>

      <Spin spinning={isSpin}>
        <div className="comments-lists">
          {isClick ? (
            <NewComment
              click_button={click_reply}
              memo_id={target_id}
              user_image={currentImage}
              new_reply={create_new_reply}
            ></NewComment>
          ) : (
            <ClickReply
              user_image={currentImage}
              click_button={click_reply}
            ></ClickReply>
          )}

          {replies && replies.length > 0 && (
            <List
              size="large"
              loading={isSpin}
              header=""
              dataSource={replies}
              renderItem={(item) => (
                <List.Item>
                  <CommentList
                    item={item}
                    user_image={currentImage}
                    current_login={current_login}
                    is_children={false}
                    target_type={target_type}
                    commet_destroy={success_delete_reply}
                    props={props}
                  ></CommentList>
                </List.Item>
              )}
            />
          )}
          {replies_count > limit && (
            <div className="edu-text-center pd20">
              <Pagination
                showQuickJumper
                current={page}
                onChange={changePage}
                total={replies_count}
                pageSize={limit}
              />
            </div>
          )}
        </div>
      </Spin>
    </div>
  );
}

export default comments;