index.js 4.79 KB
Newer Older
zhanghaozhe committed
1
import React, { PureComponent } from "react"
zhanghaozhe committed
2
import { VList } from '@/common'
zhanghaozhe committed
3
import './my-courses.scss'
zhanghaozhe committed
4 5
import { isToday, format } from "date-fns"
import { connect } from "react-redux"
zhanghaozhe committed
6
import { fetchCoursesListIfNeeded, switchTab } from "./actions"
zhanghaozhe committed
7
import InfiniteScroll from 'react-infinite-scroller'
zhanghaozhe committed
8
import { debounce } from 'lodash'
zhanghaozhe committed
9
import { Link } from 'react-router-dom'
zhanghaozhe committed
10

zhanghaozhe committed
11 12 13 14 15 16 17 18 19

function getStudyTime(seconds) {
    return {
        hour: Math.floor(seconds / (60 * 60)),
        min: Math.floor(seconds / 60) % 60,
        sec: seconds % 60
    }
}

zhanghaozhe committed
20 21 22 23 24
const AddCourse = React.memo(({addCourseClick}) => (
    <div className='add-course'>
        <button className='add' onClick={addCourseClick}>添加课程+</button>
    </div>
))
zhanghaozhe committed
25

zhanghaozhe committed
26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
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>
    )
}

zhanghaozhe committed
53

zhanghaozhe committed
54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
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>
    )
})
zhanghaozhe committed
69

zhanghaozhe committed
70 71
class MyCourses extends PureComponent {

zhanghaozhe committed
72 73
    list;

zhanghaozhe committed
74
    handleClick = () => {
75 76
        console.log(1);
    }
zhanghaozhe committed
77
    addCourseClick = () => {
zhanghaozhe committed
78 79
        console.log(2);
    }
zhanghaozhe committed
80

zhanghaozhe committed
81
    componentDidMount() {
zhanghaozhe committed
82
        this.props.switchTab(false)
zhanghaozhe committed
83 84
        this.props.fetchCoursesListIfNeeded();
    }
zhanghaozhe committed
85 86 87 88 89

    componentWillUnmount(){
        this.props.switchTab(true);
    }

zhanghaozhe committed
90
    loadFunc = debounce(() => {
zhanghaozhe committed
91
        if (this.props.courseList.length % 10 === 0) {
zhanghaozhe committed
92 93 94 95
            this.props.fetchCoursesListIfNeeded();
        }
    }, 200)

zhanghaozhe committed
96
    render() {
zhanghaozhe committed
97 98
        let list = this.props.courseList
        if (list && list.length !== 0) {
zhanghaozhe committed
99 100
            return (
                <>
zhanghaozhe committed
101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128
                    <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>
zhanghaozhe committed
129
                    {
zhanghaozhe committed
130
                        list.length % 10 !== 0 ?
zhanghaozhe committed
131 132 133
                            <AddCourse addCourseClick={this.addCourseClick}/>
                            : null
                    }
zhanghaozhe committed
134 135 136 137 138
                </>
            )
        } else {
            return (
                <div className="empty">
zhanghaozhe committed
139
                    <p><i className='iconfont iconfish'/></p>
zhanghaozhe committed
140 141
                    <p className='empty-prompt'>还是咸鱼一条,快去翻身~</p>
                    <p>
zhanghaozhe committed
142
                        <Link className='select-course' to='/classify'>去选课</Link>
zhanghaozhe committed
143 144 145 146 147 148
                    </p>
                </div>
            )
        }

    }
zhanghaozhe committed
149 150 151
}

const mapStateToProps = state => ({
zhanghaozhe committed
152
    courseList: state.myCourses.courseList
zhanghaozhe committed
153 154
})

zhanghaozhe committed
155 156
const mapDispatchToProps = {
    fetchCoursesListIfNeeded,
zhanghaozhe committed
157
    switchTab
zhanghaozhe committed
158
}
zhanghaozhe committed
159

zhanghaozhe committed
160
export default connect(mapStateToProps, mapDispatchToProps)(MyCourses)