forgeplus-react/src/glcc/index.jsx

import React from "react";

import { Route, Switch } from "react-router-dom";
import { withRouter } from "react-router";

import { SnackbarHOC } from "educoder";
import { CNotificationHOC } from "../modules/courses/common/CNotificationHOC";
import { TPMIndexHOC } from "../modules/tpm/TPMIndexHOC";
import "./index.scss";

import Loadable from "react-loadable";
import Loading from "../Loading";
import { ImageLayerOfCommentHOC } from "../modules/page/layers/ImageLayerOfCommentHOC";
import { useState } from "react";
import { useEffect } from "react";
import { getStudentApplyInfo } from "./api";


// 任务管理审核
const Home = Loadable({
  loader: () => import("./home"),
  loading: Loading,
});
// 开源夏令营报名页面
const Apply = Loadable({
  loader: () => import("./apply"),
  loading: Loading,
});
// 开源夏令营帮助中心页面
const Help = Loadable({
  loader: () => import("./help"),
  loading: Loading,
});
// 学生报名课题
const Student = Loadable({
  loader: () => import("./student"),
  loading: Loading,
});
// 教师审核学生
const Check = Loadable({
  loader: () => import("./check"),
  loading: Loading,
});

// 开源夏令营项目、课题列表页面
const Project = Loadable({
  loader: () => import("./project"),
  loading: Loading,
});
// 课题详情页面
const TaskDetail = Loadable({
  loader: () => import("./project/taskDetail"),
  loading: Loading,
});
// 开源夏令营项目、课题列表页面
const Openmmlab = Loadable({
  loader: () => import("./openmmlab"),
  loading: Loading,
});

const Glcc = (propsF) => {
  const {current_user} = propsF;
  // 判断时间是否在开源夏令营报名时间内（4月15日~5月20日）
  const isGlccApplyDate = Date.parse(new Date()) < 1653062400000;

  // 学生报名时间new Date().getTime() > new Date('2022-05-26').getTime()
  const studentApplyStart = new Date().getTime() > new Date('2022-05-26').getTime();
  const isStudentApplyDate = new Date().getTime() > new Date('2022-05-26').getTime() && new Date().getTime() < new Date('2022-06-25').getTime();
  const studentApplyEnd = new Date().getTime() > new Date('2022-06-25').getTime();

  // 用户已报名课题id数组
  const [applyTaskId, setApplyTaskId] = useState({});
  // 刷新用户课题报名信息
  const [studentInfoReset, setStudentInfoReset] = useState(undefined);
  const [cancelCount,setCancelCount]=useState(0);

  useEffect(()=>{
    // 获取用户课题报名信息current_user user_id
    current_user && current_user.login && getStudentApplyInfo({userId: current_user.user_id}).then(response=>{
      if(response && response.message === "success"){
        // setData(response.data.rows);
        const data = {};
        response.data && response.data.registrationStudentTaskList.map(item=>{
          data[item.taskId] = item.id;
        })
        setApplyTaskId(data);
        response.data&&setCancelCount(Number(response.data.cancelCount));
      }
    })
  },[studentInfoReset, current_user])

  return (
    <div className="newMain clearfix">
      <Switch {...propsF}>
        {/* 学生报名 */}
        <Route
          path="/glcc/student/apply/:taskId"
          render={(props) => (
            <Student {...propsF} {...props} isGlccApplyDate={isGlccApplyDate} setStudentInfoReset={setStudentInfoReset}/>
          )}
        ></Route>
        {/* 开源夏令营报名页面 */}
        <Route
          path="/glcc/apply"
          render={(props) => (
            <Apply {...propsF} {...props} isGlccApplyDate={isGlccApplyDate}/>
          )}
        ></Route>
        {/* 教师审核 */}
        <Route
          path="/glcc/mentoradmin"
          render={(props) => (
            <Check {...propsF} {...props} isGlccApplyDate={isGlccApplyDate}/>
          )}
        ></Route>
        {/* 帮助中心 */}
        <Route
          path="/glcc/help"
          render={(props) => (
            <Help {...propsF} {...props} />
          )}
        ></Route>
        <Route
            path="/glcc/subjects/detail/:taskId"
            render={(props) => (
              <TaskDetail {...propsF} {...props} isStudentApplyDate={isStudentApplyDate} studentApplyEnd={studentApplyEnd} applyTaskId={applyTaskId} />
            )}
          ></Route>
        {/* 项目/课题列表 */}
        <Route
          path="/glcc/projects"
          render={(props) => (
            <Project {...propsF} {...props} isStudentApplyDate={isStudentApplyDate} studentApplyEnd={studentApplyEnd} applyTaskId={applyTaskId} setStudentInfoReset={setStudentInfoReset}/>
          )}
        ></Route>

        {/* 课题列表 */}
        <Route
          path="/glcc/subjects"
          render={(props) => (
            <Project {...propsF} {...props} isStudentApplyDate={isStudentApplyDate} studentApplyEnd={studentApplyEnd} applyTaskId={applyTaskId} setStudentInfoReset={setStudentInfoReset} cancelCount={cancelCount}/>
          )}
        ></Route>

        {/* 项目/课题列表 */}
        <Route
          path="/glcc/openmmlab"
          render={(props) => (
            <Openmmlab {...propsF} {...props} isStudentApplyDate={isStudentApplyDate} studentApplyEnd={studentApplyEnd} applyTaskId={applyTaskId} setStudentInfoReset={setStudentInfoReset}/>
          )}
        ></Route>

        {/* 首页 */}
        <Route
          path="/glcc"
          render={(props) => (
            <Home {...propsF} {...props} studentApplyStart={studentApplyStart}/>
          )}
        ></Route>

      </Switch>
    </div>
  );
}

export default withRouter(
  ImageLayerOfCommentHOC({
    imgSelector: ".imageLayerParent img, .imageLayerParent .imageTarget",
    parentSelector: ".newMain",
  })(CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(Glcc))))
);