Dater; Basic grid responsive; Local formatting

src/js/views/library/LibraryLocal.js

@@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux'
 import { Link } from 'react-router'
 
 import Header from '../../components/Header'
+import GridItem from '../../components/GridItem'
 
 export default class LibraryLocal extends React.Component{
 
@@ -13,11 +14,37 @@ export default class LibraryLocal extends React.Component{
 	}
 
 	render(){
+
+		var grid_items = [
+			{
+				name: 'Artists',
+				link: '/library/local/artists',
+				icons: ['/assets/backgrounds/category-artists.jpg']
+			},
+			{
+				name: 'Albums',
+				link: '/library/local/albums',
+				icons: ['/assets/backgrounds/category-albums.jpg']
+			},
+			{
+				name: 'Folders',
+				link: '/library/local/directory/local:directory',
+				icons: ['/assets/backgrounds/category-folders.jpg']
+			}
+		]
+
 		return (
 			<div className="view library-local-view">
 				<Header icon="folder" title="Local" />
-				<Link to="/library/local/directory/local:directory">Folders</Link>
-				<Link to="/library/local/artists">Artists</Link>
+				<div className="grid category-grid">				
+					{
+						grid_items.map(
+							(item, index) => {
+								return <GridItem item={item} key={index} link={item.link} />
+							}
+						)
+					}
+				</div>
 			</div>
 		);
 	}

src/js/views/library/LibraryLocalAlbums.js

@@ -0,0 +1,67 @@
+
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+
+import Header from '../../components/Header'
+import List from '../../components/List'
+
+import * as mopidyActions from '../../services/mopidy/actions'
+import * as spotifyActions from '../../services/spotify/actions'
+
+class LibraryLocalAlbums extends React.Component{
+
+	constructor(props) {
+		super(props);
+	}
+
+	// on render
+	componentDidMount(){
+		this.loadAlbums()
+	}
+
+	componentWillReceiveProps( nextProps ){
+		if( !this.props.mopidy.connected && nextProps.mopidy.connected ){
+			this.loadAlbums(nextProps);
+		}
+	}
+
+	loadAlbums(props = this.props){
+		if( props.mopidy.connected ){
+			this.props.mopidyActions.getAlbums();
+		}
+	}
+
+	render(){
+		if( !this.props.mopidy.albums ) return null
+
+		return (
+			<div className="view library-local-view">
+				<Header icon="music" title="Local albums" />
+				<div>
+					<List columns={[{ name: 'name', width: '100'}]} rows={this.props.mopidy.albums} link_prefix="/album/" />
+				</div>
+			</div>
+		);
+	}
+}
+
+
+/**
+ * Export our component
+ *
+ * We also integrate our global store, using connect()
+ **/
+
+const mapStateToProps = (state, ownProps) => {
+	return state;
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		mopidyActions: bindActionCreators(mopidyActions, dispatch),
+		spotifyActions: bindActionCreators(spotifyActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(LibraryLocalAlbums)

src/js/views/library/LibraryLocalArtists.js

@@ -37,7 +37,7 @@ class LibraryLocalArtists extends React.Component{
 
 		return (
 			<div className="view library-local-view">
-				<Header icon="music" title="Local" />
+				<Header icon="music" title="Local artists" />
 				<div>
 					<List columns={[{ name: 'name', width: '100'}]} rows={this.props.mopidy.artists} link_prefix="/artist/" />
 				</div>

src/js/views/library/LibraryLocalDirectory.js

@@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux'
 import { Link } from 'react-router'
 
 import Header from '../../components/Header'
+import List from '../../components/List'
 
 import * as mopidyActions from '../../services/mopidy/actions'
 import * as spotifyActions from '../../services/spotify/actions'
@@ -24,46 +25,30 @@ class LibraryLocalDirectory extends React.Component{
 
 		// mopidy goes online
 		if( !this.props.mopidy.connected && nextProps.mopidy.connected ){
-			this.loadDirectory();
+			this.loadDirectory( nextProps );
 		}
 
 		// our uri changes
 		if( nextProps.params.uri != this.props.params.uri ){
-			this.loadDirectory(nextProps.params.uri);
+			this.loadDirectory( nextProps );
 		}
 	}
 
-	loadDirectory(uri = this.props.params.uri){
-		if( this.props.mopidy.connected ){
-			this.props.mopidyActions.getBrowse(uri);
+	loadDirectory( props = this.props ){
+		if( props.mopidy.connected ){
+			this.props.mopidyActions.getDirectory( props.params.uri );
 		}
 	}
 
-	renderDirectory(){
-		if( !this.props.mopidy.browse ) return null
-
-		return (
-			<div>
-				{
-					this.props.mopidy.browse.map( directory => {
-						return (
-							<div key={directory.uri}>
-								<Link to={'/library/local/directory/'+encodeURIComponent(directory.uri)}>
-									{ directory.name }
-								</Link>
-							</div>
-						)
-					})
-				}
-			</div>
-		)
-	}
-
 	render(){
+		if( !this.props.mopidy.directory ) return null
+
 		return (
 			<div className="view library-local-view">
-				<Header icon="music" title="Local" />
-				{ this.renderDirectory() }
+				<Header icon="music" title="Local files" />
+				<div>
+					<List columns={[{ name: 'name', width: '100'}]} rows={this.props.mopidy.directory} link_prefix="/library/local/directory/" />
+				</div>
 			</div>
 		);
 	}