forgeplus-react/src/forge/SecuritySetting/Index.jsx

import React, { 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 { Box , Gap , LongWidth } from '../Component/layout';
import { getImageUrl } from 'educoder';
import { Link } from 'react-router-dom';
import Avatar from '../users/Avatar/Index';

import './Index.scss';
import { useEffect } from "react";

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

const NoticeManager = Loadable({
  loader: () => import("./notice/manager/Index"),
  loading: Loading,
});
const CLAList = Loadable({
  loader: () => import("./cla/Index"),
  loading: Loading,
});
const SSHNew = Loadable({
  loader: () => import("./sub/New"),
  loading: Loading,
});
const Profile = Loadable({
  loader: () => import("../users/Material/Index"),
  loading: Loading,
});
const Password = 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,
});
const ExploitBot = Loadable({
  loader: () => import("./bot/exploit"),
  loading: Loading,
});
const CreateBot = Loadable({
  loader: () => import("./bot/exploit/new"),
  loading: Loading,
});
const DispositionDetail = Loadable({
  loader: () => import("./bot/disposition/detail"),
  loading: Loading,
});
const Disposition = Loadable({
  loader: () => import("./bot/disposition"),
  loading: Loading,
});
const Mysite = Loadable({
  loader: () => import("./website/mySiteList"),
  loading: Loading,
});
const CreateSite = Loadable({
  loader: () => import("./website/createSite"),
  loading: Loading,
});

function Index(props){
  const { current_user,mygetHelmetapi , checkIfLogin } = props;
  const { pathname } = props.location;
  const notice_url = mygetHelmetapi && mygetHelmetapi.common && mygetHelmetapi.common.notice;

  const [ avatarVisible , setAvatarVisible ] = useState(false);
  const [active, setActive] = useState(1);

  useEffect(()=>{
    if(checkIfLogin() === false){
      props.history.push('/login');
    }
  },[])

  useEffect(()=>{
    const pattern = /^\/settings\/installbot\/\d+$/;
    if(["/settings/profile"].indexOf(pathname) !== -1){
      setActive(1);
    }else if(["/settings/emails", "/settings/phone", "/settings/password", "/settings/cancel"].indexOf(pathname) !== -1){
      setActive(2);
    }else if(["/settings/notice/config"].indexOf(pathname) !== -1){
      setActive(4);
    }else if(["/settings/notice"].indexOf(pathname) !== -1){
      setActive(3);
    }else if(["/settings/SSH"].indexOf(pathname) !== -1){
      setActive(5);
    }else if(["/settings/CLA"].indexOf(pathname) !== -1){
      setActive(6);
    }else if(["/settings/mybot", "/settings/mybot/new"].indexOf(pathname) !== -1){
      setActive(7);
    }else if(["/settings/installbot"].indexOf(pathname) !== -1 || pattern.test(pathname)){
      setActive(8);
    }else if(["/settings/mysite", "/settings/mysite/create"].indexOf(pathname) !== -1){
      setActive(9);
    }
  }, [pathname])

  function onCancelAvatar(){
    setAvatarVisible(false);
    const { resetUserInfo } = props;
    resetUserInfo && resetUserInfo();
  }
  return(
    <div className="newMain clearfix whiteBack">
      {
        avatarVisible &&
        <Avatar
          onCancel={onCancelAvatar}
          avatarImg={getImageUrl(`/${current_user && current_user.image_url}`)}
          login={current_user && current_user.login}
        />
      }
      <div className="boies">
        <Box>
          <div className="shortW">
            <div className="userDetail">
              <div className="userHeadPhoto">
                <img src={getImageUrl(`/${current_user && current_user.image_url}`)} alt=""/>
                <span className="userUpdateBox"onClick={()=>setAvatarVisible(true)}>修改头像</span>
              </div>
              <span>{current_user && current_user.username}</span>
            </div>
            <ul className="securityUl ul-border-buttom">
              <li>个人信息</li>
              <li className={active === 1 ?"active":""}><Link to={`/settings/profile`}><i className="iconfont icon-gerenziliao mr5 font-14"></i><span className="text-shodow-bold">基本资料</span></Link></li>
              <li className={active === 2 ?"active":""}><Link to={`/settings/phone`}><i className="iconfont icon-xuanzhonganquanshezhi_icon mr5 font-14"></i><span className="text-shodow-bold">账号管理</span></Link></li>
            </ul>
            {notice_url && <ul className="securityUl ul-border-buttom">
              <li>消息通知</li>
              <li className={active === 3 ?"active":""}><Link to={"/settings/notice"}><i className="iconfont icon-wodetongzhi font-14"></i><span className="text-shodow-bold">我的通知</span></Link></li>
              <li className={active === 4 ?"active":""}><Link to={'/settings/notice/config'}><i className="iconfont icon-tongzhiguanli font-14"></i><span className="text-shodow-bold">通知管理</span></Link></li>
            </ul>}
            <ul className="securityUl ul-border-buttom">
              <li>安全设置</li>
              <li className={active === 5 ?"active":""}><Link to={`/settings/SSH`}><i className="iconfont icon-xuanzhongssh_icon mr5 font-14"></i><span className="text-shodow-bold">SSH密钥</span></Link></li>
              <li className={active === 6 ?"active":""}><Link to={`/settings/CLA`}><i className="iconfont icon-a-zu2044 mr5 font-13"></i><span className="text-shodow-bold">我的CLA</span></Link></li>
            </ul>
            <ul className="securityUl ul-border-buttom">
              <li>Bot开发</li>
              <li className={active === 7 ?"active":""}><Link to={`/settings/mybot`}><i className="iconfont icon-kaifabot mr5 font-18"></i><span className="text-shodow-bold">我的Bot</span></Link></li>
              <li className={active === 8 ?"active":""}><Link to={`/settings/installbot`}><i className="iconfont icon-BOTpeizhi mr5 font-17"></i><span className="text-shodow-bold">Bot安装</span></Link></li>
            </ul>
            <ul className="securityUl">
              <li>个人建站</li>
              <li className={active === 9 ?"active":""}><Link to={`/settings/mysite`}><i className="iconfont icon-liebiaoicon mr5 font-15"></i><span className="text-shodow-bold">我的站点</span></Link></li>
            </ul>
          </div>
          <LongWidth>
            <Gap>
              <Switch>
                <Route
                  path="/settings/notice/config"
                  render={(p) => (
                    <NoticeManager {...props} {...p}/>
                  )}
                ></Route>
                <Route
                  path="/settings/notice/privateLetter"
                  render={(p)=>(
                    <PrivateLetter{...props} {...p}/>
                  )}
                ></Route>
                <Route
                  path="/settings/CLA"
                  render={(p) => (
                    <CLAList {...props} {...p}/>
                  )}
                ></Route>
                <Route
                  path="/settings/notice"
                  render={(p) => (
                    <MyNoticeIndex {...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/emails"
                  render={(p) => (
                    <Password {...props} {...p}/>
                  )}
                ></Route>
                <Route
                  path="/settings/password"
                  render={(p) => (
                    <Password {...props} {...p}/>
                  )}
                ></Route>
                <Route
                  path="/settings/cancel"
                  render={(p) => (
                    <Password {...props} {...p}/>
                  )}
                ></Route>
                <Route
                  path="/settings/phone"
                  render={(p) => (
                    <Password {...props} {...p}/>
                  )}
                ></Route>
                <Route
                  path="/settings/verification"
                  render={(p) => (
                    <Password {...props} {...p}/>
                  )}
                ></Route>
                <Route
                  path="/settings/SSH"
                  render={(p) => (
                    <SSHIndex {...props} {...p}/>
                  )}
                ></Route>
                {/* 创建一个新的bot */}
                <Route
                  path="/settings/mybot/new"
                  render={(p) => (
                    <CreateBot {...props} {...p}/>
                  )}
                ></Route>
                {/* 开发bot */}
                <Route
                  path="/settings/mybot"
                  render={(p) => (
                    <ExploitBot {...props} {...p}/>
                  )}
                ></Route>
                {/* bot配置页面 */}
                <Route
                  path="/settings/installbot/:id"
                  render={(p) => (
                    <DispositionDetail {...props} {...p}/>
                  )}
                ></Route>
                {/* bot配置 */}
                <Route
                  path="/settings/installbot"
                  render={(p) => (
                    <Disposition {...props} {...p}/>
                  )}
                ></Route>
                {/* 创建站点 */}
                <Route
                  path="/settings/mysite/create"
                  render={(p) => (
                    <CreateSite {...props} {...p}/>
                  )}
                ></Route>
                {/* 个人建站 */}
                <Route
                  path="/settings/mysite"
                  render={(p) => (
                    <Mysite {...props} {...p}/>
                  )}
                ></Route>
              </Switch>
            </Gap>
          </LongWidth>
        </Box>
      </div>
    </div>
  )
}
export default withRouter((CNotificationHOC()(SnackbarHOC()(TPMIndexHOC(Index))))
);