💄 Optimize song list display

src/actions/discoverMusic.jsx

@@ -0,0 +1,37 @@
+import { dailyRecommendedPlaylist } from './host'
+export const RECEIVE_DAILY_RECOMMENDED_PLAYLIST = 'RECEIVE_DAILY_RECOMMENDED_PLAYLIST'
+export const REQUIRE_DAILY_RECOMMENDED_PLAYLIST = 'REQUIRE_DAILY_RECOMMENDED_PLAYLIST'
+
+const requireDailyRecommendedPlaylist = (id) => ({
+    type: REQUIRE_DAILY_RECOMMENDED_PLAYLIST,
+    id
+})
+
+const receiveDailyRecommendedPlaylist = (id, json) => ({
+    type: RECEIVE_DAILY_RECOMMENDED_PLAYLIST,
+    id,
+    date: json
+})
+
+const fetchDailyRecommendedPlaylist = () => (dispatch) => {
+    return fetch(`${dailyRecommendedPlaylist}`, {
+        credentials: 'include',
+        mode: 'cors'
+    })
+        .then((response) => response.json())
+        .then((json) => {
+            if(json && json.code.toString() === '200') {
+                dispatch(receiveDailyRecommendedPlaylist(json))
+            }
+        })
+}
+
+const shouldFetchDailyRecommendedPlaylist = (state) => {
+
+}
+
+export const fetchDailyRecommendedPlaylistIfNeeded = () => (dispatch, getState) => {
+    if(shouldFetchDailyRecommendedPlaylist(getState())) {
+        return dispatch(fetchDailyRecommendedPlaylist())
+    }
+}

src/actions/host.jsx

@@ -1,6 +1,10 @@
 const baseURL = 'https://www.shianqi.com'
 
+//登录
 export const loginURL = `${baseURL}/login/cellphone`
+//刷新登录状态登录
 export const refreshURL = `${baseURL}/login/refresh`
 export const playlistURL = `${baseURL}/user/playlist`
 export const playlistDetailURL = `${baseURL}/playlist/detail`
+//每日推荐歌单
+export const dailyRecommendedPlaylist = `${baseURL}/personalized`

src/actions/songList.jsx

@@ -0,0 +1,44 @@
+import { playlistDetailURL } from './host'
+
+export const RECEIVE_LIST_DETAIL = 'RECEIVE_LIST_DETAIL'
+export const REQUEST_LIST_DETAIL = 'REQUEST_LIST_DETAIL'
+
+const receiveSonglistDetail = (json, id) => ({
+    type: RECEIVE_LIST_DETAIL,
+    data: json,
+    id
+})
+
+const requestSonglistDetail = (id) => ({
+    type: REQUEST_LIST_DETAIL,
+    id
+})
+
+const fetchListDetail = (id) => (dispatch) => {
+    dispatch(requestSonglistDetail(id))
+    return fetch(`${playlistDetailURL}?id=${id}`, {
+        credentials: 'include',
+        mode: 'cors'
+    })
+        .then((response) => response.json())
+        .then((json) => {
+            dispatch(receiveSonglistDetail(json, id))
+        })
+}
+
+const shouldFetchListDetail = (state, id) => {
+    const listDetail = state[id]
+    if(!listDetail) {
+        return true
+    }
+    if(listDetail.isFetching) {
+        return false
+    }
+    return true
+}
+
+export const fetchListDetailIfNeeded = (id) => (dispatch, getState) => {
+    if (shouldFetchListDetail(getState(), id)) {
+        return dispatch(fetchListDetail(id))
+    }
+}

src/components/page_components/SongList/index.jsx

@@ -1,62 +1,37 @@
 import React, { Component } from 'react'
 import SunListItem from '../SongListItem'
 import Style from './index.css'
+import { connect } from 'react-redux'
+import { push } from 'react-router-redux'
+
+const selector = (state) => (
+    {
+        dailyRecommendedPlaylist :state.discoverMusic.personalityRecommendation.dailyRecommendedPlaylist
+    }
+)
 
 class SunList extends Component {
     render() {
-        const sunLists = [
-            {
-                plays: '33k',
-                title: '每日歌曲推荐 欲罢不能的电音',
-                recommendReason: '根据您的音乐口味生成每日更新',
-                playButton: false
-            },
-            {
-                plays: '63k',
-                title: '高考提分哪家强，听完此单斗志昂',
-                recommendReason: '根据您的音乐口味生成每日更新',
-                playButton: true
-            },
-            {
-                plays: '163k',
-                title: '欲罢不能的电音，Dopa Trap/Future',
-                recommendReason: '根据您的音乐口味生成每日更新',
-                playButton: true
-            },
-            {
-                plays: '13k',
-                title: '❤不让你通宵的电音不是好毒品Ⅰ',
-                recommendReason: '根据您的音乐口味生成每日更新',
-                playButton: true
-            },
-            {
-                plays: '13k',
-                title: '❤不让你通宵的电音不是好毒品Ⅰ',
-                recommendReason: '根据您的音乐口味生成每日更新',
-                playButton: true
-            },
-            {
-                plays: '13k',
-                title: '❤不让你通宵的电音不是好毒品Ⅰ',
-                recommendReason: '根据您的音乐口味生成每日更新',
-                playButton: true
-            },
-            {
-                plays: '13k',
-                title: '❤不让你通宵的电音不是好毒品Ⅰ',
-                recommendReason: '根据您的音乐口味生成每日更新',
-                playButton: true
-            }
-        ]
+        const {
+            dispatch,
+            sunLists
+        } = this.props
 
         const SunListItems = sunLists.map((item, index)=>(
             <SunListItem
                 key={index}
-                title={item.title}
-                plays={item.plays}
-                recommendReason={item.recommendReason}
-                playButton={item.playButton}
-                HandlerClick={()=>{}}
+                id={item.id}
+                name={item.name}
+                playCount={item.playCount}
+                picUrl={item.picUrl}
+                copywriter={item.copywriter}
+                canDislike={item.canDislike}
+                HandlerPlayButtonClick={()=>{
+                    dispatch(push(`/playlist/${item.id}`))
+                }}
+                HandlerImgClick={()=>{
+
+                }}
             />
         ))
         return (
@@ -67,4 +42,4 @@ class SunList extends Component {
     }
 }
 
-export default SunList
+export default connect(selector)(SunList)

src/components/page_components/SongListItem/index.css

@@ -15,6 +15,13 @@
     overflow: hidden;
 }
 
+.item-img-photo {
+    display: block;
+    width: 100%;
+    position: absolute;
+    top: 0;
+}
+
 .item-img::before {
     content: "";
     display: inline-block;

src/components/page_components/SongListItem/index.jsx

@@ -9,38 +9,41 @@ import {
 class SunListItem extends Component {
     render() {
         const {
-            title,
-            plays,
-            recommendReason,
-            playButton,
-            HandlerClick
+            name,
+            playCount,
+            copywriter,
+            canDislike,
+            picUrl,
+            HandlerPlayButtonClick,
+            HandlerImgClick
         } = this.props
 
         return (
             <div className={Style['main']}>
                 <div className={Style['item-img']}>
+                    <img className={ Style['item-img-photo'] } src={ picUrl } onClick={ HandlerPlayButtonClick }></img>
                     <div className={Style['item-hover']}>
-                        { recommendReason }
+                        { copywriter }
                     </div>
                     <div
                         className={
                             cs(
                                 iconfont,
                                 icon_bofang,
                                 Style['item-play-button'],
-                                {[Style['item-display-none']]: !playButton}
+                                {[Style['item-display-none']]: !canDislike}
                             )
                         }
-                        onClick={HandlerClick}
+                        onClick={HandlerImgClick}
                     >
 
                     </div>
                     <div className={Style['item-plays']}>
-                        { plays }
+                        { playCount }
                     </div>
                 </div>
                 <div className={Style['item-title']}>
-                    { title }
+                    { name }
                 </div>
             </div>
         )

src/components/window/DiscoverMusic/GXTJ/index.jsx

@@ -2,23 +2,39 @@ import React, { Component } from 'react'
 import Title from '../../../page_components/Title'
 import Style from './index.css'
 import SunList from '../../../page_components/SongList'
+import { connect } from 'react-redux'
+
+const selector = (state) => (
+    {
+        dailyRecommendedPlaylist :state.discoverMusic.personalityRecommendation.dailyRecommendedPlaylist
+    }
+)
 
 class GXTJ extends Component {
+    componentDidMount() {
+        const { dispatch } = this.props
+    }
+
     render() {
         const getMore = function() {
 
         }
 
+        const {
+            dispatch,
+            dailyRecommendedPlaylist
+        } = this.props
+
         return (
             <div className={Style['main']}>
                 <div></div>
                 <Title rightButtonClick={getMore} rightButton={'更多>'} title={'推荐歌单'}/>
-                <SunList/>
+                <SunList sunLists={ dailyRecommendedPlaylist.result ? dailyRecommendedPlaylist.result : [] }/>
                 <Title rightButtonClick={getMore} rightButton={'更多>'} title={'独家放送'}/>
                 <Title rightButtonClick={getMore} rightButton={'更多>'} title={'最新音乐'}/>
             </div>
         )
     }
 }
 
-export default GXTJ
+export default connect(selector)(GXTJ)

src/components/window/Playlist/PlaylistItem.jsx

@@ -8,10 +8,13 @@ class PlaylistItem extends Component {
 
     render() {
         const {
-            name,
+            name='Loading...',
             createTime,
             coverImgUrl,
-            creator
+            creator={
+                avatarUrl: '',
+                nickname: ''
+            }
         } = this.props.playlist
 
         return (
@@ -23,7 +26,7 @@ class PlaylistItem extends Component {
                     <div className={Style['banner-main']}>
                         <div className={ Style['banner-title'] }>
                             <span className={ Style['banner-title-span'] }>歌单</span>
-                            <span className={ Style['banner-title-name'] }>{name}</span>
+                            <span className={ Style['banner-title-name'] }>{ name }</span>
                         </div>
                         <div>
                             <div className={ Style['banner-owner-img'] }>

src/components/window/Playlist/PlaylistItems.jsx

@@ -2,25 +2,25 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
 
-import { listDetailFetchPosts } from '../../../actions/userSelectSongList'
+import { fetchListDetailIfNeeded } from '../../../actions/songList'
 
 import PlaylistItem from './PlaylistItem'
 
-const selector = (state) => {
-    return {
-        playlist: state.userSelectSongList.playlist,
-        playlistId: state.userSelectSongList.playlistId
+const selector = (state) => (
+    {
+        id: state.songList.id,
+        playlist: state.songList[this.id]
     }
-}
+)
 
 class PlaylistItems extends Component {
     componentDidMount() {
         const { match, dispatch } = this.props
-        dispatch(listDetailFetchPosts(match.params.thisID))
+        dispatch(fetchListDetailIfNeeded(match.params.thisID))
     }
 
     render() {
-        const { playlist } = this.props
+        const { playlist={} } = this.props
         return (
             <div>
                 <PlaylistItem
@@ -31,10 +31,8 @@ class PlaylistItems extends Component {
     }
 
     componentWillReceiveProps() {
-        const { match, dispatch, playlistId } = this.props
-        if(match.params.thisID !== playlistId) {
-            dispatch(listDetailFetchPosts(match.params.thisID))
-        }
+        const { match, dispatch } = this.props
+        dispatch(fetchListDetailIfNeeded(match.params.thisID))
     }
 }