fix home bug

public/react/src/App.js

@@ -110,7 +110,7 @@ const Newshixuns = Loadable({
 
 //实训首页
 const ShixunsHome = Loadable({
-	loader: () => import('./modules/home/shixunsHome'),
+	loader: () => import('./modules/home'),
 	loading: Loading,
 })
 

public/react/src/components/loading.jsx

@@ -1,5 +1,10 @@
 import React from 'react'
+import './loading.less'
 
 export default () => {
-  return <div className="loading">loading ...</div>
+  return <div className="loading-tip">
+    <p>
+      loading ...
+    </p>
+  </div>
 }

public/react/src/components/loading.less

@@ -0,0 +1,9 @@
+.loading-tip {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  background: #213857;
+  color: #fff;
+}

public/react/src/modules/home/index.jsx

@@ -1,10 +1,84 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, Fragment } from 'react'
+import axios from 'axios'
+import UpgradeModals from '../modals/UpgradeModals'
+import Loading from '../../components/loading'
+import ShixunCardList from '../../components/shixun-card-list'
+import TPMIndexHOC from '../tpm/TPMIndexHOC'
+import ListContainer from './list-container'
+import { SnackbarHOC, getImageUrl, configShareForIndex } from 'educoder'
+import ShixunPathCard from '../paths/ShixunPathCard'
 
-export default () => {
+function Home({ mygetHelmetapi }) {
 
-  return (
+  const [resource, setResource] = useState({
-    <div className="shixun-home">
+    loading: true,
+    data: {},
+    updata: null
+  })
+
+  useEffect(() => {
+    async function init() {
+      const sys = await axios.get('/users/system_update.json')
+      const home = await axios.get('/home/index.json')
+      setResource({
+        ...resource,
+        loading: false,
+        updata: sys.data,
+        data: home.data
+      })
+    }
+    try {
+      init()
+    } catch (error) {
+      console.log(error, '---in home init-----')
+    }
+
+  }, [])
+
+  let shixuntype = false
+  let pathstype = false
+  if (mygetHelmetapi) {
+    let shixun = "/shixuns";
+    let paths = "/paths";
+    mygetHelmetapi.navbar.map(item => {
+      var reg = RegExp(item.link)
+      if (shixun.match(reg)) {
+        if (item.hidden === true) {
+          shixuntype = true
+        }
+      }
+      if (paths.match(reg)) {
+        if (item.hidden === true) {
+          pathstype = true
+        }
+      }
+    })
+  }
+
+  const { loading, updata, data } = resource
+  const { shixuns, subjects } = data
 
+  return (
+    <Fragment>
+      {loading ? <Loading /> :
+        <div className="shixun-home newMain clearfix">
+          {updata ? <UpgradeModals updata={updata} /> : null}
+          {pathstype || subjects.length > 0 ?
+            <ListContainer to="/paths" title='实践课程' titleEn='TRAINING COURSE' >
+              <ShixunPathCard pathList={subjects} />
+            </ListContainer  >
+            : null}
+          {
+            (shixuntype || shixuns.length > 0) ?
+              <ListContainer to="/shixuns" title='实训项目' titleEn='DEVELOPMENT COMMUNITY' >
+                <ShixunCardList list={shixuns} />
+              </ListContainer  >
+              : null
+          }
         </div>
+      }
+    </Fragment>
   )
 }
+
+export default SnackbarHOC()(TPMIndexHOC(Home))

public/react/src/modules/home/list-container.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Link } from "react-router-dom"
+
+export default ({ children, title, titleEn, to }) => {
+  return (
+    <div className="clearfix pt20 educontent pr pb20 ">
+      <div className="edu-txt-center">
+        <p className="color-dark edu-txt-center font-24" style={{ lineHeight: '30px' }}>{title}</p>
+        <p className="color-grey-cd font-12">{titleEn}</p>
+      </div>
+      <Link to={to} className="moreitem mr18">更多<i className="fa fa-angle-right ml5"></i></Link>
+      <div className="square-list clearfix">
+        {children}
+      </div>
+    </div>
+  )
+}

public/react/src/modules/home/shixunsHome.js

@@ -303,7 +303,8 @@ class ShixunsHome extends Component {
                         </div>}
 
                         {/*精选实训 改为 开发社区*/}
-                        {shixuntype === true || homedatalist === undefined ? "" : homedatalist.shixuns.length === 0 ? "" : <div className="clearfix pt20 educontent pr pb20 mb20">
+                        {shixuntype === true || homedatalist === undefined ? "" : homedatalist.shixuns.length === 0 ? "" :
+                            <div className="clearfix pt20 educontent pr pb20 mb20">
                                 <div className="edu-txt-center">
                                     <p className="color-dark edu-txt-center font-24" style={{ lineHeight: '30px' }}>实训项目</p>
                                     <p className="color-grey-cd font-12">DEVELOPMENT COMMUNITY</p>

public/react/src/modules/modals/UpgradeModals.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
-import {getImageUrl} from 'educoder';
+import { Modal } from 'antd';
-import { Spin, Icon , Modal} from 'antd';
 import moment from 'moment';
 class UpgradeModals extends Component {
 	constructor(props) {
@@ -34,11 +33,6 @@ class UpgradeModals extends Component {
 		this.updatasmodals()
 	}
 
-	componentDidUpdate(prevProps){
-		// if (prevProps.data!=this.props.updata){
-		// 	this.updatasmodals()
-		// }
-	}
 
 	setmodalSave = () => {
 		let { updata } = this.props;
@@ -50,10 +44,7 @@ class UpgradeModals extends Component {
 
 
 	render() {
-    // const antIcons = <Icon type="loading" style={{ fontSize: 24 }} spin />
-	{/*<Spin indicator={antIcons} spinning={this.state.system_updates} >*/}
 
-	{/*</Spin>*/}
 		let { system_updates } = this.state;
 		let { updata } = this.props;
 		return (
@@ -61,7 +52,6 @@ render() {
 				keyboard={false}
 				title={updata && updata.subject}
 				visible={system_updates}
-          // visible={this.props.modalsType===undefined?false:this.props.modalsType}
 				closable={false}
 				footer={null}
 				destroyOnClose={true}

public/react/src/modules/paths/ShixunPathCard.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
-import {getImageUrl , setImagesUrl } from 'educoder';
+import { setImagesUrl } from 'educoder';
-import { BrowserRouter as Router, Route, Link } from "react-router-dom";
+import { Link } from "react-router-dom";
-import { Tooltip} from 'antd';
 import LoadingSpin from '../../common/LoadingSpin';
-
+import NodataPanel from '../../components/nodata-panel';
+import './ShixunPaths.css';
 
 class ShixunPathCard extends Component {
   constructor(props) {
@@ -21,51 +21,24 @@ class ShixunPathCard extends Component{
                 <div className="square-list clearfix">
                   {
                     pathList && pathList.map((item, key) => {
-
                       return (
-                    <div className="squareCard" id={"item_"+key}>
+                        <div className="squareCard" id={item.id} key={item.id}>
-                      {/* item.tag_name === null ? "" :
-                        <div className="tag-green">
-                          <span className="tag-name">{item.tag_name}</span>
-                          <img src={getImageUrl('images/educoder/tag2.png')}/>
-                        </div> */}
-
                           {
                             item.excellent === false ? "" :
                               <div className="tag_open">
                                 <span className="tag_open_name">开放课程</span>
                               </div>
                           }
-
-											{/* <div className={item.allow_visit=== false ? "closeSquare" : "none"}>
-                        <img src={getImageUrl("images/educoder/icon/lockclose.svg")}
-                            className="mt80 mb25"/>
-                        <p className="font-14 color-white">非试用内容，需要授权</p>
-                      </div> */}
-
                           <Link to={"/paths/" + item.id} className="squareImg" >
-												{/*target="_blank"*/}
                             <img alt="详情图片" src={setImagesUrl(item.image_url)} />
                           </Link>
                           <div className="mt20" style={{ marginLeft: "1px" }}>
                             <p className="task-hide mb10">
                               <Link to={"/paths/" + item.id} className="justify cardName">{item.name}</Link>
-													{/*target="_blank"*/}
                             </p>
                             <p className="clearfix squareInfo">
-
-                          {/* <Tooltip placement="bottom" title={"章节"}> */}
-                            {/* <i className="iconfont icon-shixun fl mr3"></i> */}
                               <span className="fl pr squareLine mr20">章节: {item.stages_count}</span>
-                          {/* </Tooltip> */}
-
-                          {/*<Tooltip placement="bottom" title={"经验值"}>*/}
-                              {/*<span className="mr10 fl squareIconSpan"><i className="iconfont icon-jingyan fl mr3"></i>{item.shixuns_count}</span>*/}
-                          {/*</Tooltip>*/}
-                          {/* <Tooltip placement="bottom" title={"学习人数"}> */}
-                            {/* <i className="iconfont icon-chengyuan fl mr3"></i> */}
                               <span className="fl">学习人数: {item.members_count}</span>
-                          {/* </Tooltip> */}
                             </p>
                           </div>
                         </div>
@@ -73,12 +46,7 @@ class ShixunPathCard extends Component{
                     })
                   }
                 </div>
-          ):(
+              ) : <NodataPanel />
-            <div className="edu-tab-con-box clearfix edu-txt-center mb50">
-              <img className="edu-nodata-img mb20" src={getImageUrl("images/educoder/nodata.png")}/>
-              <p className="edu-nodata-p mb20">暂时还没有相关数据哦！</p>
-            </div>
-          )
         }
 
       </div>

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

@@ -10,6 +10,7 @@ import './TPMIndex.css';
 import LoginDialog from '../login/LoginDialog';
 import AccountProfile from '../user/AccountProfile';
 import AccountPhoneemail from '../user/AccountPhoneemail';
+import Loading from '../../Loading';
 
 const $ = window.$;
 
@@ -638,12 +639,11 @@ export default function TPMIndexHOC(WrappedComponent) {
 							.newContainers{
 							  min-width: 1200px;
                 max-width: unset;
-                height: 100%;
+								margin: 0 auto;
-                min-height: 100%;
 								overflow: hidden;
+								position: realtive;
 							}
 							.newHeaders{
-							  // position: fixed;
 								max-width: unset;
 								background: #24292D !important;
 								width: 100%;
@@ -675,12 +675,10 @@ export default function TPMIndexHOC(WrappedComponent) {
 					}</style>
 
 
+					{this.state.globalLoading ? <Loading /> :
+						<React.Fragment>
 							<NewHeader {...this.state} {...this.props}></NewHeader>
-					<Spin spinning={this.state.globalLoading} delay={0} className="globalSpin"
+							<div className="newContainers">
-						size="large"
-						tip={this._gLoadingTip || "加载中..."}
-					>
-						<div className="newContainer newContainers">
 								<WrappedComponent initCommonState={(user) => this.initCommonState(user)}
 									{...this.props} {...this.state}
 									showShixun={this.showShixun} aboutFocus={this.aboutFocus}
@@ -689,13 +687,12 @@ export default function TPMIndexHOC(WrappedComponent) {
 								</WrappedComponent>
 
 							</div>
-
-					</Spin>
-
 							<NewFooter
 								{...this.state} {...this.props}
 								Footerdown={Footerdown}
 							/>
+						</React.Fragment>
+					}
 
 				</div>
 			);