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 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,
});
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">
              <li>安全设置</li>
              <li className={pathname.indexOf("/settings/SSH")>-1 ?"active":""}><Link to={`/settings/SSH`}><i className="iconfont icon-xuanzhongssh_icon mr5 font-14"></i>SSH密钥</Link></li>
            </ul>
            <ul className="securityUl">
              <li>个人信息</li>
              <li className={pathname.indexOf("/settings/profile")>-1 ?"active":""}><Link to={`/settings/profile`}><i className="iconfont icon-gerenziliao mr5 font-14"></i>基本资料</Link></li>
            </ul>
          </div>
          <LongWidth>
            <Gap>
              <Switch>
                <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>
              </Switch>
            </Gap>
          </LongWidth>
        </Box>
      </div>
      
    </div>
  )
}
export default withRouter((CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(Index))))
);