Grid en artist

src/components/Comments.jsx

@@ -23,6 +23,10 @@ const Comment = (props) => (
 )
 
 export const Comments = (props) => {
+  if(!props.render) {
+    return null;
+  }
+
   let comentarios = [];
 
   let comment_count = Math.floor(Math.random() * 20)

src/components/Grid.jsx

@@ -2,10 +2,15 @@ import React from 'react';
 
 import './Grid.scss';
 
+export const RowCol = (props) => {
+ return <Row><Col>{props.children}</Col></Row>
+}
+
 export const Col = (props) => {
  return <div className="col">{props.children}</div>
 }
 
+
 export const Row = (props) => {
  return <div className="row">{props.children}</div>
 }

src/views/Artist.jsx

@@ -1,4 +1,4 @@
-import React, {Fragment, useEffect, useState} from 'react'
+import React, {useEffect, useState} from 'react'
 import queryString from "query-string";
 
 import {getArtist, getArtistDiscs} from "../services/entity_service";
@@ -8,12 +8,17 @@ import {Paginate} from "../components/Paginate";
 import {EntityList} from "../components/EntityList";
 import {Entity} from "../components/Entity";
 import {Comments} from "../components/Comments";
+import {Grid, RowCol} from '../components/Grid';
 
 
 const Discs = (props) => {
   const discs = props.discs ? props.discs : null;
   const paginate = props.paginate ? props.paginate : null;
 
+  if (!props.render) {
+    return null;
+  }
+
   const handlePageChanged = (page) => {
     props.onPageChanged(page);
   }
@@ -21,12 +26,15 @@ const Discs = (props) => {
   let discsComponent = <EntityList placeholder={true} size={16} cover={true} grid={true}/>;
   if (discs) {
     if(discs.length > 0){
-      const items = discs.map((disc) => ({
+      const items = discs.map((disc) => {
-        'cover': <CoverArt disc={disc} size={3}/>,
+        const cover = <CoverArt disc={disc} size={3}/>;
-        'link': `/disc/${disc.id}`,
+        return {
-        'title': disc.title,
+          'cover': cover,
-        'subtitle': disc.artist.name
+          'link': `/disc/${disc.id}`,
-      }));
+          'title': disc.title,
+          'subtitle': disc.artist.name
+        }
+      });
       const list = [{
         'items': items
       }]
@@ -47,13 +55,14 @@ const Discs = (props) => {
       onPageChanged={handlePageChanged} makeLink={props.makeLink}/>
   }
 
+
   return (
-    <div className='discs'>
+    <Grid>
-      <h2>Discos</h2>
+      <RowCol><h2>Discos</h2></RowCol>
-      {discsComponent}
+      <RowCol>{discsComponent}</RowCol>
-      {paginateContent}
+      <RowCol>{paginateContent}</RowCol>
-    </div>
+    </Grid>
-  );
+  )
 }
 
 const Artist = (props) => {
@@ -63,7 +72,7 @@ const Artist = (props) => {
       subtitle={[artist.type, artist.country].filter(Boolean).join(' - ')}
       tags={artist.tags.map((tag) => (tag.name))}/>
   }else {
-    return <Fragment/>
+    return null;
   }
 }
 
@@ -109,10 +118,14 @@ export const ArtistView = (props) => {
 
 
   return (
-    <div className='artist-view'>
+    <Grid>
-      <Artist artist={artist}/>
+      <RowCol><Artist artist={artist}/></RowCol>
-      {artist && <Discs discs={discs} paginate={discsPaginate} onPageChanged={handleDiscPageChanged} makeLink={makeLink} navigateToDisc={handleNavigateToDisc}/>}
+      <RowCol>
-      <Comments/>
+        <Discs render={artist} discs={discs} paginate={discsPaginate}
-    </div>
+          onPageChanged={handleDiscPageChanged} makeLink={makeLink}
+          navigateToDisc={handleNavigateToDisc}/>
+      </RowCol>
+      <RowCol><Comments render={artist}/></RowCol>
+    </Grid>
   );
 }