educoder/public/react/src/modules/tpm/TPMIndexHOC.js

import React, { Component } from 'react';

import PropTypes from 'prop-types';

import NewHeader from './NewHeader'
import NewFooter from './NewFooter'
import SiderBar from './SiderBar'
import { getUrl, downloadFile } from 'educoder'
import axios from 'axios';
import { Spin } from 'antd'
import './TPMIndex.css'
import LoginDialog from '../login/LoginDialog';
import AccountProfile from '../user/AccountProfile';

import Trialapplication from "../login/Trialapplication";
// import "antd/dist/antd.css";
// import '../../css/educoder/edu-common.css'
// import '../../css/educoder/edu-all.css'
// import '../../css/educoder/edu-main.css'

const $ = window.$;
const versionNum = '0001';
// let _url_origin = getUrl()
let _url_origin='';
if(window.location.port === "3007"){
	_url_origin="http://pre-newweb.educoder.net";
}

// let _url_origin=`https://www.educoder.net`;

if (!window['indexHOCLoaded']) {
  window.indexHOCLoaded = true;
  //解决首屏加载问题
  
  // $('head').append($('<link rel="stylesheet" type="text/css" />')
  //     .attr('href', `${_url_origin}/stylesheets/educoder/antd.min.css?1525440977`));
  $('head').append($('<link rel="stylesheet" type="text/css" />')
      .attr('href', `${_url_origin}/stylesheets/css/edu-common.css?8`));

  $('head').append($('<link rel="stylesheet" type="text/css" />')
      .attr('href', `${_url_origin}/stylesheets/educoder/edu-main.css?8`));

  // index.html有加载
	$('head').append($('<link rel="stylesheet" type="text/css" />')
		.attr('href', `${_url_origin}/stylesheets/educoder/edu-all.css?8`));


  // $('head').append($('<link rel="stylesheet" type="text/css" />')
  //       .attr('href', `${_url_origin}/stylesheets/educoder/css_min_all.css?1525440977`));
  // 加timeout 为了覆盖掉antd的样式
  // setTimeout(() => {
  //   $('head').append( $('<link rel="stylesheet" type="text/css" />')
  //     .attr('href', `${_url_origin}/stylesheets/css/edu-common.css?1525440977`) );
      
  //   $('head').append( $('<link rel="stylesheet" type="text/css" />')
  //     .attr('href', `${_url_origin}/stylesheets/educoder/edu-all.css?1525440977`) );
  //   $('head').append( $('<link rel="stylesheet" type="text/css" />')
  //     .attr('href', `${_url_origin}/stylesheets/educoder/edu-main.css?1525440977`) );
  // }, 1000);

  $("script").append('<script></script>')
    .attr('src', `${_url_origin}/javascripts/jquery-1.8.3-ui-1.9.2-ujs-2.0.3.js?_t=${versionNum}`);
  
}
  // `${_url_origin}/javascripts/jquery-1.8.3-ui-1.9.2-ujs-2.0.3.js?_t=${versionNum}`
// TODO css加载完成后再打开页面，行为和tpm其他页面一致
export function TPMIndexHOC(WrappedComponent) {
	// 这里如果extends WrappedComponent 会出现 WrappedComponent mount twice的问题
  	return class II extends React.Component {
	    constructor(props) {
	      super(props)
        window.$('#root').css('position', 'relative')

	      this.state = {
            tpmLoading: true,
            resLoading: true,
            Headertop:undefined,
            Footerdown:undefined,
            coursedata: {},

            isRender: false,
            AccountProfiletype: false,

            slowDownloading: false
	      }
	    }

      // header里面需要有user
      initCommonState(user) {
        // 更新头像后，需要改变参数，不然会被图片缓存影响到
        const newUser = Object.assign({}, {...user}, { image_url: `${user.image_url}?t=${new Date().getTime()}`});
        this.setState({
          user: newUser,
          current_user: newUser
        })
      }
      showShixun = () => {
        const { shixunId } = this.props.match.params
        const url = `/api/v1/shixuns/${shixunId}/show_shixun`

        this.setState({ tpmLoading: true })
        axios.get(url,
            {
              withCredentials: true
            }
          ).then((response) => {
            if (response.data && response.data.shixun) {
              this.initCommonState(response.data.current_user)
              response.data.tpmLoading = false;
              this.setState(response.data);
            }

          }).catch((error) => {
            console.log(error)
          })
      }
      aboutFocus = () => {
        const { creator, watched } = this.state
        /*http://localhost:3000/api/v1/users/155/watch?object_id=156&object_type=user*/

        const focusUrl = `/api/v1/users/${creator.owner_id}/${watched ? 'unwatch' : 'watch'}?object_id=${creator.owner_id}&object_type=user`

        axios.get(focusUrl,{
        })
        .then((response) => {
            const status = response.data.status;
            if(status == 1){
                const new_author_info = Object.assign({}, creator)
                this.setState({
                  watched: !watched
                })
            }
        }).catch((error) => {
            console.log(error)
        })
      }

      keyupListener = (e) => {
        if (e.key === "Escape") {
          this.setState({ slowDownloading: false })
        }
      }
      componentWillUnmount() {
        window.removeEventListener('keyup', this.keyupListener)
      }
      
	    componentDidMount() {
        window.addEventListener('keyup', this.keyupListener)

	        if(this.props.match.path==="/"){
             document.title="创新源于实践";
            }else if(this.props.match.path==="/403"){
	        	 document.title="你没有权限访问";
            }else if(this.props.match.path==="/nopage"){
            document.title="没有找到该页面";
            }else if(this.props.match.path==="/shixuns"){
	        	 document.title="实训项目";
            }else if(this.props.match.path==="/paths"){
            document.title="实践课程";
            }else if(this.props.match.path==="/courses"){
            document.title="翻转课堂";
          }


        $.ajaxSetup({
	        cache: true
	      });
        this.fetchUser();

            let url=`/users/get_navigation_info.json`;
            axios.get(url, {

            }).then((response) => {
                  if(response!=undefined){
                    if(response.status===200){
                      this.setState({
                        Headertop:response.data.top,
                        Footerdown:response.data.down
                      })
                    }
                  }
                });

      }
      /**
        课堂权限相关方法，暂时写这里了 ----------------------------------------START 
        ADMIN = 0       # 超级管理员
        CREATOR = 1     # 课程创建者
        PROFESSOR = 2     # 课程老师
        ASSISTANT_PROFESSOR = 3  # 课程助教
        STUDENT = 4     # 学生
        NORMAL = 5      # 普通用户

        v2
        # 课程权限判断
        ADMIN = 0       # 超级管理员
        BUSINESS = 1    # 运营人员
        CREATOR = 2     # 课程创建者
        PROFESSOR = 3     # 课程老师
        ASSISTANT_PROFESSOR = 4  # 课程助教
        STUDENT = 5     # 学生
        NORMAL = 6      # 普通用户
        Anonymous = 7      # 普未登录
      */
      //超管
      isSuperAdmin = () => {
        // return false
        return this.state.coursedata&&this.state.coursedata.course_identity === 0
      }
			//  课堂管理等
			isClassManagement = () => {
				// return this.state.coursedata&&this.state.coursedata.course_identity >= 0 &&
				return  this.state.coursedata&&this.state.coursedata.course_identity < 2
			}
			//老师等
      isAdminOrCreator = () => {
        // return this.state.coursedata&&this.state.coursedata.course_identity >= 0 &&
        return  this.state.coursedata&&this.state.coursedata.course_identity < 3
      }
			//  助教等
      isAdminOrTeacher = () => {
        // return this.state.coursedata&&this.state.coursedata.course_identity >= 0 &&
        return this.state.coursedata&&this.state.coursedata.course_identity < 4
      }
      // 老师、管理员等
      isAdmin = () => {
        // return false
        // return this.state.coursedata&&this.state.coursedata.course_identity >= 0 &&
        return this.state.coursedata&&this.state.coursedata.course_identity < 5
      }
      // 学生
      isStudent = () => {
        // return true
        // return this.state.coursedata&&this.state.coursedata.course_identity >= 0 &&
        return this.state.coursedata&&this.state.coursedata.course_identity === 5
      }
      isAdminOrStudent = () => {
        // return this.state.coursedata&&this.state.coursedata.course_identity >= 0 &&
        return this.state.coursedata&&this.state.coursedata.course_identity <= 5
      }
      // 非课堂成员
      isNotMember = () => {
        // return this.state.coursedata&&this.state.coursedata.course_identity >= 0 &&
        return this.state.coursedata&&this.state.coursedata.course_identity >= 6
      }

      // setTrialapplication = ()=>{
      //     this.setState({
      //       isRenders:true
      //     })
      //
      // }


      /**
        课堂权限相关方法，暂时写这里了 ----------------------------------------END
      */
      fetchUser = () => {
        let url = `/users/get_user_info.json`
        let courseId;
        let query = this.props.location.pathname;
        const type = query.split('/');
        if (type[1] == 'courses' && type[2]) {
          courseId = parseInt(type[2])
          // url += `?course_id=${courseId}`
        }
        axios.get(url,{params:{
                course_id:isNaN(courseId)?undefined:courseId,
                school:1
            }
        },
            {
              // withCredentials: true
            }
          ).then((response) => {
            /*
              {
                  "username": "黄井泉",
                  "login": "Hjqreturn",
                  "user_id": 12,
                  "image_url": "avatar/User/12",
                  "admin": true,
                  "is_teacher": false,
                  "tidding_count": 0
              }
            */
            if(response=== undefined){
            	return
						}
            if (response.data) {
              this.initCommonState(response.data)
              this.setState({
                tpmLoading: false,
                coursedata: {
                  course_identity: response.data.course_identity >= 0 ? response.data.course_identity : undefined,
                  course_public: response.data.course_public,
                  name: response.data.course_name,
                  userid:response.data.user_id
                },

               })

            }

          }).catch((error) => {
            console.log(error)
          })
      }
      hideLoginDialog = () => {
        this.setState({
          isRender: false
        })
      }
      showLoginDialog = () => {
        this.setState({
          isRender: true
        })
      }
      
      checkIfLogin = () => {
        return this.state.current_user && this.state.current_user.login != ''
      }

      hideAccountProfile = () => {
        this.setState({
          AccountProfiletype: false
        })
      }
      showProfileCompleteDialog = () => {
        this.dialogObj = {}
        this.setState({
          AccountProfiletype: true
        })
      }
      checkIfProfileCompleted = () => {
        return this.state.current_user && this.state.current_user.profile_completed
      }
      showProfessionalCertificationDialog = () => {
        this.dialogObj = {
          content: '您需要去完成您的职业认证，才能使用此功能',
          okText: '立即完成',
          okHref: '/account/certification'
        }
        this.setState({
          AccountProfiletype: true,
        })
      }
      checkIfProfessionalCertification = () => {
        return this.state.current_user && this.state.current_user.professional_certification
      }
      

			ShowOnlinePdf = (url) => {
				return  axios({
										method:'get',
										url:url,
										responseType: 'arraybuffer',
									}).then((result)=>{
										var binaryData = [];
										binaryData.push(result.data);
										this.url =window.URL.createObjectURL(new Blob(binaryData, {type:"application/pdf"}));
										window.open(this.url);
									})
			}
			DownloadFileA=(title,url)=>{
				let link = document.createElement('a');
				document.body.appendChild(link);
				link.href =url;
				link.download = title;
				//兼容火狐浏览器
				let evt = document.createEvent("MouseEvents");
				evt.initEvent("click", false, false);
				link.dispatchEvent(evt);
				document.body.removeChild(link);
			}

			DownloadOpenPdf=(type,url)=>{
				type===true?window.open(url):window.location.href=url;
			}
      slowDownload = (url, tip) => {
        this._slowDownloadTip = tip || '正在生成文件，请稍后...';
        this.setState({ slowDownloading: true })
        const fileUrl = url;
        downloadFile({
          url: fileUrl,
          successCallback: (url) => {
            this.setState({ slowDownloading: false })
            console.log('successCallback')
          },
          failCallback: (responseHtml, url) => {
            this.setState({ slowDownloading: false })
            console.log('failCallback')
          }
        })
      }
	  	render() {
          let{Headertop,Footerdown, isRender, AccountProfiletype}=this.state;
          const common = {
            isSuperAdmin:this.isSuperAdmin,
            isAdminOrCreator:this.isAdminOrCreator,
						isClassManagement:this.isClassManagement,
            isAdmin: this.isAdmin,
            isAdminOrTeacher: this.isAdminOrTeacher,
            isStudent: this.isStudent,
            isAdminOrStudent: this.isAdminOrStudent,
            isNotMember: this.isNotMember,
            isUserid:this.state.coursedata&&this.state.coursedata.userid,
            fetchUser: this.fetchUser,

            showLoginDialog: this.showLoginDialog,
            checkIfLogin: this.checkIfLogin,
            showProfileCompleteDialog: this.showProfileCompleteDialog,
            checkIfProfileCompleted: this.checkIfProfileCompleted,
            checkIfProfessionalCertification: this.checkIfProfessionalCertification,
            showProfessionalCertificationDialog: this.showProfessionalCertificationDialog,
            
						ShowOnlinePdf:(url)=>this.ShowOnlinePdf(url),
						DownloadFileA:(title,url)=>this.DownloadFileA(title,url),
						DownloadOpenPdf:(type,url)=>this.DownloadOpenPdf(type,url),

            slowDownload: this.slowDownload
          }
		    return (
		    	<div className="indexHOC">
            {isRender===true ? <LoginDialog
              Modifyloginvalue={()=>this.hideLoginDialog()}
              {...this.props}
              {...this.state}
            /> : ""}
            {/* AccountProfile 也用作职业认证 */}
            {AccountProfiletype===true ? <AccountProfile
              hideAccountProfile={()=>this.hideAccountProfile()}
              {...this.props}
              {...this.state}
              {...this.dialogObj}
            />:""}
            <SiderBar Headertop={Headertop}/>
            {/* 注释掉了1440 影响到了手机屏幕的展示 */}
						<style>{
							`
							.newContainers{
							  min-width: 1200px;
								max-width: unset;
								overflow: hidden;
							}
							.newHeaders{
							  // position: fixed;
								max-width: unset;
								background: #24292D !important;
								width: 100%;
								height: 60px !important;
								min-width: 1200px;
								z-index: 1000;
								-moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.1);
								box-shadow: 0px 0px 12px rgba(0,0,0,0.1);
							}

              .globalSpin {

              }
              .indexHOC > .ant-spin-nested-loading {
                background: #000;
              }

              .globalSpin .ant-spin-text {
                text-shadow: none !important;
                color: #fff;
              }
              .globalSpin .ant-spin-dot-item {
                background-color: #fff;
              }
							`
						}</style>
            <Spin spinning={this.state.slowDownloading} delay={0} className="globalSpin"
              size="large"
              tip= {this._slowDownloadTip || "加载中..."}
            >

						<NewHeader {...this.state} {...this.props}></NewHeader>
						<div className="newContainer newContainers">
								<WrappedComponent initCommonState={(user)=>this.initCommonState(user)}
									{...this.props} {...this.state}
									showShixun={this.showShixun} aboutFocus={this.aboutFocus}
									{...common}
								>
							</WrappedComponent>

						</div>


						<NewFooter
								Footerdown={Footerdown}
						/>
            </Spin>
		        </div>
		    );
	  	}
	}
}