ui refine, add css and some alert information.

src/actions/search_action.js

@@ -20,8 +20,11 @@ export const SearchArtistByCountry = (country, page = 1) => {
                         response.json().then(function(data){ 
 
                             console.log('Successfully get artists ', data);
-                            // 
-                            dispatch(AddArtists(data.topartists.artist, page, country));
+
+                            if(data.error)
+                                alert('Request fail, the return message is "' + data.message + '", the message code is [' + data.error + ']' )
+                            else 
+                                dispatch(AddArtists(data.topartists.artist, page, country));
 
 
                         })

src/components/details.js

@@ -4,13 +4,14 @@
  */
 import React, { PropTypes } from 'react'
 
-
-const Details = ({ details, currentId, onBackToList }) => {
+const Details = ({ details, currentId, onBackToList, currentName }) => {
     let currentDetails = details[currentId]
     return (  
         <div className='details'>
-            Details is here <br/>
-            { currentId }  <br/>
+            <div>Top traks of { currentName }<br/></div>
+            <div className='back2list' onClick = {onBackToList}>
+                 [ BACK TO LIST ]
+            </div> 
             <ul>
                 {
                     currentDetails.map( (item, index) => {
@@ -21,9 +22,7 @@ const Details = ({ details, currentId, onBackToList }) => {
                 }
             </ul>
 
-            <div onClick = {onBackToList}>
-                 [ BACK TO LIST ]
-            </div>               
+
         </div>
     )
 }

src/components/list.js

@@ -5,11 +5,8 @@
 import React, { PropTypes } from 'react'
 
 let style = {
-  backgroundColor: '#CCC',
-  width: '20%',
-  height: '500px',
-  float: 'left'
-};
+    display: 'inline-block',
+}
 
 const List = ({ artists, onItemSelected, currentPage, onOutOfPageRange, onSwitchPage, onGetMoreArtits }) => {
 
@@ -38,23 +35,38 @@ const List = ({ artists, onItemSelected, currentPage, onOutOfPageRange, onSwitch
                             List is here 
                             {
                                     showArtists.map( item => {
+
+                                        let imageUrl = ''
+                                        if(item){
+                                            for(var i = 0; i < item.image.length; i++){
+                                                if(item.image[i].size ==="large"){
+                                                    imageUrl = item.image[i]['#text']
+                                                }
+                                            }
+                                            if(!imageUrl && item.image[i].length > 0)
+                                                imageUrl = item.image[0].url
+                                        }
+
                                         return (
-                                            <li value={item.mbid} key={item.mbid} onClick={() => onItemSelected(item.name, item.mbid)}>{item.name}</li>
+                                            <li value={item.mbid} key={item.mbid} >
+                                                <div className='brand-image'><img src={imageUrl}  onClick={() => onItemSelected(item.name, item.mbid)} /></div>
+                                                <div className='artist-name'>{item.name}</div>
+                                            </li>
                                         )
                                     })
                             }
                         </ul>   
                     </div>
-                    <div className='pagination' style={style}>
+                    <div className='pagination' >
                         <ul>
                             {
                                 pageNumbers.map( pNumber =>{
                                     return (
-                                        <li value={pNumber} key={pNumber} onClick = {() => onSwitchPage(pNumber) } > {pNumber} </li>
+                                        <li style={style} value={pNumber} key={pNumber} onClick = {() => onSwitchPage(pNumber) } >&nbsp; {pNumber}&nbsp; </li>
                                     )   
                                 })
                             }
-                            <li onClick = {() => onGetMoreArtits() }>  more >> </li>
+                            { pageNumbers.length ? <li onClick = {() => onGetMoreArtits() }> &nbsp;&nbsp;&nbsp; more >> </li>: null }
                         </ul>
                     </div>
                 </div>

src/components/main_content.js

@@ -32,6 +32,7 @@ const MainContent = React.createClass({
                                                 onGetMoreArtits = {this.getMoreArtists} />: null }
                 { this.props.showDetails ?  <Details    details = { this.props.details }  
                                                         currentId = { this.props.currentId } 
+                                                        currentName = { this.props.currentName }
                                                         onBackToList = {this.props.onBackToList} />: null }
             </div>
         )

src/components/search.js

@@ -13,15 +13,17 @@ const Search = React.createClass({
         });
     },
     onClick: function() {
-        console.log(this.state.searchCountry);
-        // this.setState({ showList: !this.state.showList, showDetails: !this.state.showDetails });
-        this.props.onSearchBtnClick(this.state.searchCountry);
+        if(this.state && this.state.searchCountry)
+            this.props.onSearchBtnClick(this.state.searchCountry);
+        else 
+            alert('Input a country name please.');
     },
+    placeholder: 'please input country name ',
     render: function() {
         return (
             <div className='search'>
-                <input onChange={this.onSearchCountryChange} />
-                <input type="submit" value="Search" onClick={ this.onClick }/>
+                <input onChange={this.onSearchCountryChange} className='country' placeholder={this.placeholder} />
+                <input type="submit" value="Search" onClick={ this.onClick } className='button'/>
             </div>
         );
     }

src/containers/main_content_container.js

@@ -14,6 +14,7 @@ const mapStateToProps = (state) => {
       showDetails: state.content.showDetails,
       details: state.content.details,
       currentId: state.content.currentId,
+      currentName: state.content.currentName,
       artists: state.content.artists,
       currentPage: state.content.currentPage,
       remotePageNumber: state.content.remotePageNumber,

src/reducers/main_content.js

@@ -12,11 +12,16 @@ const content = (state = {}, action) => {
             // 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]);
+            if(action.remotePageNumber == 1){
+                newArtists = action.artists
+            }else{
+                for(var i=0; i < state.artists.length; i ++){
+                    newArtists.push(state.artists[i]);
+                }
+                newArtists.push.apply(newArtists, action.artists)
             }
-            newArtists.push.apply(newArtists, action.artists)
             console.log('AFTER UPDATE ', state);
             return Object.assign({}, state, {
                 artists: newArtists,
@@ -38,7 +43,8 @@ const content = (state = {}, action) => {
                 showDetails: true,
                 showList: false,
                 details : details,
-                currentId : action.mbid
+                currentId : action.mbid,
+                currentName : action.name
             })
         case 'SHOW_ALREADY_LOADED_ITEM':
             return Object.assign({}, state, {

src/static/index.html

@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Document</title>
+  <link rel="stylesheet" type="text/css" href="./style.css">
 </head>
 <body>
 

src/static/style.css

@@ -0,0 +1,62 @@
+.pagination ul li{
+    display: inline-block;
+    margin-bottom: 10px;
+}
+
+.list ul li {
+    margin-bottom: 15px;
+    list-style: none;
+    border-bottom: 2px solid #eae9e9;
+}
+
+.list ul li  .brand-image {
+    width: 180px;
+    display: inline-block;
+    margin-bottom: 10px;
+}
+
+.list ul li .brand-image imge{
+    width: 100%;
+}
+
+.list ul li .artist-name{
+    display: inline-block;
+    margin-left: 120px;
+}
+
+input[type=text], select {
+    width: 100%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+
+
+div {
+    border-radius: 5px;
+    background-color: #f2f2f2;
+    padding: 20px;
+}
+
+.search input.country {
+    line-height: 38px;
+    width: 400px;
+    vertical-align: middle;
+}
+
+.search input.button {
+    width: 100%;
+    background-color: #4CAF50;
+    color: white;
+    padding: 14px 20px;
+    margin: 8px 0;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    width: 150px;
+    margin-left: 5px;
+}
+