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 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,
});

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);
  
  useEffect(()=>{
    if(checkIfLogin() === false){
      props.history.push('/login');
    }
  },[])


  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={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>
              <li className={pathname.indexOf("/settings/password")>-1 ?"active":""}><Link to={`/settings/password`}><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={(pathname.indexOf("/settings/notice")>-1 && pathname.indexOf("/settings/notice/config") == -1) || pathname.indexOf("/settings/notice/privateLetter")>-1 ?"active":""}><Link to={"/settings/notice"}><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/config"
                  render={(p) => (
                    <NoticeManager {...props} {...p}/>
                  )}
                ></Route>
                <Route
                  path="/settings/notice/privateLetter"
                  render={(p)=>(
                    <PrivateLetter{...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/password"
                  render={(p) => (
                    <Password {...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))))
);