forgeplus-react/src/forge/Information/index.jsx

import React ,{ useEffect , useState } 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 Loadable from "react-loadable";
import Loading from "../../Loading";
import { getMainInfos , getCheckZoneRole } from './api';
import PublicBanner from "./Component/publicBanner";
import './index.scss';
import { IsPC } from 'educoder';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import { tempEnum } from "./tempInfo";
import { ImageLayerOfCommentHOC } from "../../modules/page/layers/ImageLayerOfCommentHOC";
import { setSeoMeta } from 'educoder';


const SourceDetail = Loadable({
  loader: () => import("./Pages/sourceDetail"),
  loading: Loading,
});
const VIP = Loadable({
  loader: () => import("./Pages/zoneVIP"),
  loading: Loading,
});
const Apply = Loadable({
  loader: () => import("./Pages/apply"),
  loading: Loading,
});
const Source = Loadable({
  loader: () => import("./Pages/source"),
  loading: Loading,
});
const SourceSelfList = Loadable({
  loader: () => import("./Pages/selfList"),
  loading: Loading,
});
const HeaderPage = Loadable({
  loader: () => import("./Pages/headerPage"),
  loading: Loading,
});

const HeaderPageZone1 = Loadable({
  loader: () => import("./Pages/headerPageZone1"),
  loading: Loading,
});

const HeaderPageCCF = Loadable({
  loader : () => import("./Pages/headerPagebyCCF"),
  loading : Loading,
});

const ProjectSource = Loadable({
  loader: () => import("./Pages/projectSource"),
  loading: Loading,
});
const NewsDetail = Loadable({
  loader: () => import("./Pages/newsDetail"),
  loading: Loading,
});
const NewsList = Loadable({
  loader: () => import("./Pages/newsList"),
  loading: Loading,
});

const Main = Loadable({
  loader: () => import("./Pages/main"),
  loading: Loading,
});

const Help = Loadable({
  loader: () => import("./Pages/help"),
  loading: Loading,
});

function Index(props){
  const [ data , setData ] = useState(undefined);
  const [ adminUrl , setAdminUrl ] = useState(undefined);
  const { deptId } = props.match.params;
  const [ id , setId ] = useState(undefined);
  const [ temp , setTemp ] = useState(tempEnum.zone);
  const { pathname } = props.history.location;
  const sourcedetail = pathname.indexOf(`/zone/${deptId}/newdetail/`)>-1 && IsPC();

  useEffect(()=>{
    if(deptId && deptId!=="apply"){
      getDetail();
    }
  },[deptId])

  useEffect(() => {
    setTheme()
  }, [temp])

  function setTheme() {
    document.getElementsByTagName("html")[0].dataset.theme = temp;
  }
  setTheme()

  function getDetail(){
    getMainInfos(deptId).then(result=>{
      if(result){
        if (result.data.code === 404) {
          props.history.push('/nopage');
          return
        } 
        let data = result.data.data;
        if (data.template) {
          setTemp( data.template )
        }
        setData(data);
        document.title= data && data.name;
        setId(data.id);
        if(data.id){
          getAdminUrl(data.id);
        }
        setSeoMeta(`${data.name},`, data.name, data.subTitle, `/zone/${deptId}`)
      }
    }).catch(console.error())
  }

  function getAdminUrl(id){
    getCheckZoneRole(id).then(response=>{
      if(response && response.data.data){
        setAdminUrl(response.data.data);
      }else{
        setAdminUrl(undefined);
      }
    }).catch(error=>{})
  }
  return(
    <div className="information_main">
      { (!sourcedetail && deptId!=="apply") && (id ? <PublicBanner {...props} data={data} temp={ temp } adminUrl={adminUrl}/> : <div style={{ width: '100%', height: '450px' }}></div>)}
      <Switch>
        <Route
          path="/zone/:deptId/news/self"
          render={(p) => (
            <SourceSelfList {...props} {...p} id={id} temp={ temp }/>
          )}
        ></Route>
        <Route
          path="/zone/:deptId/news/:cateId"
          render={(p) => (
            <Main {...props} {...p} id={id} temp={ temp }/>
          )}
        ></Route>
        <Route
          path="/zone/:deptId/newdetail/:id"
          render={(p) => (
            <NewsDetail {...props} {...p} id={id} temp={ temp } data={data}/>
          )}
        ></Route>
        <Route
          path="/zone/:deptId/source/self"
          render={(p) => (
            <SourceSelfList {...props} {...p} id={id} temp={ temp }/>
          )}
        ></Route>
        <Route
          path="/zone/:deptId/source/:sourceid"
          render={(p) => (
            <SourceDetail {...props} {...p} id={id} temp={ temp } data={data}/>
          )}
        ></Route>
        <Route
          path="/zone/:deptId/source"
          render={(p) => (
            <Source {...props} {...p} id={id} temp={ temp }/>
          )}
        ></Route>
        <Route
          path="/zone/:deptId/VIP"
          render={(p) => (
            <VIP {...props} {...p} id={id} temp={ temp }/>
          )}
        ></Route>
        <Route
          path="/zone/:deptId/projects"
          render={(p) => (
            <ProjectSource {...props} {...p} id={id} temp={ temp }/>
          )}
        ></Route>
        <Route
          path="/zone/:deptId/news"
          render={(p) => (
            <Main {...props} {...p} id={id} temp={ temp }/>
          )}
        ></Route>
        {data && data.helperShow === 1 && <Route
          path="/zone/:deptId/help"
          render={(p) => (
            <Help {...props} {...p} id={id} temp={ temp } data={data} adminUrl={adminUrl}/>
          )}
        ></Route>}
        <Route
          path="/zone/apply"
          render={(p) => (
            <Apply {...props} {...p} id={id} temp={ temp }/>
          )}
        ></Route>
        <Route
          path="/zone/:deptId"
          render={(p) => (
            deptId==="CCF-ODC"?<HeaderPageCCF {...props} {...p} data={data} id={id} temp={ temp } />:
            temp === tempEnum.zone ? <HeaderPage {...props} {...p} data={data} id={id} temp={ temp }/> : <HeaderPageZone1 {...props} {...p} data={data} id={id} temp={ temp }/>
          )}
        ></Route>
      </Switch>
    </div>
  )
}
export default withRouter((CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(ImageLayerOfCommentHOC({
  imgSelector: ".imageLayerParent img, .imageLayerParent .imageTarget",
  parentSelector: ".newContainer",
})(Index)))))
);