import React, { Component } from "react" import VList from '@/common/v-list-base' import './my-courses.scss' import { isToday, format } from "date-fns" import { connect } from "react-redux" import { fetchCoursesListIfNeeded, switchTab } from "./actions" import InfiniteScroll from 'react-infinite-scroller' import { debounce } from 'lodash' import { Link } from 'react-router-dom' import { Loading } from "@/common"; function getStudyTime(seconds) { return { hour: Math.floor(seconds / (60 * 60)), min: Math.floor(seconds / 60) % 60, sec: seconds % 60 } } const AddCourse = React.memo(({addCourseClick}) => ( <div className='add-course'> <button className='add' onClick={addCourseClick}>添加课程+</button> </div> )) function Record({record: {seconds, lesson_name}}) { let re = /第[\s\S]+?课/, result = '' if (lesson_name) { let matchResult = re.exec(lesson_name) result += (matchResult && matchResult[0]) ? matchResult[0] : '' } if (seconds) { let studyTime = getStudyTime(seconds) let hour = studyTime.hour ? String(studyTime.hour).padStart(2, '0') + ':' : '', min = studyTime.min ? String(studyTime.min).padStart(2, '0') + ':' : '', sec = studyTime.sec ? String(studyTime.sec).padStart(2, '0') : '' result += hour + min + sec } return ( <span className={'record'}> { result.length ? `学习到${result}` : null } </span> ) } const Bottom = React.memo(({item}) => { if (item.ago || item.seconds) { let date = new Date(item.ago * 1000) let time = isToday(date) ? format(date, 'HH时mm分') : format(date, 'MM月DD日') return ( <div className="des"> <span className='time'>{time}</span> <Record record={item}/> </div> ) } return ( <button className='start-learn'>开始学习</button> ) }) class MyCourses extends Component { list state = { isLoading: true } handleClick = (id, item) => { const {history} = this.props const {mode, course_id} = item if (mode && mode == 6) { history.push(`/python?id=${course_id}`) return } history.push(`/play/video?id=${id}`) } addCourseClick = () => { this.props.history.push('/classify') } componentDidMount() { this.props.switchTab(false) this.props.fetchCoursesListIfNeeded() } componentWillUnmount() { this.props.switchTab(true); } loadFunc = debounce(() => { if (this.props.courseList.length % 10 === 0) { this.props.fetchCoursesListIfNeeded() } }, 200) render() { let {courseList, user} = this.props return <Loading isLoading={this.props.isLoading}> { courseList && courseList.length !== 0 ? <> <div className="my-course-uid"> {`加群请备注您的学号:${!user.hasError && this.props.user.data.uid}`} </div> <InfiniteScroll pageStart={0} hasMore={true} loadMore={this.loadFunc} useWindow={false} > <ul ref={el => this.list = el}> { courseList.map((item, index) => { const Info = ( <div className="info"> <div className='title'>{item.course_title}</div> { !item.is_restricted && item.is_aist && <div className='contact'>助教微信:{item.assist_weixin}</div> } { !item.is_restricted && !item.is_aist && item.contact_type == 1 && item.course_qq && <div className='contact'>QQ群:{item.course_qq}</div> } { !item.is_restricted && !item.is_aist && item.contact_type == 2 && item.course_qq && <div className='contact'>班主任微信:{item.course_qq}</div> } { item.is_aist && item.aist_schedule && <div className="process-status"> <div className="process-wrapper"> <div className="process-bar" style={{width: `${parseFloat(item.aist_schedule)}%`}}/> </div> <div className="process-text">{item.aist_schedule}</div> </div> } <Bottom item={item}/> </div> ) const status = ( item.is_aist ? <span className='status'>返现</span> : item.course_expire ? <span className='course-expire'>{item.course_expire}</span> : null ) return ( <VList img={item.image_name} handleClick={this.handleClick} {...item} key={index} info={Info} status={status} item={item} id={item['v_course_id']} /> ) }) } </ul> </InfiniteScroll> { courseList.length % 10 !== 0 ? <AddCourse addCourseClick={this.addCourseClick}/> : null } </> : <div className="empty"> <p><i className='iconfont iconfish'/></p> <p className='empty-prompt'>您还没有课程哦,赶快去选课吧~</p> <p> <Link className='select-course' to='/classify'>去选课</Link> </p> </div> } </Loading> } } export default connect( state => ({ courseList: state.myCourses.courseList, user: state.user, isLoading: state.myCourses.isLoading }), { fetchCoursesListIfNeeded, switchTab })(MyCourses)