create

dashboard/src/components/template/SentEdit/SuggestionPopover.tsx

@@ -0,0 +1,73 @@
+import { Popover } from "antd";
+import { useEffect, useState } from "react";
+import SentCell from "./SentCell";
+import { ISentence } from "../SentEdit";
+import { useAppSelector } from "../../../hooks";
+import { prInfo } from "../../../reducers/pr-load";
+
+interface IWidget {
+  book: number;
+  para: number;
+  start: number;
+  end: number;
+  channelId: string;
+}
+const SuggestionPopoverWidget = ({
+  book,
+  para,
+  start,
+  end,
+  channelId,
+}: IWidget) => {
+  const [open, setOpen] = useState(false);
+  const [sentData, setSentData] = useState<ISentence>();
+  const pr = useAppSelector(prInfo);
+
+  useEffect(() => {
+    if (pr) {
+      if (
+        book === pr.book &&
+        para === pr.paragraph &&
+        start === pr.word_start &&
+        end === pr.word_end &&
+        channelId === pr.channel.id
+      ) {
+        setSentData({
+          id: pr.id,
+          content: pr.content,
+          html: pr.html,
+          book: pr.book,
+          para: pr.paragraph,
+          wordStart: pr.word_start,
+          wordEnd: pr.word_end,
+          editor: pr.editor,
+          channel: { name: pr.channel.name, id: pr.channel.id },
+          updateAt: pr.updated_at,
+        });
+        setOpen(true);
+      }
+    }
+  }, [book, channelId, end, para, pr, start]);
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+  };
+  return (
+    <Popover
+      placement="bottomRight"
+      content={
+        <div>
+          <SentCell value={sentData} key={1} isPr={true} showDiff={false} />
+        </div>
+      }
+      title={`${sentData?.editor.nickName}`}
+      trigger="click"
+      open={open}
+      onOpenChange={handleOpenChange}
+    >
+      <span></span>
+    </Popover>
+  );
+};
+
+export default SuggestionPopoverWidget;

dashboard/src/reducers/pr-load.ts

@@ -0,0 +1,27 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+import type { RootState } from "../store";
+import { ISuggestionData } from "../components/api/Suggestion";
+
+interface IState {
+  suggestion?: ISuggestionData;
+}
+
+const initialState: IState = {};
+
+export const slice = createSlice({
+  name: "pr-load",
+  initialState,
+  reducers: {
+    refresh: (state, action: PayloadAction<ISuggestionData>) => {
+      state.suggestion = action.payload;
+    },
+  },
+});
+
+export const { refresh } = slice.actions;
+
+export const prInfo = (state: RootState): ISuggestionData | undefined =>
+  state.prLoad.suggestion;
+
+export default slice.reducer;