forgeplus-react/src/modules/tpm/TPMRepositoryComponent.js

import React, { Component } from 'react';
import { Redirect } from 'react-router';

import PropTypes from 'prop-types';

import TPMRepository from './TPMRepository'

import axios from 'axios';

import { trace_collapse, info } from 'educoder'

import RepositoryCodeEditor from './shixunchild/Repository/RepositoryCodeEditor'


class TPMRepositoryComponent extends Component {
    constructor(props) {
      super(props)
      this.nameTypeMap = {}
      let pathArray = []
      var splitArray = window.location.pathname.split('shixun_show/');
      if (splitArray[1]) {
        // pathArray = splitArray[1].split('/')
        pathArray = decodeURIComponent(splitArray[1]).split('/')
        if (pathArray[pathArray.length - 1] == '') {
          // 有可能是这么访问的： http://localhost:3007/shixuns/3ozvy5f8/repository/fsu7tkaw/master/shixun_show/src/
          pathArray.length = pathArray.length - 1;
        }
      }
      this.state = {
        listItemtypes:false,
        repositoryLoading: true,
        pathArray: pathArray,
        isContentWidth100: this._isFileInPathArray(pathArray)
      }
      this.props.setpathArray(pathArray)
    }
    componentDidUpdate(prevProps, prevState) {
      if (this.props.secret_repository_tab != prevProps.secret_repository_tab) {
        this.setState({
          listItemtypes:false,
        })
        this.fetchRepo(0)
      }
    }


    componentDidMount = () => {
      this.fetchRepo()
    }
    setContentWidth100 = (flag) => {
      const newFileContent = flag === false ? '' : this.state.fileContent
      this.setState({
        // isCodeFile
        isContentWidth100: flag,
        fileContent: newFileContent
      })
    }
    saveCode = (content) => {
      const path = this.state.pathArray.join('/')
      let id = this.props.match.params.shixunId;
      let url = `/shixuns/${id}/update_file.json`;
      axios.post(url, {
        path: path,
        content
      }).then((response) => {
          if(response.status === 200){
              this.setState({
                fileContent: response.data.content,
                repositoryLoading: false
            });
          }
          trace_collapse('tpm save code res: ', response)
          this.props.showNotification('文件保存成功')

        }).catch((error)=>{
          console.log(error)
        });
    }
    fetchCode = (newPathArray) =>{

      const path = newPathArray.join('/')

      // https://testeduplus2.educoder.net/shixuns/3ozvy5f8/file_content.json
      this.setContentWidth100(true)
      //
      let id = this.props.match.params.shixunId;
      let url = `/shixuns/${id}/file_content.json`;
      axios.post(url, {
        path: path,
        secret_repository: this.props.secret_repository_tab===false?undefined:this.props.secret_repository_tab
      }).then((response) => {
        trace_collapse('repository res: ', response)

        if (response.data.status == -1) {
          //this.props.showNotification('无法找到对应的资源，请变更地址或联系管理员！')
          return;
        }

        if (response.data.status == -2) {

          this.props.showNotification(response.data.message)
          return;
        }

        if(response.status === 200){
          this.setState({
            listItemtypes:true
          })

            this.setState({ repositoryLoading: true, pathArray: newPathArray })
          this.props.setpathArray(newPathArray)
            this.setState({
              fileContent: response.data.content,
              repositoryLoading: false
            });

            if(response.data.content){
              this.props.history
                .replace(`/shixuns/${id}/${this.props.secret_repository_tab ? 'secret_repository' : 'repository'}` +
                  (newPathArray.length ? `/master/shixun_show/${newPathArray.join('/')}` : ''))
              // this.props.history.replace(`${this.props.match.url}/master/shixun_show/${newPathArray.join('/')}`)
            }
        }

      }).catch((error)=>{
       // this.props.showNotification('无法找到对应的资源，请变更地址或联系管理员！')
        console.log(error)
      });
    }
    _isFileName = (name) => {
      return name.indexOf('.') !== -1
    }
    _isFileInPathArray = (array) => {
      if (!array || array.length === 0) {
        return false
      }
      return this.nameTypeMap[array[array.length - 1]] !== 'tree' &&  this._isFileName( array[array.length - 1] )
    }
    // listItem 如果是num，则是通过面包屑点击过来的，取pathArray的子集
    fetchRepo = (listItem,type) => {
      // if(listItem === "main"||listItem){
      //   this.props.history.replace(`/shixuns/${this.props.match.params.shixunId}/repository`)
      //   return;
      // }
      const { pathArray } = this.state;
      let newPathArray = pathArray.slice(0)

      if (listItem === 0 || listItem) {

        this.setContentWidth100(false)
        this.nameTypeMap[listItem.name] = listItem.type
        if (typeof listItem == 'number') {  // 参数是数字的话，做截取
          // if (this._isFileName(newPathArray[listItem])) { // 面包屑中的文件不让点击了
          //   listItem--;
          // }
          this.setState({
            listItemtypes:false
          })
          newPathArray = newPathArray.slice(0, listItem)
        } else if (listItem.type === 'tree') {
          this.setState({
            listItemtypes:false
          })
          newPathArray.push(listItem.name)
        } else if (listItem.type === 'blob') {

          newPathArray.push(listItem.name)
          // this.setState({ pathArray: newPathArray })
          this.fetchCode(newPathArray)
          return;
        }
      }else{
        this.setState({
          listItemtypes:false
        })
      }

      // https://testeduplus2.educoder.net/shixuns/3ozvy5f8/repository.json
      this.setState({ repositoryLoading: true, pathArray: newPathArray })
      this.props.setpathArray(newPathArray)
      let urlNewPathArray = newPathArray;
      let fileInPathArray = false;


      if (newPathArray.length&&!type&&typeof listItem != 'number') {


        fileInPathArray = this.nameTypeMap[newPathArray[newPathArray.length - 1]] ? this.nameTypeMap[newPathArray[newPathArray.length - 1]] !== 'tree'
            : (listItem ? listItem.type !== 'tree' : this._isFileName( newPathArray[newPathArray.length - 1] ))

        if ( fileInPathArray ) {
          urlNewPathArray = newPathArray.slice(0, newPathArray.length - 1)
        }
      }
      const path = urlNewPathArray.join('/')

      let id = this.props.match.params.shixunId;
      let url = `/shixuns/${id}/${this.props.secret_repository_tab ? 'secret_repository' : 'repository'}.json`;

      // this.props.setLoadingContent(true)
      axios.post(url, {
        path: path ? path : ''
      }).then((response) => {

        // this.props.setLoadingContent(false)

        const trees = response.data.trees
        const treeIsFileMap = {}
        if (!trees || !Array.isArray(trees)) {
          // this.props.showNotification('无法找到对应的资源，请变更地址或联系管理员！')
            // return;
        } else {
          trees.forEach(item => {
            treeIsFileMap[item.name] = item.type == 'blob'
          })
        }
        if(response.status === 200){
          this.setState({

              treeIsFileMap,
              ...response.data,
              repositoryLoading: false
          });
          this.props.history
            .replace(`/shixuns/${id}/${this.props.secret_repository_tab ? 'secret_repository' : 'repository'}` +
              (newPathArray.length ? `/master/shixun_show/${newPathArray.join('/')}` : ''))

        }

        // 初始化时，repo接口完毕后需要看是否需要fetchCode

        if (fileInPathArray&&!type) {
          //
          this.fetchCode(newPathArray)
        }
        // info(response)
        trace_collapse('repository res: ', response)

      }).catch((error)=>{
        console.log(error)
      });
    }

    oncodechanner=(sum)=>{
      this.fetchRepo(sum,true)
    }
    render() {
      const { listItemtypes } = this.state;
      return (
        <React.Fragment>
          { listItemtypes===false? <TPMRepository
              {...this.props}
              {...this.state}
              nameTypeMap={this.nameTypeMap}
              fetchRepo={this.fetchRepo}
							is_jupyter={this.props.is_jupyter}
              listItemtypes={listItemtypes}
          >
          </TPMRepository>
          :  <div>
              {/* 可能会影响到其他页面的样式，需要测试、协商 */}
              <div>
                <RepositoryCodeEditor
                  {...this.state}
                  {...this.props}
                  fetchRepo={this.fetchRepo}
                  saveCode={this.saveCode}
                  nameTypeMap={this.nameTypeMap}
                  oncodechanner={(sum)=>this.oncodechanner(sum)}
                ></RepositoryCodeEditor>
              </div>
            </div>
          }

        </React.Fragment>


      );
    }
}

export default  TPMRepositoryComponent ;