add "more" button to list

mike-jianxin-mo · Feb 12, 2017 · 99ec9fe · 99ec9fe
1 parent c6a8ab5
commit 99ec9fe
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 29 deletions.
diff --git a/src/actions/search_action.js b/src/actions/search_action.js
@@ -4,10 +4,10 @@
  * action after user click search button, used for getting artists from remote service
  */
 var Config = require('Config')
-export const SearchArtistByCountry = (country) => {
+export const SearchArtistByCountry = (country, page = 1) => {
     return dispatch => {
         try{
-            let url = Config.baseUrl + '?method=geo.gettopartists&country=' + country + '&api_key=' + Config.apiKey + '&format=' + Config.format
+            let url = Config.baseUrl + '?method=geo.gettopartists&country=' + country + '&api_key=' + Config.apiKey + '&format=' + Config.format + '&page=' + page
             return fetch(url)
                 .then(function(response){
                     console.log(response);
@@ -21,7 +21,7 @@ export const SearchArtistByCountry = (country) => {
 
                             console.log('Successfully get artists ', data);
                             // 
-                            dispatch(AddArtists(data.topartists.artist));
+                            dispatch(AddArtists(data.topartists.artist, page, country));
 
 
                         })
@@ -32,20 +32,17 @@ export const SearchArtistByCountry = (country) => {
             console.log('request fail', err)
         }
     }
-    /*
-        return dispatch => {
-            dispatch(AddArtists([{name: 'RRRR', mbid: 'UUUUUUU-908908'}, {name: 'YYYYYRRRR', mbid: '4325346-UUUUUUU-908908'}]));
-        }
-    */
 }
 
 /**
  * action for adding artists list to store
  */
-export const AddArtists = ( artistList) => {
+export const AddArtists = ( artistList, page, country) => {
     return {
         type: 'ADD_ARTISTS',
-        artist: artistList
+        artists: artistList,
+        remotePageNumber: page,
+        country: country
     }
 }
 

diff --git a/src/components/list.js b/src/components/list.js
@@ -3,17 +3,8 @@
  * artist list view section
  */
 import React, { PropTypes } from 'react'
-import Pagination from '../components/pagination'
 
-const calculatePageItemRange = ( artists, currentPage ) => {
-    console.log("PAGINATION CALCULATOR ")
-    let starPointer = 5 * (currentPage - 1)
-    let endPointer  = starPointer + 5
-    return (artists.length <= endPointer)? artists.slice(starPointer, endPointer): null    
-}
-
-const List = ({ artists, onItemSelected, currentPage, onOutOfPageRange, onSwitchPage }) => {
-    console.log('IN LISTS ', artists);
+const List = ({ artists, onItemSelected, currentPage, onOutOfPageRange, onSwitchPage, onGetMoreArtits }) => {
 
     if(artists){
 
@@ -56,6 +47,7 @@ const List = ({ artists, onItemSelected, currentPage, onOutOfPageRange, onSwitch
                                     )   
                                 })
                             }
+                            <li onClick = {() => onGetMoreArtits() }>  more >> </li>
                         </ul>
                     </div>
                 </div>

diff --git a/src/components/main_content.js b/src/components/main_content.js
@@ -15,14 +15,21 @@ const MainContent = React.createClass({
             this.props.onItemSelected(name, mbid); 
     },
 
+
+    getMoreArtists(){
+        console.log('getMoreArtists ', this.props.country, this.props.remotePageNumber + 1)
+        this.props.onGetMoreArtits(this.props.country, this.props.remotePageNumber + 1);       
+    },
+
     render() {
         return (
             <div>
                 { this.props.showList ?  <List  artists = {this.props.artists}
                                                 currentPage = {this.props.currentPage} 
                                                 onItemSelected = {this.handleClick} 
                                                 onOutOfPageRange = {this.props.onOutOfPageRange} 
-                                                onSwitchPage = {this.props.onSwitchPage} />: null }
+                                                onSwitchPage = {this.props.onSwitchPage}
+                                                onGetMoreArtits = {this.getMoreArtists} />: null }
                 { this.props.showDetails ?  <Details    details = { this.props.details }  
                                                         currentId = { this.props.currentId } 
                                                         onBackToList = {this.props.onBackToList} />: null }

diff --git a/src/containers/main_content_container.js b/src/containers/main_content_container.js
@@ -5,6 +5,7 @@
 import { connect } from 'react-redux'
 import MainContent from '../components/main_content'
 import { ShowItem, GetNewArtists, SwitchPage, BackToList, ShowLocalItem, SelectLoadedItem }  from '../actions/search_action'
+import { SearchArtistByCountry }  from '../actions/search_action'
 
 const mapStateToProps = (state) => {
   console.log('BEFORE START MAPPING ', state);
@@ -14,26 +15,31 @@ const mapStateToProps = (state) => {
       details: state.content.details,
       currentId: state.content.currentId,
       artists: state.content.artists,
-      currentPage: state.content.currentPage
+      currentPage: state.content.currentPage,
+      remotePageNumber: state.content.remotePageNumber,
+      country: state.content.country
    }
 }
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    onItemSelected : (name, mbid) => {
+    onItemSelected: (name, mbid) => {
       dispatch(ShowItem(name, mbid));
     },
-    onSelectLoadedItem : (name, mbid) => {
+    onSelectLoadedItem: (name, mbid) => {
       dispatch(SelectLoadedItem(name, mbid));
     },
-    onOutOfPageRange : () => {
+    onOutOfPageRange: () => {
       dispatch(GetNewArtists())
     },
-    onSwitchPage : (pageNumber) => {
+    onSwitchPage: (pageNumber) => {
       dispatch(SwitchPage(pageNumber))
     },
-    onBackToList : () => {
+    onBackToList: () => {
       dispatch(BackToList())
+    },
+    onGetMoreArtits: (country, remotePageNumber) =>{
+      dispatch(SearchArtistByCountry(country, remotePageNumber))
     }
   }
 }

diff --git a/src/reducers/main_content.js b/src/reducers/main_content.js
@@ -6,10 +6,22 @@ const content = (state = {}, action) => {
     switch (action.type){
         case 'ADD_ARTISTS':
             console.log('BEFORE UPDATE ', state);
-            state.artists = action.artist
+            // let artists = state.artists
+            // artists.push(action.artists)
+            // artists.push(...state.artists);
+            // artists.push.apply(artists, action.artists)
+            // state.artists = action.artist
+            let artists = action.artists
+            let newArtists = []
+            for(var i=0; i < state.artists.length; i ++){
+                newArtists.push(state.artists[i]);
+            }
+            newArtists.push.apply(newArtists, action.artists)
             console.log('AFTER UPDATE ', state);
             return Object.assign({}, state, {
-                artist: action.artist
+                artists: newArtists,
+                remotePageNumber: action.remotePageNumber,
+                country: action.country
             })
 
         case 'SHOW_LIST':