资源共享功能实现（一）

本篇博客开始，我记录项目实训的资源共享功能的实现，前期已经搭建好了后台，并学习的前端技术。

资源共享项功能实现（一） 评论功能回答的类型单个回答展示删除评论新增一条评论分页搜索审核回答获取某个ID用户的回答点赞修改回答

评论功能 回答的类型

包括用户ID、问题的序号、优先级、发布时间等

export interface CommentType {
  _id: string;
  userId: string;
  questionId: string;
  content: string;
  thumbNum: number;
  priority: number;
  reviewTime?: Date;
  reviewerId?: string;
  reviewStatus: number;
  reviewMessage?: string;
  _createTime: Date;
  _updateTime: Date;
}

单个回答展示

（只有登录的人才可以点赞）

  useEffect(() => {
    const thumbCommentIds = currentUser.thumbCommentIds ?? [];
    setIsThumb(thumbCommentIds.includes(comment._id));
  }, [currentUser, comment._id]);

  const doThumbUp = async (id: string) => {
    if (!currentUser?._id) {
      toLoginPage();
      message.warning('登录后才能点赞哦');
      return;
    }
    if (thumbLoading) {
      return;
    }
    setThumbLoading(true);
    const res = await thumbUpComment(id);
    if (res === 1 || res === -1) {
      comment.thumbNum = (comment.thumbNum ?? 0) + res;
      const thumbCommentIds = currentUser.thumbCommentIds ?? [];
      if (res > 0) {
        thumbCommentIds.push(comment._id);
      } else {
        thumbCommentIds.splice(thumbCommentIds.indexOf(comment._id), 1);
      }
      const newCurrentUser = { ...currentUser, thumbCommentIds };
      setInitialState({ ...initialState, currentUser: newCurrentUser });
    } else {
      message.error(' *** 作失败，请刷新重试');
    }
    setThumbLoading(false);
  };

删除评论

评论只有自己和管理员可以删除，如果以为违规被删除，那么伴随而来的是封号和积分清空；用户自己删除的回答无法恢复。

const doDelete = async (commentId: string) => {
    const res = await deleteComment(commentId);
    if (res) {
      message.success(' *** 作成功');
      onDelete();
    } else {
      message.error(' *** 作失败');
    }
  };

  const commentOpMenu = (comment: CommentUserType) => (
    <Menu>
      {(comment.userId === currentUser._id || access.canAdmin) && (
        <Menu.Item
          key={`delete${comment._id}`}
          icon={<DeleteOutlined />}
          danger
          onClick={() =>
            Modal.confirm({
              icon: <ExclamationCircleOutlined />,
              content: '是否确认删除？不可找回',
              onOk() {
                doDelete(comment._id);
              },
            })
          }
        >
          删除
        </Menu.Item>
      )}
      <Menu.Item
        key={`report${comment._id}`}
        icon={<WarningOutlined />}
        onClick={() => {
          setReportResourceId(comment._id);
          setShowReportModal(true);
        }}
      >
        举报
      </Menu.Item>
    </Menu>
  );

export function deleteComment(commentId: string) {
  if (!commentId) {
    return false;
  }

  return axios
    .post('/comment/delete', {
      commentId,
    })
    .then((res: any) => {
      console.log(`deleteComment succeed, id = ${commentId}`, res);
      return res;
    })
    .catch((e: any) => {
      console.error(`deleteComment error, id = ${commentId}`, e);
      return false;
    });
}

新增一条评论

export function addComment(params: Partial<CommentType>) {
  const { content, questionId } = params;
  if (!content || !questionId) {
    return false;
  }

  return axios
    .post('/comment/add', params)
    .then((res) => {
      console.log(`addComment succeed`, res);
      return res;
    })
    .catch((e: any) => {
      console.error(`addComment error`, e);
      return false;
    });
}

分页搜索

实现分页搜索，便于用户 *** 作，进行对回答的搜索

export async function searchComments(
  params: CommentSearchParams,
): Promise<PageResult<CommentUserType>> {
  const { pageSize = 8, pageNum = 1 } = params;
  const emptyResult = {
    data: [],
    total: 0,
  };
  if (pageSize < 1 || pageNum < 1) {
    return emptyResult;
  }
  return axios
    .post('/comment/search', params)
    .then((res: any) => {
      console.log(`searchComments succeed`, res);
      return res;
    })
    .catch((e: any) => {
      console.error('searchComments error', e);
      return emptyResult;
    });
}

审核回答

由于有些回答设计侮辱性词汇、政治敏感词汇，对读者造成不好的影响，所以如果有人举报，管理员需要审核并删除。

export async function reviewComment(
  commentId: string,
  reviewStatus: number,
  reviewMessage?: string,
) {
  if (!commentId || !reviewStatusInfoMap[reviewStatus]) {
    return false;
  }

  return axios
    .post('/comment/review', {
      commentId,
      reviewStatus,
      reviewMessage,
    })
    .then((res: any) => {
      console.log(`reviewComment succeed, id = ${commentId}`);
      return res;
    })
    .catch((e: any) => {
      console.error(`reviewComment error, id = ${commentId}`, e);
      return false;
    });
}

获取某个ID用户的回答

export function getComment(commentId: string, withUser = false) {
  if (!commentId) {
    return null;
  }

  return axios
    .post('/comment/get', {
      id: commentId,
      withUser,
    })
    .then((res: any) => {
      console.log(`getComment succeed, id = ${commentId}`, res);
      return res;
    })
    .catch((e: any) => {
      console.error(`getComment error, id = ${commentId}`, e);
      return null;
    });
}

点赞

export function thumbUpComment(commentId: string) {
  if (!commentId) {
    return false;
  }

  return axios
    .post('/comment/thumb-up', {
      commentId,
    })
    .then((res: any) => {
      console.log(`thumbUpComment succeed, id = ${commentId}`, res);
      return res.data;
    })
    .catch((e: any) => {
      console.error(`thumbUpComment error, id = ${commentId}`, e);
      return false;
    });
}

修改回答

export async function updateComment(commentId: string, comment: Partial<CommentType>) {
  if (!commentId || !comment) {
    return false;
  }

  return axios
    .post('/comment/update', {
      commentId,
      comment,
    })
    .then((res: any) => {
      console.log(`updateComment succeed, id = ${commentId}`, res);
      return true;
    })
    .catch((e: any) => {
      console.error(`updateComment error, id = ${commentId}`, e);
      return false;
    });
}