All files / src/components Albums.jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
 
 
 
 
 
9x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
1x
1x
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
import React, { Component } from "react";
import Album from "./Album";
import { GridList, GridListTile } from "material-ui/GridList";
import { withStyles } from "material-ui/styles";
import Subheader from "material-ui/List/ListSubheader";
 
const styles = theme => ({
  container: {
    flex: "1",
    display: "flex",
    paddingLeft: 1 * theme.spacing.unit,
    paddingRight: 1 * theme.spacing.unit,
    overflow: "hidden"
    //background: theme.palette.background.paper,
  },
  gridList: {
    width: "100%",
    justifyContent: "space-around"
  }
});
 
export class Albums extends Component {
  render() {
    const { classes, albums = [], handleClick, title = "" } = this.props;
    let ntitle = albums.length === 0 ? "No " + title : title;
    return (
      <div className={classes.container}>
        <GridList cellHeight={180} className={classes.gridList}>
          <GridListTile key="Subheader" cols={2} style={{ height: "auto" }}>
            <Subheader component="div">{ntitle}</Subheader>
          </GridListTile>
          {albums &&
            albums.map((album, index) => (
              <Album key={index} album={album} handleClick={handleClick} />
            ))}
        </GridList>
      </div>
    );
  }
}
 
export default withStyles(styles)(Albums);