forgeplus-react/src/forge/Main/Detail.js

import React, { Component } from 'react';
import { Spin, Tooltip } from 'antd';
import { Link, Route, Switch } from 'react-router-dom';
import { Content } from '../Component/layout';
import '../css/index.scss'
import './list.css';

import Loadable from 'react-loadable';
import Loading from '../../Loading';

import axios from 'axios';

const Setting = Loadable({
  loader: () => import('../Settings/Index'),
  loading: Loading,
})
const TagList = Loadable({
  loader: () => import('../Order/Tags'),
  loading: Loading,
})
const OrderNew = Loadable({
  loader: () => import('../Order/New'),
  loading: Loading,
})
const OrderDetail = Loadable({
  loader: () => import('../Order/Detail'),
  loading: Loading,
})
const OrderIndex = Loadable({
  loader: () => import('../Order/order'),
  loading: Loading,
})
const CoderRootIndex = Loadable({
  loader: () => import('./CoderRootIndex'),
  loading: Loading,
})
const OrderMilepost = Loadable({
  loader: () => import('../Order/Milepost'),
  loading: Loading,
})

const OrdernewMilepost = Loadable({
  loader: () => import('../Order/newMilepost'),
  loading: Loading,
})

const OrderupdateMilepost = Loadable({
  loader: () => import('../Order/UpdateMilepost'),
  loading: Loading,
})

const OrderupdateDetail = Loadable({
  loader: () => import('../Order/UpdateDetail'),
  loading: Loading,
})

const OrdercopyDetail = Loadable({
  loader: () => import('../Order/CopyDetail'),
  loading: Loading,
})

//合并请求
const MergeIndexDetail = Loadable({
  loader: () => import('../Merge/merge'),
  loading: Loading,
})

const CreateMerge = Loadable({
  loader: () => import('../Merge/NewMerge'),
  loading: Loading,
})

const MessageCount = Loadable({
  loader: () => import('../Merge/MessageCount'),
  loading: Loading,
})

const UpdateMerge = Loadable({
  loader: () => import('../Merge/UpdateMerge'),
  loading: Loading,
})

const MilepostDetail = Loadable({
  loader: () => import('../Order/MilepostDetail'),
  loading: Loading,
})
const WatchUsers = Loadable({
  loader: () => import('../UsersList/watch_users'),
  loading: Loading,
})
const PraiseUsers = Loadable({
  loader: () => import('../UsersList/praise_users'),
  loading: Loading,
})
const ForkUsers = Loadable({
  loader: () => import('../UsersList/fork_users'),
  loading: Loading,
})


const TrendsIndex = Loadable({
  loader: () => import('../Activity/Activity'),
  loading: Loading,
})

const DevAbout = Loadable({
  loader: () => import('../About/Index'),
  loading: Loading,
})
const DevIndex = Loadable({
  loader: () => import('../DevOps/Index'),
  loading: Loading,
})
/**
 * permission：Manager:管理员，Reporter：报告人员(只有读取权限)，Developer：开发人员（除不能设置仓库信息外）
 */
function checkPathname(projectsId,owner,pathname){
  let name = "";
  if(pathname && pathname !== `/projects/${owner}/${projectsId}`){
    if(pathname.indexOf("/about")>-1){
      name="about"
    }else if(pathname.indexOf("/issues")>-1 ||pathname.indexOf("Milepost") > 0){
      name = "issues";
    }else if(pathname.indexOf("/pulls")>-1){
      name="pulls"
    }else if(pathname.indexOf("/milestones")>-1){
      name="milestones"
    }else if(pathname.indexOf("/activity")>-1){
      name="activity"
    }else if(pathname.indexOf("/setting")>-1){
      name="setting"
    }else if(pathname.indexOf(`/devops`)>-1){
      name="devops"
    }
  }
  return name;
}
class Detail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      projectDetail: undefined,
      isManager: false,
      isReporter: false,
      isDeveloper: false,
      project_id: undefined,
      watchers_count: undefined,
      praises_count: undefined,
      forked_count: undefined,
      watched: false,
      praised: false,
      http_url: undefined,
      author: undefined,
      branchs: undefined,
      branchList: undefined,
      project: null,
      firstSync:false,
      secondSync:false,
      open_devops:false,
      // 默认分支
      defaultBranch:undefined,

      // 非本平台项目
      platform:false
    }
  }

  componentDidMount = () => {
    this.getProject();
  }

  componentDidUpdate = (prevState) => {
    let prevParam = prevState.match.params;
    let propsParam = this.props.match.params;
    if (prevState && this.props && (prevParam.projectsId !== propsParam.projectsId || prevParam.owner !== propsParam.owner)) {
      this.getProject();
    }
  }

  getProject = (num) => {
    const { projectsId , owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/simple.json`;
    axios.get(url).then((result) => {
      if (result && result.data) {
        this.setState({
          project: result.data,
          open_devops:result.data.open_devops,
          platform:result.data.platform && result.data.platform !== 'educoder'
        })

        if (result.data.type !== 0 && result.data.mirror_status === 1) {
          console.log("--------start channel --------");
          // 是镜像项目，且未完成迁移
          this.canvasChannel();
          if(num){
            this.setState({
              secondSync:true,
              firsrtSync:false
            })
          }else{
            this.setState({
              firstSync:true,
              secondSync:false
            })
          }
        }else{
          this.getDetail();
          this.setState({
            firsrtSync:false,
            secondSync:false
          })
        }
      }
    })
  }

  // 工作流激活后修改状态
  changeOpenDevops=(flag)=>{
    this.setState({
      open_devops:flag
    })
  }
  canvasChannel = () => {
    const name = window.location.hostname === "localhost" ? "testforgeplus.trustie.net" : window.location.hostname;
    const actioncable = require("actioncable");
    var project = this.state.project;
    var cable = actioncable.createConsumer(`wss://${name}/cable`);
    this.canvasChannel1 = cable.subscriptions.create({
      channel: `MirrorProjectChannel`,
      id: project && project.identifier
    }, {
      connected: () => {
        console.log("###### channel connected! ######");
      },
      disconnected: () => { },
      received: data => {
        console.log(`###### ---received data--- ######`);
        if (data) {
          this.getDetail();
          cable.subscriptions.consumer.disconnect();
        }
      }
    })
  }

  getDetail = () => {
    const { projectsId , owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}.json`;
    axios.get(url).then((result) => {
      if (result && result.data) {
        this.setState({
          projectDetail: result.data,
          project_id: result.data.project_id,
          isManager: result.data.permission && (result.data.permission === "Manager" || result.data.permission === "Admin" || result.data.permission === "Owner"),
          isReporter: result.data.permission && result.data.permission === "Reporter",
          isDeveloper: result.data.permission && result.data.permission === "Developer",
          http_url: result.data.clone_url,
          author: result.data.author,
          praised: result.data.praised,
          watched: result.data.watched,
          watchers_count: result.data.watchers_count,
          praises_count: result.data.praises_count,
          forked_count: result.data.forked_count,
          defaultBranch:result.data.default_branch
        })
      }
    }).catch((error) => { })
  }

  // 关注和取消关注
  focusFunc = (flag) => {
    const { platform } = this.state;
    if(!platform)return;

    const { project_id } = this.state;
    axios({
      method: flag ? 'delete' : 'post',
      url: `/watchers/${flag ? 'unfollow' : 'follow'}.json`,
      params: {
        target_type: "project",
        id: project_id
      }
    }).then(result => {
      if (result && result.data.status === 0) {
        this.setWatchersCount(result.data.watchers_count, result.data.watched);
      }
    })
    .catch(error => {
      console.log(error);
    });
  }

  // 点赞和取消点赞
  pariseFunc = (flag) => {
    const { platform } = this.state;
    if(!platform)return;
    const { project_id } = this.state;
    axios({
      method: flag ? 'delete' : 'post',
      url: `/projects/${project_id}/praise_tread/${flag ? 'unlike' : 'like'}.json`
    }).then(result => {
      if (result && result.data.status === 0) {
        this.setPraisesCount(result.data.praises_count, result.data.praised)
      }
    })
    .catch(error => {
      console.log(error);
    });
  }

  setWatchersCount = (count, is_watched) => {
    this.setState({
      watched: is_watched,
      watchers_count: count
    })
  }

  setPraisesCount = (count, is_praised) => {
    this.setState({
      praised: is_praised,
      praises_count: count
    })
  }

  // fork项目
  forkFunc = () => {
    const { platform } = this.state;
    if(!platform)return;
    const { current_user } = this.props
    const { projectsId , owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/forks.json`;
    axios.post(url).then(result => {
      if (result && result.data.status === 0) {
        this.props.history.push(`/projects/${current_user && current_user.login}/${result.data.identifier}`);
        this.props.showNotification(result.data.message);
      }
    }).catch(error => {
      console.log(error);
    })
  }

  // 同步镜像
  synchronismMirror = () => {
    const { platform } = this.state;
    if(!platform)return;
    const { projectsId , owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/sync_mirror.json`;
    axios.post(url).then(result => {
      if (result && result.data && result.data.status === 0) {
        this.getProject(2);
      } else {
        this.props.showNotification("镜像同步失败!");
      }
    }).catch(error => {
      console.log(error);
    })
  }

  

  render() {
    const { projectDetail, watchers_count, praises_count, 
      forked_count, firstSync , secondSync , 
      isManager, watched, praised, 
      project , open_devops , platform , defaultBranch } = this.state;
    const url = this.props.history.location.pathname;
    const urlArr = url.split("/");
    const urlFlag = (urlArr.length === 3);

    const { projectsId , owner } = this.props.match.params;
    let pathname = checkPathname(projectsId,owner,url);

    const { state } = this.props.history.location;
    
    const text = (
      projectDetail && projectDetail.forked_from_project_id && projectDetail.fork_info ?
        <React.Fragment>
          <span>forked from </span>
          <Link to={`/users/${projectDetail.fork_info.fork_project_user_login}`} className="show-user-link color-grey-ccc">{projectDetail.fork_info.fork_project_user_name}</Link>
          <span> / </span>
          <Link to={`/projects/${projectDetail.fork_info.fork_project_user_login}/${projectDetail.fork_info.fork_project_identifier}`} className="color-grey-ccc">{projectDetail.fork_info.fork_form_name}</Link>
        </React.Fragment> : ""
    );
    
    const common = {
      getDetail: this.getDetail,
      changeOpenDevops:this.changeOpenDevops,
      defaultBranch
    }
    return (
      <div>
        <div className="detailHeader-wrapper">
          <div className="normal">
            <div className="f-wrap-between pb15" style={{ position: "relative" }}>
              <p className="font-22 df flex-1 lineH2 mt15" style={{ alignItems: "center" }}>
                {project && project.author &&
                  <Link to={`${project.author.type ==="Organization" ? "/organize":'/users'}/${project.author.login}`} className="show-user-link">
                    {project.author.name}
                  </Link>
                }
                <span className="ml5 mr5">/</span>
                <span className="hide-1 flex-1 df">
                  <Link to={`/projects/${owner}/${projectsId}`} className="font-22">{project && project.name}</Link>
                  {
                    projectDetail && projectDetail.forked_from_project_id && projectDetail.fork_info ?
                      <Tooltip placement={'right'} title={text}>
                        <Link to={`/projects/${projectDetail.fork_info.fork_project_user_login}/${projectDetail.fork_info.fork_project_identifier}`}
                          className="ml10" >
                          <i className="iconfont icon-fork font-18 fl mt6" style={{ color: "#8D90E3" }}></i>
                        </Link>
                      </Tooltip> : ""
                  }
                  {
                    projectDetail && projectDetail.type && projectDetail.type !== 0 ? 
                    projectDetail.type === 2 ?
                    <Tooltip title={"镜像自: " + projectDetail.mirror_url} className="ml5" placement={'right'}>
                      <i className="iconfont icon-banbenku font-18 mt6" style={{ color: "#8D90E3" }}/>
                    </Tooltip>
                    :
                    <Tooltip title={"镜像自: " + projectDetail.mirror_url} className="ml5" placement={'right'}>
                      <i className="iconfont icon-jingxiang font-18 color-green mt6" />
                    </Tooltip>
                    :""
                  }
                </span>
              </p>
              {
                firstSync ? "":
                <span className="df mt25">
                  {
                    projectDetail && projectDetail.type && projectDetail.type === 2 ?
                      <a className="synchronism ml30" onClick={this.synchronismMirror}>同步镜像</a> : ""
                  }
                  <span className="detail_tag_btn">
                    <a className="detail_tag_btn_name" style={{cursor:platform?"pointer":"default"}} onClick={() => this.focusFunc(watched)}>
                      <i className={watched ? "iconfont icon-shixing color-orange font-16 mr3":"iconfont icon-kongxing color-grey-9 font-16 mr3"}></i>
                      <span>{watched ? '取消关注' : '关注'}</span>
                    </a>
                    {
                      watchers_count > 0 ?
                      platform ?
                      <Link className="detail_tag_btn_count" style={{color:`${watched?"#2878FF":"#666"}`}} to={platform?{ pathname: `/projects/${owner}/${projectsId}/watchers`, state }:""}>
                        {watchers_count}
                      </Link>
                      :
                      <span className="detail_tag_btn_count">{watchers_count}</span>
                      :""
                    }
                  </span>
                  <span className="detail_tag_btn">
                    <a className="detail_tag_btn_name" style={{cursor:platform?"pointer":"default"}} onClick={() => this.pariseFunc(praised)}>
                      <i className={praised ? "iconfont icon-weibiaoti105 color-orange font-14 mr3":"iconfont icon-guanzhu color-grey-9 font-14 mr3"}></i>
                      <span>{praised ? '取消点赞' : '点赞'}</span>
                    </a>
                    {
                      praises_count > 0 ?
                      platform ?
                      <Link className="detail_tag_btn_count" style={{color:`${praised?"#2878FF":"#666"}`}} to={{ pathname: `/projects/${owner}/${projectsId}/stargazers`, state }}>
                        {praises_count}
                      </Link>:
                      <span className="detail_tag_btn_count">{praises_count}</span>
                      :""
                    }
                  </span>
                  <span className="detail_tag_btn">
                    <a className="detail_tag_btn_name" style={{cursor:platform?"pointer":"default"}} onClick={this.forkFunc}>
                      <i className="iconfont icon-fork color-grey-9 mr3"></i>复刻 (Fork)
                    </a>
                    {
                      forked_count > 0 ?
                      platform ?
                      <Link className="detail_tag_btn_count" to={{ pathname: `/projects/${owner}/${projectsId}/fork_users`, state }}>
                        {forked_count}
                      </Link>
                      :
                      <span className="detail_tag_btn_count">{forked_count}</span>
                      :""
                    }
                  </span>
                </span>
              }
            </div>
            {
              firstSync ? "" :
              <div className="f-wrap-between mt15">
                <ul className="headerMenu-wrapper">
                  <li className={pathname==="about" ? "active" : ""}>
                    <Link to={{ pathname: `/projects/${owner}/${projectsId}/about`, state }}>
                      <i className={(pathname==="" || urlFlag) ? "iconfont icon-zhuye1 color-grey-3 mr5 font-14":"iconfont icon-zhuye1 color-grey-6 font-14 mr5"}></i>
                      <span>主页</span>
                      </Link>
                  </li>
                  <li className={(pathname==="" || urlFlag) ? "active" : ""}>
                    <Link to={{ pathname: `/projects/${owner}/${projectsId}`, state }}>
                      <i className={(pathname==="" || urlFlag) ? "iconfont icon-daimaku color-grey-3 mr5 font-14":"iconfont icon-daimaku color-grey-6 font-14 mr5"}></i>
                      <span>代码库</span>
                      </Link>
                  </li>
                  <li className={pathname==="issues" ? "active" : ""}>
                    <Link to={{ pathname: `/projects/${owner}/${projectsId}/issues`, state }}>
                      <i className={pathname==="issues" ? "iconfont icon-renwu color-grey-3 mr5 font-14":"iconfont icon-renwu color-grey-6 font-14 mr5"}></i>
                      <span>易修 (Issue)</span>
                      {projectDetail && projectDetail.issues_count ? <span className="num">{projectDetail.issues_count}</span> : ""}
                    </Link>
                  </li>
                  {
                    projectDetail && parseInt(projectDetail.type) !== 2 && platform &&
                    <li className={pathname==="pulls" ? "active" : ""}>
                      <Link to={{ pathname: `/projects/${owner}/${projectsId}/pulls`, state }}>
                        <i className={pathname==="pulls" ? "iconfont icon-hebingqingqiu1 color-grey-3 mr5 font-14":"iconfont icon-hebingqingqiu1 color-grey-6 font-14 mr5"}></i>
                        <span>合并请求</span>
                        {projectDetail && projectDetail.pull_requests_count ? <span className="num">{projectDetail.pull_requests_count}</span> : ""}
                      </Link>
                    </li>
                  }
                  {
                     platform &&
                     <li className={pathname==="devops" ? "active" : ""}>
                      <Link to={{ pathname: `/projects/${owner}/${projectsId}/devops${open_devops ? `/dispose`:""}`, state }}>
                        <i className="iconfont icon-gongzuoliu font-13 mr8"></i>工作流(beta版)
                        {projectDetail && projectDetail.ops_count ? <span>{projectDetail.ops_count}</span> : ""} 
                      </Link>
                    </li>
                  }
                  
                  <li className={pathname==="milestones" ? "active" : ""}>
                    <Link to={{ pathname: `/projects/${owner}/${projectsId}/milestones`, state }}>
                        <i className={pathname==="milestones" ? "iconfont icon-lichengbei color-grey-3 mr5 font-14":"iconfont icon-lichengbei color-grey-6 font-14 mr5"}></i>
                        <span>里程碑</span>
                        {projectDetail && projectDetail.versions_count ? <span className="num">{projectDetail.versions_count}</span> :""}
                    </Link>
                  </li>
                  <li className={pathname==="activity" ? "active" : ""}>
                    <Link to={{ pathname: `/projects/${owner}/${projectsId}/activity`, state }}>
                      <i className={pathname==="activity" ? "iconfont icon-tongzhi color-grey-3 mr5 font-14":"iconfont icon-tongzhi color-grey-6 font-14 mr5"}></i>
                      <span>动态</span>
                    </Link>
                  </li>
                  {
                    isManager && platform &&
                    <li className={url.indexOf("/setting") > 0 ? "active" : ""}>
                      <Link to={`/projects/${owner}/${projectsId}/setting`}>
                        <i className={url.indexOf("/setting") > 0 ? "iconfont icon-cangku color-grey-3 mr5 font-14":"iconfont icon-cangku color-grey-6 font-14 mr5"}></i>
                        <span>仓库设置</span>
                      </Link>
                    </li>
                  }
                </ul>
              </div>
            }
          </div>
        </div>
        {
          firstSync ?
          <Content className="spincontent">
            <Spin className="spinstyle" tip={project && `正在从 ${project.mirror_url} 迁移`} size="large">
            </Spin>
          </Content>
          :
          <Spin spinning={secondSync} className="spinstyle" tip="正在同步镜像" size="large">
            <Switch {...this.props}>
              {/* 主页 */}
              <Route path="/projects/:owner/:projectsId/about"
                render={
                  () => (<DevAbout {...this.props} {...this.state} {...common} />)
                }
              ></Route>
              {/* 工作流 */}
              <Route path="/projects/:owner/:projectsId/devops"
                render={
                  () => (<DevIndex {...this.props} {...this.state} {...common} />)
                }
              ></Route>
              {/* 标签列表 */}
              <Route path="/projects/:owner/:projectsId/issues/tags"
                render={
                  (props) => (<TagList {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>
              {/* 仓库设置 */}
              <Route path="/projects/:owner/:projectsId/setting"
                render={
                  (props) => (<Setting {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>
              {/* 任务详情 */}
              <Route path="/projects/:owner/:projectsId/issues/:orderId/detail"
                render={
                  (props) => (<OrderDetail {...this.props} {...this.state} {...props} {...common} />)
                }
              ></Route>
              {/*修改里程碑*/}
              <Route path="/projects/:owner/:projectsId/milestones/:meilid/edit"
                render={
                  (props) => (<OrderupdateMilepost {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>
              {/* 新建里程碑 */}
              <Route path="/projects/:owner/:projectsId/milestones/new"
                render={
                  (props) => (<OrdernewMilepost {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>
              {/*里程碑详情*/}
              <Route path="/projects/:owner/:projectsId/milestones/:meilid"
                render={
                  (props) => (<MilepostDetail {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>
              {/* 里程碑 */}
              <Route path="/projects/:owner/:projectsId/milestones"
                render={
                  (props) => (<OrderMilepost {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>
              {/* 里程碑页面新建任务 */}
              <Route path="/projects/:owner/:projectsId/issues/:milepostId/new"
                render={
                  (props) => (<OrderNew {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>
              {/* 新建任务 */}
              <Route path="/projects/:owner/:projectsId/issues/new"
                render={
                  (props) => (<OrderNew {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>
              {/* 修改详情 */}
              <Route path="/projects/:owner/:projectsId/issues/:orderId/updatedetail"
                render={
                  (props) => (<OrderupdateDetail  {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>
              {/* 复制详情 */}
              <Route path="/projects/:owner/:projectsId/issues/:orderId/copyetail"
                render={
                  (props) => (<OrdercopyDetail  {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>
              {/* 动态 */}
              <Route path="/projects/:owner/:projectsId/activity"
                render={
                  (props) => (<TrendsIndex {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>
              {/* 代码Index */}
              <Route path="/projects/:owner/:projectsId/issues"
                render={
                  (props) => (<OrderIndex {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>
              <Route path="/projects/:owner/:projectsId/pulls/new"
                render={
                  (props) => (<CreateMerge {...this.props} {...props} {...this.state} {...common} is_fork={true} />)
                }
              ></Route>
              <Route path="/projects/:owner/:projectsId/pulls/:mergeId/UpdateMerge"
                render={
                  (props) => (<UpdateMerge {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>
              <Route path="/projects/:owner/:projectsId/pulls/:mergeId/Messagecount"
                render={
                  (props) => (<MessageCount {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>
              <Route path="/projects/:owner/:projectsId/pulls/:mergeId/MergeSubmit"
                render={
                  (props) => (<MessageCount {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>

              <Route path="/projects/:owner/:projectsId/pulls"
                render={
                  (props) => (<MergeIndexDetail {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>
              <Route path="/projects/:owner/:projectsId/coders/filesurl"
                render={
                  (props) => (<CoderRootIndex {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>
              <Route path="/projects/:owner/:projectsId/watchers"
                render={
                  (props) => (<WatchUsers {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>
              <Route path="/projects/:owner/:projectsId/stargazers"
                render={
                  (props) => (<PraiseUsers {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>
              <Route path="/projects/:owner/:projectsId/fork_users"
                render={
                  (props) => (<ForkUsers {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>
              <Route path="/projects/:owner/:projectsId/commits/branch/:branchName"
                render={
                  (props) => (<CoderRootIndex {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>
              <Route path="/projects/:owner/:projectsId/branch/:branchName"
                render={
                  (props) => (<CoderRootIndex {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>
              <Route path="/projects/:owner/:projectsId"
                render={
                  (props) => (<CoderRootIndex {...this.props} {...props} {...this.state} {...common} />)
                }
              ></Route>
            </Switch>
          </Spin>
        }
      </div>
    )
  }
}

export default Detail;