Issue #16: Grid en Disc

src/views/Disc.jsx

@@ -5,6 +5,7 @@ import queryString from "query-string";
 import {capitalize} from "../services/utils";
 import {getDisc, getDiscVersions} from "../services/entity_service";
 
+import {Grid, RowCol} from '../components/Grid';
 import {CoverArt} from "../components/CoverArt";
 import {Entity} from "../components/Entity";
 import {EntityList} from "../components/EntityList";
@@ -15,23 +16,34 @@ const Versions = (props) => {
   const versions = props.versions ? props.versions : null;
   const paginate = props.paginate ? props.paginate : null;
 
+  if (!props.render) {
+    return null;
+  }
+
   const handlePageChanged = (page) => {
     props.onPageChanged(page);
   }
 
   let versionsComponent = <EntityList placeholder={true} size={10} cover={true}/>;
   if(versions) {
-    const items = versions.map((version) => ({
-      'cover': <CoverArt release={version} size={2}/>,
+    const items = versions.map((version) => {
+      const cover = (<CoverArt release={version} size={2}/>);
+      const subtitle =  (
+        <Grid>
+          <RowCol><span>{version.date}</span></RowCol>
+          <RowCol><span>{version.country}</span></RowCol>
+          <RowCol><span>{capitalize(version.disambiguation)}</span></RowCol>
+        </Grid>
+      );
+
+      return {
+        'cover': cover,
         'link': `/release/${version.id}`,
         'title': version.title,
-      'subtitle': <Fragment>
-                   <div>{version.date}</div>
-                   <div>{version.country}</div>
-                   <div>{capitalize(version.disambiguation)}</div>
-                   </Fragment>
+        'subtitle': subtitle
+      };
+    });
 
-    }));
     const list = [{
       'items': items
     }];
@@ -50,11 +62,11 @@ const Versions = (props) => {
   }
 
   return (
-    <Fragment>
-      <h2>Versiones</h2>
-      {versionsComponent}
-      {paginateContent}
-    </Fragment>
+    <Grid>
+      <RowCol><h2>Versiones</h2></RowCol>
+      <RowCol>{versionsComponent}</RowCol>
+      <RowCol>{paginateContent}</RowCol>
+    </Grid>
   )
 }
 
@@ -108,14 +120,14 @@ export const DiscView = (props) => {
   }
 
   return (
-    <Fragment>
-      <Disc disc={disc}/>
-      {disc &&
-        <Versions versions={versions} paginate={versionsPaginate}
+    <Grid>
+      <RowCol><Disc disc={disc}/></RowCol>
+      <RowCol>
+        <Versions render={disc} versions={versions} paginate={versionsPaginate}
           onPageChanged={handleVersionPageChanged} makeLink={makeLink}
           navigateToVersion={handleNavigateToVersion}/>
-      }
-      <Comments/>
-    </Fragment>
+      </RowCol>
+      <RowCol><Comments render={disc}/></RowCol>
+    </Grid>
   )
 }