forgeplus-react/src/forge/SecuritySetting/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 Loadable from "react-loadable";
import Loading from "../../Loading";
import { Box , Gap , LongWidth } from '../Component/layout';
import { getImageUrl } from 'educoder';
import { Link } from 'react-router-dom';

import './Index.scss';

const MyNoticeIndex = Loadable({
  loader: () => import("./notice/myNotice/Index"),
  loading: Loading,
});

const NoticeManager = Loadable({
  loader: () => import("./notice/manager/Index"),
  loading: Loading,
});

const SSHNew = Loadable({
  loader: () => import("./sub/New"),
  loading: Loading,
});
const Profile = Loadable({
  loader: () => import("../users/Material/Index"),
  loading: Loading,
});
const SSHIndex = Loadable({
  loader: () => import("./sub/SSH"),
  loading: Loading,
});

const PrivateLetter = Loadable({
  loader: () => import("./notice/privateLetter/Index"),
  loading: Loading,
});

function Index(props){
  const { current_user } = props;
  const { pathname } = props.location;

  return(
    <div className="newMain clearfix whiteBack">
      <div className="boies">
        <Box>
          <div className="shortW">
            <div className="userDetail">
              <img src={getImageUrl(`/${current_user && current_user.image_url}`)} alt=""/>
              <span>{current_user && current_user.username}</span>
            </div>
            <ul className="securityUl ul-border-buttom">
              <li>个人信息</li>
              <li className={pathname.indexOf("/settings/profile")>-1 ?"active":""}><Link to={`/settings/profile`}><i className="iconfont icon-gerenziliao mr5 font-14"></i><span className="text-shodow-bold">基本资料</span></Link></li>
            </ul>
            <ul className="securityUl ul-border-buttom">
              <li>消息通知</li>
              <li className={(pathname.indexOf("/settings/notice")>-1 && pathname.indexOf("/settings/notice/config") == -1) || pathname.indexOf("/settings/notice/privateLetter")>-1 ?"active":""}><Link to={{pathname:"/settings/notice",state:{noticeType:"notification"}}}><i className="iconfont icon-wodetongzhi"></i><span className="text-shodow-bold">我的通知</span></Link></li>
              {/* <li className={pathname.indexOf("/settings/notice/config")>-1 ?"active":""}><Link to={'/settings/notice/config'}><i className="iconfont icon-tongzhiguanli"></i><span className="text-shodow-bold">通知管理</span></Link></li> */}
            </ul>
            <ul className="securityUl">
              <li>安全设置</li>
              <li className={pathname.indexOf("/settings/SSH")>-1 ?"active":""}><Link to={`/settings/SSH`}><i className="iconfont icon-xuanzhongssh_icon mr5 font-14"></i><span className="text-shodow-bold">SSH密钥</span></Link></li>
            </ul>
          </div>
          <LongWidth>
            <Gap>
              <Switch>
                <Route
                  path="/settings/notice"
                  render={(p) => (
                    <MyNoticeIndex {...props} {...p}/>
                  )}
                ></Route>
                <Route
                  path="/settings/notice/config"
                  render={(p) => (
                    <NoticeManager {...props} {...p}/>
                  )}
                ></Route>
                <Route
                  path="/settings/SSH/new"
                  render={(p) => (
                    <SSHNew {...props} {...p}/>
                  )}
                ></Route>
                <Route
                  path="/settings/profile"
                  render={(p) => (
                    <Profile {...props} {...p}/>
                  )}
                ></Route>
                <Route
                  path="/settings/SSH"
                  render={(p) => (
                    <SSHIndex {...props} {...p}/>
                  )}
                ></Route>
                <Route
                  path="/settings/notice/privateLetter"
                  render={(p)=>(
                    <PrivateLetter{...props} {...p}/>
                  )}
                ></Route>
              </Switch>
            </Gap>
          </LongWidth>
        </Box>
      </div>
    </div>
  )
}
export default withRouter((CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(Index))))
);