DiscussionBox.tsx 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. import { useEffect, useState } from "react";
  2. import type { IComment } from "./DiscussionItem"
  3. import { useAppSelector } from "../../hooks";
  4. import {
  5. type IShowDiscussion,
  6. message,
  7. show,
  8. showAnchor,
  9. } from "../../reducers/discussion";
  10. import { Button } from "antd";
  11. import store from "../../store";
  12. import Discussion from "./Discussion";
  13. export interface IAnswerCount {
  14. id: string;
  15. count: number;
  16. }
  17. interface IWidget {
  18. onTopicChange?: Function;
  19. }
  20. const DiscussionBoxWidget = ({ _____onTopicChange }: IWidget) => {
  21. const [topicId, setTopicId] = useState<string>();
  22. const [currTopic, setCurrTopic] = useState<IComment>();
  23. const discussionMessage = useAppSelector(message);
  24. useEffect(() => {
  25. if (discussionMessage) {
  26. if (discussionMessage.topic) {
  27. setTopicId(discussionMessage.topic);
  28. } else {
  29. }
  30. }
  31. }, [discussionMessage]);
  32. return (
  33. <>
  34. <Button
  35. type="link"
  36. onClick={() => {
  37. const anchorInfo: IShowDiscussion = {
  38. type: "discussion",
  39. resId: discussionMessage?.resId
  40. ? discussionMessage?.resId
  41. : currTopic?.resId,
  42. resType: discussionMessage?.resType,
  43. };
  44. store.dispatch(show(anchorInfo));
  45. store.dispatch(showAnchor(anchorInfo));
  46. }}
  47. >
  48. 显示译文
  49. </Button>
  50. <Discussion
  51. resId={discussionMessage?.resId}
  52. resType={discussionMessage?.resType}
  53. focus={discussionMessage?.comment}
  54. showStudent={discussionMessage?.withStudent}
  55. showTopicId={topicId}
  56. onTopicReady={(value: IComment) => {
  57. setCurrTopic(value);
  58. }}
  59. />
  60. </>
  61. );
  62. };
  63. export default DiscussionBoxWidget;