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

import React , { Component } from 'react';
import { Route , Switch } from 'react-router-dom';
import Top from './DetailTop';
import Loadable from 'react-loadable';
import Loading from '../../Loading';
import axios from 'axios';

const FileNew = Loadable({
  loader: () => import('../Newfile/Index'),
  loading: Loading,
})
const UploadFile = Loadable({
  loader: () => import('../Newfile/upload_file'),
  loading: Loading,
})
const CoderRootDirectory = Loadable({
	loader: () => import('./CoderRootDirectory'),
	loading: Loading,
})
const CoderRootCommit = Loadable({
	loader: () => import('./CoderRootCommit'),
	loading: Loading,
})
const CoderRootBranch = Loadable({
	loader: () => import('./CoderRootBranch'),
	loading: Loading,
})
const CoderRootTag = Loadable({
  loader: () => import('./CoderRootTag'),
  loading: Loading,
})
const CoderRootVersion = Loadable({
  loader: () => import('../Version/version'),
  loading: Loading,
})
const CoderRootVersionNew = Loadable({
  loader: () => import('../Version/New'),
  loading: Loading,
})
const CoderRootVersionUpdate = Loadable({
  loader: () => import('../Version/New'),
  loading: Loading,
})
const Diff =  Loadable({
  loader: () => import('./Diff'),
  loading: Loading,
})

class CoderRootIndex extends Component{
  constructor(props){
    super(props);
    this.state={
      coderCount:undefined
    }
  }

  componentDidMount=()=>{
    let { search } = this.props.history.location;
    let branchName = undefined;
    if (search && search.indexOf("?branch=") > -1) {
      branchName = search.split("?branch=")[1];
    }
    this.getTopCount(branchName);
  }

  getTopCount=(branch)=>{
    const { projectsId , owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/top_counts.json`;
    axios.get(url,{params:{
      ref:branch
    }}).then(result=>{
      if(result){
        this.setState({
          coderCount:result.data
        })
      }
    }).catch(error=>{console.log(error);})
  }
  render(){
    return(
      <div>
        <Top {...this.props} {...this.state}/>
        <Switch {...this.props}>
          {/* 新建文件 */}
          <Route path="/projects/:owner/:projectsId/coders/:branch/newfile/:path"
            render={
              (props) => (<FileNew {...this.props} {...props} {...this.state} />)
            }
          ></Route>
          <Route path="/projects/:owner/:projectsId/coders/:branch/uploadfile"
            render={
              (props) => (<UploadFile {...this.props} {...props} {...this.state} />)
            }
          ></Route>
          <Route path="/projects/:owner/:projectsId/coders/:branch/newfile"
            render={
              (props) => (<FileNew {...this.props} {...props} {...this.state} getTopCount={this.getTopCount} />)
            }
          ></Route>
          <Route path="/projects/:owner/:projectsId/coders/commits"
            render={
              () => (<CoderRootCommit {...this.props} {...this.state} commit_class="main" getTopCount={this.getTopCount}  />)
            }
          ></Route>
          {/* diff */}
          <Route path="/projects/:owner/:projectsId/diff/:sha"
            render={
              () => (<Diff {...this.props} {...this.state}/>)
            }
          ></Route>
          <Route path="/projects/:owner/:projectsId/coders/releases/new"
            render={
              () => (<CoderRootVersionNew {...this.props} {...this.state} />)
            }
          ></Route>

          <Route path="/projects/:owner/:projectsId/coders/releases/:versionId/update"
            render={
              (props) => (<CoderRootVersionUpdate {...this.props} {...this.state} {...props} />)
            }
          ></Route>

          <Route path="/projects/:owner/:projectsId/coders/releases"
            render={
              () => (<CoderRootVersion {...this.props} {...this.state} />)
            }
          ></Route>
          <Route path="/projects/:owner/:projectsId/coders/tag"
            render={
              () => (<CoderRootTag {...this.props} {...this.state} />)
            }
          ></Route>
          <Route path="/projects/:owner/:projectsId/coders/branch"
            render={
              () => (<CoderRootBranch {...this.props} {...this.state} />)
            }
          ></Route>
          <Route path="/projects/:owner/:projectsId/coders"
            render={
              () => (<CoderRootDirectory {...this.props} {...this.state} getTopCount={this.getTopCount} />)
            }
          ></Route>
          <Route path="/projects/:owner/:projectsId"
            render={
              () => (<CoderRootDirectory {...this.props} {...this.state} getTopCount={this.getTopCount} />)
            }
          ></Route>
        </Switch>
      </div>
    )
  }
}
export default CoderRootIndex;