:sparkles: add openArticleReducer

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

@@ -1,72 +1,159 @@
+import { useState } from "react";
 import { Badge, Tabs } from "antd";
 import {
-	TranslationOutlined,
-	BookOutlined,
-	CloseOutlined,
-	BlockOutlined,
+  TranslationOutlined,
+  BookOutlined,
+  CloseOutlined,
+  BlockOutlined,
 } from "@ant-design/icons";
 import { useIntl } from "react-intl";
 import { IWidgetSentEditInner } from "../SentEdit";
+import Article from "../../article/Article";
+
+import store from "../../../store";
+import openArticle, { IOpenArticle } from "../../../reducers/open-article";
+
 const Widget = ({
-	tranNum,
-	nissayaNum,
-	commNum,
-	originNum,
-	simNum,
+  id,
+  channels,
+  tranNum,
+  nissayaNum,
+  commNum,
+  originNum,
+  simNum,
 }: IWidgetSentEditInner) => {
-	const intl = useIntl();
-	return (
-		<Tabs
-			size="small"
-			items={[
-				{
-					label: (
-						<Badge size="small" count={0}>
-							<CloseOutlined />
-						</Badge>
-					),
-					key: "close",
-					children: <></>,
-				},
-				{
-					label: (
-						<Badge size="small" count={tranNum ? tranNum : 0}>
-							<TranslationOutlined />
-							{intl.formatMessage({
-								id: "channel.type.translation.label",
-							})}
-						</Badge>
-					),
-					key: "tran",
-					children: <div>译文</div>,
-				},
-				{
-					label: (
-						<Badge size="small" count={nissayaNum ? nissayaNum : 0}>
-							<BookOutlined />
-							{intl.formatMessage({
-								id: "channel.type.nissaya.label",
-							})}
-						</Badge>
-					),
-					key: "nissaya",
-					children: `2`,
-				},
-				{
-					label: (
-						<Badge size="small" count={commNum ? commNum : 0}>
-							<BlockOutlined />
-							{intl.formatMessage({
-								id: "channel.type.commentary.label",
-							})}
-						</Badge>
-					),
-					key: "3",
-					children: `3`,
-				},
-			]}
-		/>
-	);
+  const intl = useIntl();
+
+  const [translationActive, setTranslationActive] = useState<boolean>(false);
+  const [nissayaActive, setNissayaActive] = useState<boolean>(false);
+  const [commentaryActive, setCommentaryActive] = useState<boolean>(false);
+  const [originalActive, setOriginalActive] = useState<boolean>(false);
+  const onChange = (key: string) => {
+    switch (key) {
+      case "translation":
+        setTranslationActive(true);
+        const it: IOpenArticle = {
+          type: "corpus_sent/translation",
+          articleId: id,
+        };
+        store.dispatch(openArticle(it));
+        break;
+      case "nissaya":
+        setNissayaActive(true);
+        break;
+      case "commentary":
+        setCommentaryActive(true);
+        break;
+      case "original":
+        setOriginalActive(true);
+        break;
+    }
+  };
+  return (
+    <Tabs
+      size="small"
+      onChange={onChange}
+      items={[
+        {
+          label: (
+            <Badge size="small" count={0}>
+              <CloseOutlined />
+            </Badge>
+          ),
+          key: "close",
+          children: <></>,
+        },
+        {
+          label: (
+            <Badge size="small" count={tranNum ? tranNum : 0}>
+              <TranslationOutlined />
+              {intl.formatMessage({
+                id: "channel.type.translation.label",
+              })}
+            </Badge>
+          ),
+          key: "translation",
+          children: (
+            <Article
+              active={translationActive}
+              type="corpus_sent/translation"
+              articleId={id}
+              mode="edit"
+              showModeSwitch={false}
+              showMainMenu={false}
+              showContextMenu={false}
+            />
+          ),
+        },
+        {
+          label: (
+            <Badge size="small" count={nissayaNum ? nissayaNum : 0}>
+              <BookOutlined />
+              {intl.formatMessage({
+                id: "channel.type.nissaya.label",
+              })}
+            </Badge>
+          ),
+          key: "nissaya",
+          children: (
+            <Article
+              active={nissayaActive}
+              type="corpus_sent/nissaya"
+              articleId={id}
+              mode="edit"
+              showModeSwitch={false}
+              showMainMenu={false}
+              showContextMenu={false}
+            />
+          ),
+        },
+        {
+          label: (
+            <Badge size="small" count={commNum ? commNum : 0}>
+              <BlockOutlined />
+              {intl.formatMessage({
+                id: "channel.type.commentary.label",
+              })}
+            </Badge>
+          ),
+          key: "commentary",
+          children: (
+            <Article
+              active={commentaryActive}
+              type="corpus_sent/commentary"
+              articleId={id}
+              mode="edit"
+              showModeSwitch={false}
+              showMainMenu={false}
+              showContextMenu={false}
+            />
+          ),
+        },
+        {
+          label: (
+            <Badge size="small" count={originNum ? originNum : 0}>
+              <BlockOutlined />
+              {intl.formatMessage({
+                id: "channel.type.original.label",
+              })}
+            </Badge>
+          ),
+          key: "original",
+          children: (
+            <Article
+              active={originalActive}
+              type="corpus_sent/original"
+              articleId={id}
+              mode="edit"
+              showModeSwitch={false}
+              showMainMenu={false}
+              showContextMenu={false}
+            />
+          ),
+        },
+      ]}
+    />
+  );
 };
 
 export default Widget;

dashboard/src/store.ts

@@ -2,11 +2,13 @@ import { configureStore } from "@reduxjs/toolkit";
 
 import currentUserReducer from "./reducers/current-user";
 import layoutReducer from "./reducers/layout";
+import openArticleReducer from "./reducers/open-article";
 
 const store = configureStore({
   reducer: {
     layout: layoutReducer,
     currentUser: currentUserReducer,
+    openArticle: openArticleReducer,
   },
 });