mint/dashboard/src/components/article/Article.tsx

import { useEffect, useState } from "react";
import { message } from "antd";

import { modeChange } from "../../reducers/article-mode";
import { get } from "../../request";
import store from "../../store";
import { IArticleDataResponse, IArticleResponse } from "../api/Article";
import ArticleView from "./ArticleView";
import { ICourseCurrUserResponse } from "../api/Course";
import { ICourseUser, signIn } from "../../reducers/course-user";
import { ITextbook, refresh } from "../../reducers/current-course";
import ExerciseList from "./ExerciseList";
import ExerciseAnswer from "../course/ExerciseAnswer";
import "./article.css";
import CommentListCard from "../comment/CommentListCard";

export type ArticleMode = "read" | "edit" | "wbw";
export type ArticleType =
  | "article"
  | "chapter"
  | "paragraph"
  | "cs-para"
  | "sent"
  | "sim"
  | "page"
  | "textbook"
  | "exercise"
  | "exercise-list"
  | "corpus_sent/original"
  | "corpus_sent/commentary"
  | "corpus_sent/nissaya"
  | "corpus_sent/translation";
interface IWidgetArticle {
  type?: ArticleType;
  articleId?: string;
  mode?: ArticleMode;
  active?: boolean;
}
const Widget = ({
  type,
  articleId,
  mode = "read",
  active = false,
}: IWidgetArticle) => {
  const [articleData, setArticleData] = useState<IArticleDataResponse>();
  const [articleMode, setArticleMode] = useState<ArticleMode>(mode);
  const [extra, setExtra] = useState(<></>);

  let channels: string[] = [];
  if (typeof articleId !== "undefined") {
    const aId = articleId.split("_");
    if (aId.length > 1) {
      channels = aId.slice(1);
    }
  }
  useEffect(() => {
    /**
     * 由课本进入插叙当前用户的权限和channel
     */
    if (
      type === "textbook" ||
      type === "exercise" ||
      type === "exercise-list"
    ) {
      if (typeof articleId !== "undefined") {
        const id = articleId.split("_");
        get<ICourseCurrUserResponse>(`/v2/course-curr?course_id=${id[0]}`).then(
          (response) => {
            console.log("course user", response);
            if (response.ok) {
              const it: ICourseUser = {
                channelId: response.data.channel_id,
                role: response.data.role,
              };
              store.dispatch(signIn(it));
              /**
               * redux发布课程信息
               */
              const ic: ITextbook = {
                courseId: id[0],
                articleId: id[1],
              };
              store.dispatch(refresh(ic));
            }
          }
        );
      }
    }
  }, [articleId, type]);
  useEffect(() => {
    console.log("mode", mode, articleMode);
    if (!active) {
      return;
    }
    setArticleMode(mode);
    //发布mode变更
    store.dispatch(modeChange(mode));

    if (mode !== articleMode && mode !== "read" && articleMode !== "read") {
      console.log("set mode", mode, articleMode);
      return;
    }

    if (typeof type !== "undefined" && typeof articleId !== "undefined") {
      let url = "";
      switch (type) {
        case "article":
          const aIds = articleId.split("_");
          url = `/v2/article/${aIds[0]}?mode=${mode}`;
          if (aIds.length > 1) {
            const channels = aIds.slice(1);
            url += "&channel=" + channels.join();
          }
          break;
        case "textbook":
          /**
           * 从课本进入
           * id两部分组成
           * 课程id_文章id
           */
          const id = articleId.split("_");
          if (id.length < 2) {
            message.error("文章id期待2个，实际只给了一个");
            return;
          }
          url = `/v2/article/${id[1]}?mode=${mode}&view=textbook&course=${id[0]}`;
          break;
        case "exercise":
          /**
           * 从练习进入
           * id 由4部分组成
           * 课程id_文章id_练习id_username
           */
          const exerciseId = articleId.split("_");
          if (exerciseId.length < 3) {
            message.error("练习id期待3个");
            return;
          }
          console.log("exe", exerciseId);
          url = `/v2/article/${exerciseId[1]}?mode=${mode}&course=${exerciseId[0]}&exercise=${exerciseId[2]}&user=${exerciseId[3]}`;

          setExtra(
            <ExerciseAnswer
              courseId={exerciseId[0]}
              articleId={exerciseId[1]}
              exerciseId={exerciseId[2]}
            />
          );
          break;
        case "exercise-list":
          /**
           * 从练习进入
           * id 由3部分组成
           * 课程id_文章id_练习id
           */
          const exerciseListId = articleId.split("_");
          if (exerciseListId.length < 3) {
            message.error("练习id期待3个");
            return;
          }
          url = `/v2/article/${exerciseListId[1]}?mode=${mode}&course=${exerciseListId[0]}&exercise=${exerciseListId[2]}`;

          //url = `/v2/article/${exerciseListId[1]}?mode=${mode}&course=${exerciseListId[0]}&exercise=${exerciseListId[2]}&list=true`;
          setExtra(
            <ExerciseList
              courseId={exerciseListId[0]}
              articleId={exerciseListId[1]}
              exerciseId={exerciseListId[2]}
            />
          );
          break;
        default:
          url = `/v2/corpus/${type}/${articleId}/${mode}`;
          break;
      }
      console.log("url", url);
      get<IArticleResponse>(url).then((json) => {
        console.log("article", json);
        if (json.ok) {
          setArticleData(json.data);
        } else {
          message.error(json.message);
        }
      });
    }
  }, [active, type, articleId, mode, articleMode]);

  return (
    <div>
      <ArticleView
        id={articleData?.uid}
        title={articleData?.title}
        subTitle={articleData?.subtitle}
        summary={articleData?.summary}
        content={articleData ? articleData.content : ""}
        html={articleData?.html}
        path={articleData?.path}
        created_at={articleData?.created_at}
        updated_at={articleData?.updated_at}
        channels={channels}
        type={type}
        articleId={articleId}
      />
      {extra}
      <CommentListCard resId={articleData?.uid} resType="article" />
    </div>
  );
};

export default Widget;