forgeplus-react/src/user_info/User/StarUser.js

import React, { useEffect, useState } from "react";
import { Button, message} from "antd";
import axios from "axios";
import { DivInline } from "../css/layout.jsx";
import "./user.scss";
import TipModal from "../Modal/tip_modal";

function star_user({
  is_watched,
  login,
  current_login,
  user_id,
  set_fans_count,
  is_blocked,
  is_blocked_by,
  user_name,
  show_block
}) {
  const [isStar, setStarStatus] = useState(false);
  const [isBlocked, setBlockStatus] = useState(false);
  const [showModal, setModalStatus] = useState(false);
  const [isLoading, setLoadinStatus] = useState(false);
  const [isBlockLoading, setBlockLoadingStatus] = useState(false);
  const [modalData, setDataModal] = useState({});
  useEffect(() => {
    if (is_watched) {
      setStarStatus(is_watched);
    }
    if (is_blocked) {
      setBlockStatus(is_blocked);
    }
  },[is_blocked, is_watched]);
  const to_star = (star_type) => {
    if(current_login){
      setLoadinStatus(true);
      let url = `/users/${login}/watch_user.json`;
      if (is_blocked_by) {
        setModalStatus(true)
        setLoadinStatus(false);
        setDataModal({
          title: "提示",
          modal_type: "confirm",
          head: null,
          content: "对方已将你加入黑名单，你不能关注对方。"
        });
      } else {
        axios
          .post(url, { watch: star_type, login: login })
          .then((result) => {
            if (result && result.data.status >= 0) {
              message.success(result.data.message);
              setStarStatus(!isStar);
              if (star_type === "watch") {
                set_fans_count(1);
              } else {
                set_fans_count(-1);
              }
            } else {
              message.error(result.data.message);
            }
            setLoadinStatus(false);
          })
          .catch((e) => {
            setLoadinStatus(false);
            console.log(e);
          });
      }
    }else{
      window.open("/login", "_blank")
    }

  };
  const to_block = (block_type) => {
    setModalStatus(false);
    setBlockLoadingStatus(true);
    let url = `/users/${login}/block_user.json`;
    axios
      .post(url, { block: block_type })
      .then((result) => {
        if (result && result.data.status >= 0) {
          message.success(result.data.message);
          setBlockStatus(!isBlocked);
          if (block_type === "block" && isStar) {
            //如果是已关注的状态，则取消关注状态
            setStarStatus(false);
            set_fans_count(-1);
          }
        } else {
          message.error(result.data.message);
        }
        setBlockLoadingStatus(false);
      })
      .catch((e) => {
        setBlockLoadingStatus(false);
        console.log(e);
      });
  };
  const confirm_block = () => {
    
    if (isBlocked) {
      setDataModal({
        title: "移出黑名单",
        modal_type: "cancel",
        head: null,
        content: "移出黑名单后，对方可以关注你，向你发私信，评论你的帖子。"
      });
    } else {
      setDataModal({
        title: "加入黑名单",
        modal_type: "block",
        head: `确定要将${user_name}加入黑名单？`,
        content:
          " 加入黑名单后，已有关注关系将被解除，对方不能再关注你，向你发私信，评论你的帖子等。但仍可以查看你的公开信息。"
      });
    }
    setModalStatus(true);
  };
  const cancel_click = () => {
    setModalStatus(false)
    setBlockLoadingStatus(false)
  }
  return (
    <DivInline>
      <div>
          <Button
            icon="heart"
            type={isBlocked ? "default" : "success"}
            ghost={!isStar}
            className={isStar ? "user-is-star" : ""}
            disabled={isBlocked}
            onClick={() => to_star(isStar ? "cancel" : "watch")}
            loading={isLoading}
          >
            {isStar ? "已关注" : "关注"}
          </Button>
          <Button
            icon="mail"
            type={isBlocked ? "default" : "success"}
            className="ml15"
            ghost={true}
            disabled={isBlocked}
            href={`/users/${current_login}/message_detail?user_id=${user_id}`}
            target="_bank"
          >
            私信
          </Button>
          {show_block && current_login && <Button
            icon="stop"
            type="danger"
            className="ml15"
            ghost={!isBlocked}
            onClick={() => confirm_block()}
            loading={isBlockLoading}
          >
            {isBlocked ? "移出黑名单" : "加入黑名单"}
          </Button>}
          
        </div>
      {showModal && (
        <TipModal
          data={modalData}
          okClick={to_block}
          cancelClick={cancel_click}
        ></TipModal>
      )}
    </DivInline>
  );
}
export default star_user;