study redux

.eslintignore

+src/
\ No newline at end of file

package-lock.json

@@ -4046,6 +4046,11 @@
         }
       }
     },
+    "date-fns": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
+      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
+    },
     "date-now": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",

package.json

@@ -17,6 +17,7 @@
     "bfj": "6.1.1",
     "case-sensitive-paths-webpack-plugin": "2.2.0",
     "css-loader": "1.0.0",
+    "date-fns": "^1.30.1",
     "dotenv": "6.0.0",
     "dotenv-expand": "4.2.0",
     "eslint": "5.12.0",

src/common/VList/index.js

@@ -7,7 +7,7 @@ const VList = (props) => {
             <div className="content">
                 <div className="cover" onClick={props.handleClick}>
                     {props.status}
-                    <img src='https://julyedu-img-public.oss-cn-beijing.aliyuncs.com/Public/Image/4c5ccac604.jpg' alt=""/>
+                    <img src={props.img} alt=""/>
                 </div>
                 {props.info}
             </div>

src/common/VList/index.scss

@@ -9,7 +9,7 @@
         border-bottom: 1px solid $sp_e7eaf1;
 
         .cover {
-            flex: 1 0 auto;
+            flex: 0 0 auto;
             margin-right: 16px;
             position: relative;
             img {

src/components/study/freeCourses/index.js

@@ -16,10 +16,12 @@ class FreeCourse extends PureComponent {
     state = {
         courses: [],
         live: [],
+        page: 1,
+        num: 10
     }
 
-    async componentDidMount() {
-        api.get('/m/free_course/1/10')
+    componentDidMount() {
+        this.getFreeCourses()
             .then(res => {
                 if (res.data.code == 200) {
                     this.setState({
@@ -29,9 +31,9 @@ class FreeCourse extends PureComponent {
                     console.log(res.data.msg)
                 }
             })
-        api.get('/m/live/free_list')
+        this.getFreeLive()
             .then(res => {
-                if(res.data.code == 200){
+                if (res.data.code == 200) {
                     this.setState({
                         live: res.data.data
                     })
@@ -39,6 +41,14 @@ class FreeCourse extends PureComponent {
             })
     }
 
+    getFreeCourses = () => {
+        return api.get(`/m/free_course/${this.state.page}/${this.state.num}`)
+    }
+
+    getFreeLive = () => {
+        return api.get(`/m/live/free_list`)
+    }
+
     render() {
         return (
             <ul className='free-courses'>
@@ -49,9 +59,6 @@ class FreeCourse extends PureComponent {
                                 src: item.logo,
                                 title: item.video_course_name
                             }}
-                            top={
-                                <Tag className={'tag-starting top'}>即将开始</Tag>
-                            }
                             bottom={
                                 <Bottom audience={item.lessons} className={'tag-category'} text={item.category}/>
                             }
@@ -60,12 +67,12 @@ class FreeCourse extends PureComponent {
                         </Course>
                     ))
                 }
-                {
-                    /*this.state.live.map((item,index) => (
+                {/*{
+                    this.state.live.map((item,index) => (
                         <Course
                             data={{
-                                src: item.logo,
-                                title: item.video_course_name
+                                src: item.live_img,
+                                title: item.live_title
                             }}
                             top={
                                 <Tag className={'tag-starting top'}>即将开始</Tag>
@@ -73,13 +80,14 @@ class FreeCourse extends PureComponent {
                             bottom={
                                 <Bottom audience={item.lessons} className={'tag-category'} text={item.category}/>
                             }
-                            key={index}
+                            key={item.live_id}
                         />
-                    ))*/
-                }
+                    ))
+                }*/}
             </ul>
         )
     }
 }
 
+
 export default FreeCourse
\ No newline at end of file

src/components/study/myCourses/actions.js

+import { api } from '@/utils'
+
+export const RECEIVE_MY_COURSES = 'RECEIVE_MY_COURSES'
+export const receiveMyCourses = payload => ({
+    type: RECEIVE_MY_COURSES,
+    payload
+})
+
+
+export const getMyCourses = payload => dispatch => {
+    return api.get(`/m/my_course/${payload.page}/${payload.num}`)
+        .then(res => {
+            dispatch(receiveMyCourses(res.data))
+        })
+}
+
+const fetchCoursesListIfNeeded = payload => {
+
+}

src/components/study/myCourses/index.js

@@ -2,6 +2,10 @@ import React, { PureComponent } from "react"
 import { VList } from '../../../common'
 import './my-courses.scss'
 import { api } from '@/utils'
+import { isToday, format } from "date-fns"
+import { connect } from "react-redux"
+import { getMyCourses } from "./actions"
+
 
 const mockData = [
     {
@@ -42,6 +46,15 @@ const mockData = [
 ]
 
 
+function getStudyTime(seconds) {
+    return {
+        hour: Math.floor(seconds / (60 * 60)),
+        min: Math.floor(seconds / 60) % 60,
+        sec: seconds % 60
+    }
+}
+
+
 function AddCourse(props) {
     return (
         <div className='add-course'>
@@ -50,7 +63,39 @@ function AddCourse(props) {
     )
 }
 
-export default class MyCourses extends PureComponent {
+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>
+    )
+}
+
+class MyCourses extends PureComponent {
+
+    state = {
+        courseList: this.props.courseList.data
+    }
+
     handleClick = () => {
         console.log(1);
     }
@@ -58,26 +103,49 @@ export default class MyCourses extends PureComponent {
         console.log(2);
     }
 
-    render() {
+    componentDidMount() {
+        console.log(this.props.courseList)
+        /*api.get('/m/my_course/1/10')
+            .then(res => {
+                if (res.data.code == 200) {
+                    this.setState({
+                        courseList: res.data.data
+                    });
+                } else {
+                    console.log(res.data.msg)
+                }
+            })*/
+        this.props.getMyCourses({page: 1, num: 10});
+    }
 
-        if (mockData.length !== 0) {
+    render() {
+        let { data } = this.props.courseList
+        console.log(data)
+        if (data && data.length !== 0) {
             return (
                 <>
                     <ul>
                         {
-                            mockData.map((item, index) => {
+                            data.map((item, index) => {
+
+                                let date = new Date(item.ago * 1000)
+                                let time = isToday(date) ? format(date, 'HH时mm分') : format(date, 'MM月DD日')
+
                                 const Info = (
                                     <div className="info">
-                                        <p className='title'>{item.title}</p>
-                                        <p className='contact'>{item.contact}</p>
+                                        <p className='title'>{item.course_title}</p>
+                                        <p className='contact'>QQ群：{item.course_qq || 449141326}</p>
                                         <p className='des'>
-                                            <span className='time'>{item.time}</span>
-                                            <span className='record'>{item.record}</span>
+                                            <span className='time'>{time}</span>
+                                            <Record record={item}/>
                                         </p>
                                     </div>
                                 )
                                 return (
-                                    <VList handleClick={this.handleClick} {...item} key={index} info={Info}></VList>
+                                    <VList img={item.image_name}
+                                           handleClick={this.handleClick}
+                                           {...item} key={index}
+                                           info={Info}/>
                                 )
                             })
                         }
@@ -99,3 +167,11 @@ export default class MyCourses extends PureComponent {
 
     }
 }
+
+const mapStateToProps = state => ({
+    courseList: state.myCourses.courseList
+})
+
+const mapDispatchToProps = {getMyCourses}
+
+export default connect(mapStateToProps,mapDispatchToProps)(MyCourses)
\ No newline at end of file

src/components/study/myCourses/my-courses.scss

 .info {
     display: flex;
+    //flex-flow: column wrap;
+    //justify-content: space-between;
     flex-wrap: wrap;
+    width: 55%;
 
     .title {
         font-size: 15px;
         font-weight: 400;
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     .contact {
@@ -13,9 +20,10 @@
     }
 
     .des {
-        align-self: center;
         color: $color_999;
         font-size: 11px;
+        align-self: flex-end;
+        line-height: 1;
 
         .time {
             margin-right: 10px;

src/components/study/myCourses/reducers.js

+import {RECEIVE_MY_COURSES} from './actions'
+
+const initialState = {
+    isValid: false,
+    courseList: []
+}
+
+
+export default function myCourses(state = initialState, action) {
+    switch (action.type) {
+        case RECEIVE_MY_COURSES:
+            return Object.assign({}, state, {courseList: action.payload})
+        default:
+            return state
+    }
+}
\ No newline at end of file

src/store/index.js

 import { combineReducers } from 'redux';
 import searchReducer from '@/components/search/store/reducer';
+import myCourses from '@/components/study/myCourses/reducers'
 
 
 const reducer = combineReducers({
-    searchReducer
+    searchReducer,
+    myCourses
 });
 
 export default reducer;
\ No newline at end of file

src/utils/api.js

@@ -6,10 +6,7 @@ export const BASE_URL = process.env.NODE_ENV === 'development' ? '/api': 'https:
 const instance = axios.create({
     baseURL: BASE_URL,
     transformRequest: [
-        (data) => {
-
-            return qs.stringify(data)
-        }
+        (data) => qs.stringify(data)
     ]
 })