forgeplus-react/src/forge/Main/CoderDepot.jsx

import React , { useEffect , useState } from 'react';
import { WhiteBack , Box , LongWidth , ShortWidth , Gap , AlignCenter , FlexAJ  } from '../Component/layout';
import { Dropdown , Menu , Divider , Spin, Button , Typography } from 'antd';
import { getImageUrl } from "educoder";
import { Link } from 'react-router-dom';
import CloneAddress from '../Branch/CloneAddress';

import SelectBranch from '../Branch/Select';
import User from '../Component/User';
import axios from 'axios';
import Path from './CoderDepotPath';
import Catalogue from './CoderDepotCatalogue';
import ReadMe from './CoderDepotReadme';
import CoderRootFileDetail from './CoderRootFileDetail';
import './Index.scss';
import Releases from '../Component/Releases';
import Contributors from '../Component/Contributors';
import LanguagePower from '../Component/LanguagePower';
import DrawerPanel from '../Component/DrawerPanel';
import UpdateDescModal from './sub/UpdateDescModal';
import Nodata from '../Nodata';
import Invite from './sub/Invite';
/**
 * projectDetail.type:0是托管项目，1是镜像项目，2是同步镜像项目(为2时不支持在线创建、在线上传、在线修改、在线删除、创建合并请求等功能)
 */
 const { Paragraph } = Typography;
function turnbar(str){
  if(str && str.length>0 && str.indexOf("/")>-1){
    return str.replaceAll('/','%2F');
  }
  return str;
}
function returnbar(str){
  if(str && str.length>0 && str.indexOf("%2F")>-1){
    return str.replaceAll('%2F','/');
  }
  return str;
}

function CoderDepot(props){
  const [ projectDetail , setProjectDetail ]= useState(undefined);
  const [ inviteCode , setInviteCode ] = useState(undefined);
  const [ treeValue , setTreeValue ] = useState(undefined);
  const [ treeValuePath , setTreeValuePath ] = useState(undefined);
  const [ lastCommit,setLastCommit ] = useState(undefined);
  const [ lastCommitAuthor,setLastCommitAuthor ] = useState(undefined);
  const [ type ,setType ] = useState('dir');
  const [ hide , setHide ] = useState(true);
  const [ hideBtn , setHideBtn ] = useState(false);
  const [ commitCount ,setCommitCount ] = useState(0);
  const [ dirInfo ,setDirInfo ] = useState(undefined);//文件夹目录列表
  const [ fileInfo ,setFileInfo ] = useState(undefined);//文件内容信息
  const [ zip_url , setZip_url ] = useState(undefined);
  const [ tar_url , setTar_url ] = useState(undefined);
  const [ readOnly , setReadOnly] = useState(true);
  const [ isSpin , setIsSpin] = useState(true);
  const [ visible ,setVisible ] = useState(false);
  const [ mainFlag ,setMainFlag ] = useState(false);
  const [ openModal , setOpenModal ] = useState(false);
  const [ desc , setDesc ] = useState(undefined);
  const [ website , setWebsite ] = useState(undefined);
  const [ lesson_url , setLessonUrl ] = useState(undefined);
  const [ readme , setReadme ] = useState(undefined);
  const [ defaultBranch , setDefaultBranch ] = useState(undefined);
  const [ editReadme , setEditReadme ] = useState(false);
  const [ pullsFlag , setPullsFlag ] = useState(true);
  const [ issuesFlag , setIssuesFlag ] = useState(true);

  const owner = props.match.params.owner;
  const projectsId = props.match.params.projectsId;
  let branchName = props.match.params.branchName;
  branchName = returnbar(branchName);
  const details = props.projectDetail;
  let pathname = props.history.location.pathname;
  
  const { bannerList } = props;

  useEffect(()=>{
    if(bannerList && bannerList.length>0){
      let a = bannerList.filter(i=>i.menu_name === "pulls");
      let i = bannerList.filter(i=>i.menu_name === "issues");
      if(a && a.length === 0){
        setPullsFlag(false);
      }
      if(i && i.length === 0){
        setIssuesFlag(false);
      }
    }
  },[bannerList])


  useEffect(()=>{
    if(details){
      setProjectDetail(details);
      setDesc(details.description);
      setWebsite(details.website);
      setLessonUrl(details.lesson_url);
      setDefaultBranch(details.default_branch);
      setInviteCode(details.invite_code);
    }
  },[details])

  useEffect(()=>{
    if(treeValue){
      setTreeValuePath(treeValue.split('/'));
    }else{
      setTreeValuePath(undefined);
    }
  },[treeValue])


  useEffect(()=>{
    if (projectsId && owner && defaultBranch){
      let b = turnbar(branchName) ;
      if(pathname.indexOf(`/projects/${owner}/${projectsId}`) > -1 && pathname.indexOf(`/tree/${b}/`) > -1) {
        let url = pathname.split(`/tree/${b}/`)[1];
        setTreeValue(url);
        getFileInfo(url,branchName);
        setType("file");
      }else{
        setTreeValue(undefined);
        getDirInfo(branchName || defaultBranch);
        setType("dir");
      }
    } 
  },[projectsId,owner,pathname,defaultBranch])

  // 获取主目录列表
  function getDirInfo(branch){
    setIsSpin(true);
    const url = `/${owner}/${projectsId}/entries.json`;

    axios.get(url, { 
      params: { ref: branch } 
    }).then((result) => {
      if (result) {
        setCommitCount(result.data.commits_count);
        setDirInfo(result.data.entries);
        setFileInfo(undefined);
        setTar_url(result.data.tar_url);
        setZip_url(result.data.zip_url);
        let c = result.data.last_commit
        setLastCommit(c && c.commit);
        setLastCommitAuthor(c && c.committer);
        setMainFlag(true);
        setReadOnly(true);
        setReadme(result.data.readme);
        setEditReadme(false);
        setHide(true);
      }
      setTimeout(function(){setIsSpin(false);},500);
    }).catch(error=>{setIsSpin(false);})
  }

  useEffect(()=>{
    if(projectDetail && lastCommit)
    {
      let ele = document.getElementById("ptxt");
      if(ele){
        let h = ele.offsetHeight;
        if( h > 18 ) setHideBtn(true);
      }
    }
  },[projectDetail,lastCommit])
  // 获取子目录列表
  function getFileInfo(path, ref){
    setIsSpin(true);
    const url = `/${owner}/${projectsId}/sub_entries.json`;
    axios.get(url, { 
      params:{
        filepath:path,
        ref:ref || branchName,
        type
      }
    }).then((result) => {
      if (result) {
        let en = result.data.entries;
        if(en.type){
          setDirInfo(undefined);
          setFileInfo(en);
          setType(en.type);
        }else{
          setFileInfo(undefined);
          setDirInfo(en);
          setType("dir");
        }
        let c = result.data.last_commit
        setLastCommit(c && c.commit);
        setLastCommitAuthor(c && c.committer);
        setMainFlag(false);
        setReadOnly(!editReadme);
        setHide(true);
      }
      setTimeout(function(){setIsSpin(false);},500)
    }).catch(error=>{setIsSpin(false);})
  }

  // 切换分支或者标签
  function changeBranch(value){
    let checkvalue = turnbar(value);
    let url = `/projects/${owner}/${projectsId}${value && `/tree/${checkvalue}`}${treeValue ? `/${treeValue}`:""}`;
    props.history.push(url);
  }
    
  // 文件相关的下拉项
  function fileMenu(){
    let b = branchName || defaultBranch;
    let checkvalue = turnbar(b);
    return (
    <Menu>
      <Menu.Item><a onClick={()=>urlLink(`/projects/${owner}/${projectsId}/${checkvalue}/uploadfile${treeValue === undefined ? "" : `/${treeValue}`}`)}>上传文件</a></Menu.Item>
      <Menu.Item><a onClick={()=>urlLink(`/projects/${owner}/${projectsId}/${checkvalue}/newfile${treeValue === undefined ? "" : `/${treeValue}`}`)}>新建文件</a></Menu.Item>
    </Menu>
    )
  }

  function getPathUrl(array,index){
    if(array && array.length>0 && index){
      let str = "";
      for(let i=0;i<index;i++){
        str += `/${array[i]}`;
      }
      return str.substr(1);
    }
  }
  // 页面地址返回到主目录
  function returnMain(){
    setTreeValue(undefined);
    let branch = branchName || defaultBranch;
    let checkvalue = turnbar(branch);
    props.history.push(`/projects/${owner}/${projectsId}/tree/${checkvalue}`);
  };
  // 子目录路径返回链接
  function returnUlr(url){
    let enBranch = turnbar(branchName);
    props.history.push(`/projects/${owner}/${projectsId}/tree${enBranch?`/${enBranch}`:""}/${url}`);
  }
  // 点击跳转到子目录
  function goToSubRoot(path,type,filename){
    if(type!=="submodule"){
      let enBranch = branchName || defaultBranch;
      let checkvalue = turnbar(enBranch);
      setType(type);
      props.history.push(`/projects/${owner}/${projectsId}${`/tree/${checkvalue}`}${path?`/${path}`:""}`);
    }
  }

  function onEdit(readOnly){
    setReadOnly(readOnly);
    setEditReadme(false);
  }
  function ChangeFile(path, readOnly){
    //点击直接跳转页面 加载一次路由
    let enBranch = branchName || defaultBranch;
    let checkvalue = turnbar(enBranch);
    props.history.push(`/projects/${owner}/${projectsId}/tree/${checkvalue}/${path}`);
    setType("file");
    setEditReadme(true);
  };

  function changeHide(hide){
    setHide(!hide);
  }

  function urlLink(link){
    if(props.checkIfLogin()===false){
      props.showLoginDialog()
      return false;
    }
    props.history.push(link);
  }

  const downloadMenu = (
    <CloneAddress 
      http_url={projectDetail && projectDetail.clone_url}
      ssh_url = {projectDetail && projectDetail.ssh_url}
      zip_url={zip_url}
      tar_url={tar_url}
      showNotification={props.showNotification}/>
  )
  // 确认修改简介、website、实践课程链接
  function okUpdate(d,w,l){
    const url = `/${owner}/${projectsId}.json`;
    axios.put(url,{
      description:d,website:w,lesson_url:l
    }).then(result=>{
      if(result && result.data && result.data.id){
        setDesc(result.data.description);
        setWebsite(result.data.website);
        setLessonUrl(result.data.lesson_url);
      }
    })
  }
  let n = fileInfo && fileInfo.name;
  const mdFlag = n && n.substring(n.length-3,n.length) === ".md";

  const { current_user } = props;
  const baseOperate = projectDetail && projectDetail.permission && projectDetail.permission !=="Reporter";
  const fileOperate = type === "dir" && projectDetail && projectDetail.type !== 2 && ((projectDetail.permission && projectDetail.permission !=="Reporter") || (current_user && current_user.admin));
  return(
    <WhiteBack>
      <UpdateDescModal desc={desc} website={website} lesson_url={lesson_url} visible={openModal} onCancel={()=>setOpenModal(false)} onOk={okUpdate}/>
      <Spin spinning={isSpin}>
        {
          (dirInfo || fileInfo) && 
          <React.Fragment>
            <DrawerPanel 
              history={props.history} 
              owner={owner} 
              projectsId={projectsId} 
              name={projectDetail && projectDetail.name}
              branch={branchName || defaultBranch} 
              visible={visible} 
              onClose={()=>setVisible(false)}
              list = {mainFlag ? dirInfo : undefined}
            />
            <div className="drawerBtn" onClick={()=>setVisible(true)}>
              <i className="iconfont icon-zuohuaicon font-14"></i>
              <span>目录</span>
            </div>
          </React.Fragment>
        }
        <div style={{minHeight:"500px"}}>
          { 
            projectDetail &&
            <Box className="Panels">
              <LongWidth>
                <div className="panelmenu">
                  <FlexAJ>
                    <AlignCenter>
                      <div className="mr30">
                        {
                          props && props.platform ?
                          <SelectBranch
                            repo_id={projectDetail && projectDetail.repo_id}
                            projectsId={projectsId}
                            branch={branchName || defaultBranch}
                            changeBranch={changeBranch}
                            owner={owner}
                            history={props.history}
                            branchList={projectDetail && projectDetail.branches && projectDetail.branches.list}
                          ></SelectBranch>
                          :
                          <span>分支：<span className="color-grey-6">{branchName || defaultBranch}</span></span>
                        }
                      </div>
                      <AlignCenter className="mr20">
                        <Link to={`/projects/${owner}/${projectsId}/branchs`} className="depotNum">
                          <i className="iconfont icon-master_icon font-14 mr3"></i>
                          <span className="mr3">分支</span>
                          <span>{projectDetail && projectDetail.branches && projectDetail.branches.total_count}</span>
                        </Link>
                      </AlignCenter>
                      <AlignCenter className="mr20">
                        <Link to={`/projects/${owner}/${projectsId}/tag`} className="depotNum">
                          <i className="iconfont icon-biaoqianicon font-14 mr3"></i>
                          <span className="mr3">标签</span>
                          <span>{projectDetail && projectDetail.tags && projectDetail.tags.total_count}</span>
                        </Link>
                      </AlignCenter>
                    </AlignCenter>
                    <AlignCenter className="depotBtn">
                      {
                        baseOperate && projectDetail.type !== 2 && pullsFlag &&
                        <Button type="default" onClick={()=>urlLink(`/projects/${owner}/${projectsId}/pulls/new`)} className="mr10"><i className="iconfont icon-xinjian2 font-12 mr3"></i> 合并请求</Button>
                      }
                      {
                        baseOperate && issuesFlag &&
                        <Button type="default" onClick={()=>urlLink(`/projects/${owner}/${projectsId}/issues/new`)} className="mr10"><i className="iconfont icon-xinjian2 font-12 mr3"></i> 任务</Button>
                      }
                      { fileOperate &&
                        <Dropdown overlay={fileMenu()} className="mr10" trigger={['click']}>
                          <Button type="default">文件 <i className="iconfont icon-sanjiaoxing-down ml3 font-14 color-grey-6 mr-5"></i></Button>
                        </Dropdown>
                      }
                      
                      <Dropdown overlay={downloadMenu} placement="bottomRight" trigger={['click']}>
                        <Button type={'primary'}>下载 <i className="iconfont icon-sanjiaoxing-down ml3 font-14 color-white mr-3"></i></Button>
                      </Dropdown>
                    </AlignCenter>
                  </FlexAJ>
                  {
                    dirInfo || fileInfo ?
                    <div className="listtable">
                      {
                        lastCommit &&
                        <div className="listtablehead">
                          <User url={getImageUrl(`/${lastCommitAuthor && lastCommitAuthor.image_url}`)} name={lastCommitAuthor && lastCommitAuthor.name} id={lastCommitAuthor && lastCommitAuthor.id} login={lastCommitAuthor && lastCommitAuthor.login}/>
                          <div className={hideBtn && hide ? "ellipsistxt hidetxt" :"ellipsistxt"}>
                            <pre id="ptxt">{lastCommit && lastCommit.message}</pre>
                          </div>
                          { hideBtn && <span className="ellipsis" onClick={()=>changeHide(hide)}><i className="iconfont icon-shenglvehao"></i></span> }
                         
                          <span className="ml20 color-grey-9 mt1">{lastCommit && lastCommit.time_from_now}</span>
                          { 
                            commitCount ? 
                            <Link to={`/projects/${owner}/${projectsId}/commits/branch/${turnbar(branchName || defaultBranch)}`} className="ml20 color-grey-9" style={{height:"30px",lineHeight:"30px"}}>
                              <i className="iconfont icon-tijiaoicon mr3 font-16"></i>{commitCount}次提交
                            </Link>:"" 
                          }
                        </div>
                      }
                      <ul className="listtablebody">
                        {
                          treeValuePath && treeValuePath.length > 0 &&
                          <Path 
                            identifier={projectDetail && projectDetail.identifier} 
                            treeValuePath={treeValuePath}
                            returnUlr={returnUlr}
                            returnMain={returnMain}
                            getPathUrl={getPathUrl}
                          />
                        }
                        {
                          dirInfo && dirInfo.length > 0 &&
                          dirInfo.map((item,key)=>{
                            return(
                              <Catalogue 
                                owner={owner} 
                                item={item} 
                                projectsId={projectsId} 
                                goToSubRoot={goToSubRoot} 
                              />
                            )
                          })
                        }
                        {
                          fileInfo &&
                          <CoderRootFileDetail
                            {...props}
                            detail={fileInfo}
                            readOnly={readOnly}
                            md={mdFlag}
                            onEdit={onEdit}
                            currentBranch={branchName || defaultBranch}
                            type={projectDetail.type}
                          ></CoderRootFileDetail>[[]]
                        }
                      </ul>
                    </div>
                    : ""
                  }
                  {
                    (dirInfo && dirInfo.length === 0) && (fileInfo && fileInfo.length === 0) ? <Nodata _html="暂未发现文件"/> :""
                  } 
                  {/* readme文件显示(显示文件详情时不显示readme文件) */}
                  { dirInfo && (readme && readme.content) ? <ReadMe ChangeFile={ChangeFile} readme={readme} operate={props && (props.isManager || props.isDeveloper) && projectDetail.type !==2 } history={props.history} /> :"" }
                </div>
              </LongWidth>
              {
                !fileInfo && 
                <ShortWidth>
                  <Gap style={{paddingLeft:"30px"}}>
                    <div className="panelmenu">
                      <FlexAJ className="font-16 color-ooo mb10" style={{lineHeight:"22px"}}>关于
                        {projectDetail.permission && (projectDetail.permission==="Admin" || projectDetail.permission==="Owner") && 
                          <a className="color-grey-6" href="javascript:void(0)"><i onClick={()=>setOpenModal(true)} className="iconfont icon-a-shezhi font-15"></i></a>
                        }
                      </FlexAJ>
                      {desc && <p className="font-14 color-grey-3 mb15 task-hide-2" style={{lineHeight:"24px",WebkitLineClamp:"4",textAlign:"justify",wordBreak:"break-all"}}>{desc}</p>}
                      {
                        website &&
                        <div className="color-grey-6 df pinfos mb5">
                          <i className="iconfont icon-lianjie2 font-15 mr10"></i>
                          <a href={website} target="_blank" style={{wordBreak:"break-all",lineHeight:"20px",marginTop:"5px",textDecoration:"underline"}}>{website}</a>
                        </div>
                      }
                      <div className="pinfos mb5">
                        <i className="iconfont icon-zishuwenjian_icon font-15 mr10"></i>
                        <a href="#readme">README.md</a>
                      </div>
                      <div className="color-grey-6 mb5">
                        <i className="iconfont icon-neicunicon font-15 mr10"></i>
                        <span>{projectDetail && projectDetail.size}</span>
                      </div>
                      {
                        projectDetail && projectDetail.license_name &&
                        <div>
                          <i className="iconfont icon-xieyiicon font-16 mr10 color-grey-6"></i>
                          <span className="color-grey-6">{projectDetail.license_name}</span>
                        </div>
                      }
                    </div>
                    {
                      inviteCode && 
                      <div>
                        <Divider />
                        <Invite code={inviteCode}/>
                      </div>
                    }
                    {
                      lesson_url &&
                      <div>
                        <Divider />
                        <p className="font-16 color-ooo">实践课程</p>
                        <a href={lesson_url} target="_blank" className="color-grey-6" style={{textDecoration:"underline",wordBreak:"break-all"}}>{lesson_url}</a>
                      </div>
                    }
                    {/* 发布 */}
                    {
                      projectDetail && projectDetail.release_versions &&
                      <React.Fragment>
                        <Divider />
                        <Releases
                          owner={owner} 
                          projectsId={projectsId} 
                          releaseVersions={projectDetail.release_versions} 
                          history={props.history}
                          baseOperate={baseOperate}
                          projectType={projectDetail.type}
                        />
                      </React.Fragment>
                    }
                    {/* 贡献者 */}
                    {
                      projectDetail && projectDetail.contributors &&
                      <Contributors 
                        contributors={projectDetail && projectDetail.contributors} 
                        owner={owner} 
                        projectsId={projectsId} 
                        currentLogin={current_user && current_user.login}
                      />
                    }
                    {/* 语言 */}
                    { projectDetail && projectDetail.languages && 
                      <React.Fragment>
                        <Divider />
                        <LanguagePower languages={projectDetail.languages}/>
                      </React.Fragment>
                    }
                  </Gap>
                </ShortWidth>
              }
            </Box>
          }
        </div>
      </Spin>
    </WhiteBack>
  )
}
export default CoderDepot;