index.js

import React, { PureComponent } from "react"
import { VList } from '@/common'
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'


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 PureComponent {

    list;

    handleClick = () => {
        console.log(1);
    }
    addCourseClick = () => {
        console.log(2);
    }

    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 list = this.props.courseList
        if (list && list.length !== 0) {
            return (
                <>
                    <InfiniteScroll
                        pageStart={0}
                        hasMore={true}
                        loadMore={this.loadFunc}
                        useWindow={false}
                    >
                        <ul ref={el => this.list = el}>
                            {
                                list.map((item, index) => {

                                    const Info = (
                                        <div className="info">
                                            <p className='title'>{item.course_title}</p>
                                            <p className='contact'>QQ群：{item.course_qq || 449141326}</p>
                                            <Bottom item={item}/>
                                        </div>
                                    )
                                    return (
                                        <VList img={item.image_name}
                                               handleClick={this.handleClick}
                                               {...item}
                                               key={index}
                                               info={Info}/>
                                    )
                                })
                            }
                        </ul>
                    </InfiniteScroll>
                    {
                        list.length % 10 !== 0 ?
                            <AddCourse addCourseClick={this.addCourseClick}/>
                            : null
                    }
                </>
            )
        } else {
            return (
                <div className="empty">
                    <p><i className='iconfont iconfish'/></p>
                    <p className='empty-prompt'>还是咸鱼一条，快去翻身~</p>
                    <p>
                        <Link className='select-course' to='/classify'>去选课</Link>
                    </p>
                </div>
            )
        }

    }
}

const mapStateToProps = state => ({
    courseList: state.myCourses.courseList
})

const mapDispatchToProps = {
    fetchCoursesListIfNeeded,
    switchTab
}

export default connect(mapStateToProps, mapDispatchToProps)(MyCourses)