DiscussionButton.tsx 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. import { Space, Tooltip } from "antd";
  2. import store from "../../store";
  3. import { type IShowDiscussion, count, show } from "../../reducers/discussion";
  4. import { openPanel } from "../../reducers/right-panel";
  5. import { CommentFillIcon, CommentOutlinedIcon } from "../../assets/icon";
  6. import type { TResType } from "./DiscussionListCard";
  7. import { useAppSelector } from "../../hooks";
  8. import { currentUser } from "../../reducers/current-user";
  9. import { discussionList } from "../../reducers/discussion-count";
  10. import type {
  11. IDiscussionCountData,
  12. IDiscussionCountWbw,
  13. } from "../../api/Comment";
  14. import { useEffect, useState } from "react";
  15. export const openDiscussion = (
  16. resId: string,
  17. resType: TResType,
  18. withStudent: boolean
  19. ) => {
  20. const data: IShowDiscussion = {
  21. type: "discussion",
  22. resId: resId,
  23. resType: resType,
  24. withStudent: withStudent,
  25. };
  26. console.debug("discussion show", data);
  27. store.dispatch(show(data));
  28. store.dispatch(openPanel("discussion"));
  29. };
  30. interface IWidget {
  31. initCount?: number;
  32. resId?: string;
  33. resType?: TResType;
  34. hideCount?: boolean;
  35. hideInZero?: boolean;
  36. onlyMe?: boolean;
  37. wbw?: IDiscussionCountWbw;
  38. }
  39. const DiscussionButton = ({
  40. initCount = 0,
  41. resId,
  42. resType = "sentence",
  43. hideCount = false,
  44. hideInZero = false,
  45. onlyMe = false,
  46. wbw,
  47. }: IWidget) => {
  48. const [CommentCount, setCommentCount] = useState<number | undefined>(
  49. initCount
  50. );
  51. const user = useAppSelector(currentUser);
  52. const discussions = useAppSelector(discussionList);
  53. const discussionCount = useAppSelector(count);
  54. useEffect(() => {
  55. if (
  56. discussionCount?.resType === "sentence" &&
  57. discussionCount.resId === resId
  58. ) {
  59. setCommentCount(discussionCount.count);
  60. }
  61. }, [resId, discussionCount]);
  62. const all = discussions?.filter((value) => value.res_id === resId);
  63. const my = all?.filter((value) => value.editor_uid === user?.id);
  64. let withStudent: IDiscussionCountData[] | undefined;
  65. if (wbw) {
  66. withStudent = discussions?.filter(
  67. (value) =>
  68. value.wbw?.book_id === wbw?.book_id &&
  69. value.wbw?.paragraph === wbw?.paragraph &&
  70. value.wbw?.wid.toString() === wbw?.wid.toString()
  71. );
  72. }
  73. //console.debug("DiscussionButton", discussions, wbw, withStudent);
  74. let currCount = CommentCount;
  75. if (onlyMe) {
  76. if (my) {
  77. currCount = my.length;
  78. } else {
  79. currCount = 0;
  80. }
  81. } else {
  82. if (all) {
  83. currCount = all.length;
  84. } else {
  85. currCount = 0;
  86. }
  87. if (withStudent) {
  88. currCount += withStudent.length;
  89. }
  90. }
  91. let myCount = false;
  92. if (my && my.length > 0) {
  93. myCount = true;
  94. }
  95. return hideInZero && currCount === 0 ? (
  96. <></>
  97. ) : (
  98. <Tooltip title="讨论">
  99. <Space
  100. size={"small"}
  101. style={{
  102. cursor: "pointer",
  103. color: currCount && currCount > 0 ? "#1890ff" : "unset",
  104. }}
  105. onClick={(_event) => {
  106. if (resId) {
  107. openDiscussion(resId, resType, wbw ? true : false);
  108. }
  109. }}
  110. >
  111. {myCount ? <CommentFillIcon /> : <CommentOutlinedIcon />}
  112. {hideCount ? <></> : currCount}
  113. </Space>
  114. </Tooltip>
  115. );
  116. };
  117. export default DiscussionButton;