Issue #16: incluyendo ultimas paginas con grid

src/index.jsx

@@ -1,5 +1,5 @@
 import {BrowserRouter, Switch, Route} from "react-router-dom";
-import React, {Fragment} from 'react';
+import React from 'react';
 import ReactDOM from 'react-dom';
 
 import './styles/reset.css';
@@ -16,25 +16,28 @@ import {DiscView} from "./views/Disc";
 import {ReleaseView} from "./views/Release";
 import {Recomended} from "./views/Recomended";
 import {SongView} from "./views/Song";
+import {Grid, RowCol} from './components/Grid';
 
 const Main = (props) => {
     const navigate = (query) => props.history.push(`/search?query=${query}`);
 
     return (
-        <Fragment>
-            <h1>Busca la musica que te gusta!</h1>
-            <SearchBar history={props.history} onQueryChanged={navigate}/>
-            <Recomended/>
-        </Fragment>
+      <Grid>
+        <RowCol><h1>Busca la musica que te gusta!</h1></RowCol>
+        <RowCol><SearchBar history={props.history} onQueryChanged={navigate}/></RowCol>
+        <RowCol><Recomended/></RowCol>
+      </Grid>
     )
 }
 
 const NoRoute = (props) => {
     return (
-        <div>
-            <h1>Esa pagina no existe</h1>
+      <Grid>
+        <RowCol><h1>Esa pagina no existe</h1></RowCol>
+        <RowCol>
             <button className='link' onClick={() => props.history.goBack()}>Volver</button>
-        </div>
+        </RowCol>
+      </Grid>
     );
 }
 

src/services/utils.js

@@ -10,6 +10,10 @@ export const pad2 = (n) => {
 }
 
 export const toDuration = (miliseconds) => {
+  if(!miliseconds){
+    return '';
+  }
+
   const base =  Math.round(miliseconds / 1000);
 
   const hours = Math.floor(base / 3600);

src/views/Disc.jsx

@@ -29,11 +29,11 @@ const Versions = (props) => {
     const items = versions.map((version) => {
       const cover = (<CoverArt release={version} size={3}/>);
       const subtitle =  (
-        <Grid>
-          <RowCol><span>{version.date}</span></RowCol>
-          <RowCol><span>{version.country}</span></RowCol>
-          <RowCol><span>{capitalize(version.disambiguation)}</span></RowCol>
-        </Grid>
+        <div>
+          <div>{version.date}</div>
+          <div>{version.country}</div>
+          <div>{capitalize(version.disambiguation)}</div>
+        </div>
       );
 
       return {

src/views/Release.jsx

@@ -1,4 +1,4 @@
-import React, {Fragment, useEffect, useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {Link} from "react-router-dom";
 
 import {capitalize, toDuration} from "../services/utils";
@@ -8,6 +8,7 @@ import {CoverArt} from "../components/CoverArt";
 import {Entity} from "../components/Entity";
 import {EntityList} from "../components/EntityList";
 import {Comments} from "../components/Comments";
+import {Grid, RowCol} from "../components/Grid";
 
 
 const Recordings = (props) => {
@@ -28,10 +29,12 @@ const Recordings = (props) => {
       }
 
       for(const recording of media.recordings) {
-        const subtitle = <Fragment>
-          {recording.length &&<div>[{toDuration(recording.length)}]</div>}
-          {recording.disambiguation && <div>{capitalize(recording.disambiguation)}</div>}
-        </Fragment>
+        const subtitle = (
+          <div>
+            <div>[{toDuration(recording.length)}]</div>
+            <div>{capitalize(recording.disambiguation)}</div>
+          </div>
+        );
 
         group.items.push({
           id: recording.id,
@@ -44,15 +47,17 @@ const Recordings = (props) => {
 
       list.push(group);
     }
-    console.log(list)
+
     mediasComponent = <EntityList list={list}/>
   }
 
   return (
-    <Fragment>
-      <h2>Canciones</h2>
-      {mediasComponent}
-    </Fragment>
+    <Grid>
+      <RowCol>
+        <h2>Canciones</h2>
+        {mediasComponent}
+      </RowCol>
+    </Grid>
   )
 }
 
@@ -64,11 +69,10 @@ const Release = (props) => {
         {`${release.artist.name} (${release.date})`}
       </Link>
     )
-    return <Entity title={release.title}
-      subtitle={subtitle}
+    return <Entity title={release.title} subtitle={subtitle}
       cover={<CoverArt release={release} popup={true} size={4}/>}/>
-  }else {
-    return <Fragment></Fragment>
+  } else {
+    return null;
   }
 }
 
@@ -89,13 +93,10 @@ export const ReleaseView = (props) => {
   }, [mbid])
 
   return (
-    <Fragment>
-      <Release release={release}/>
-      {release &&
-        <Recordings medias={medias}
-          selected={currentRecording}/>
-      }
-      <Comments/>
-    </Fragment>
+    <Grid>
+      <RowCol><Release release={release}/></RowCol>
+      <RowCol><Recordings render={release}medias={medias} selected={currentRecording}/></RowCol>
+      <RowCol><Comments render={release}/></RowCol>
+    </Grid>
   )
 }

src/views/Search.jsx

@@ -1,4 +1,4 @@
-import React, {Fragment, useEffect, useState} from "react";
+import React, {useEffect, useState} from "react";
 import {Tab, TabList, TabPanel, Tabs} from "react-tabs";
 import queryString from "query-string";
 
@@ -8,7 +8,7 @@ import {SearchBar} from "../components/SearchBar";
 import {Paginate} from "../components/Paginate";
 import {CoverArt} from "../components/CoverArt";
 import {EntityList} from "../components/EntityList";
-import {Grid, Col, Row} from '../components/Grid';
+import {Grid, RowCol} from '../components/Grid';
 
 
 const SearchSongs = (props) => {
@@ -67,12 +67,14 @@ const SearchSongs = (props) => {
   }
 
   return (
-    <Fragment>
-      <ul className='entity_list'>
-        {songsComponent}
-      </ul>
-      {paginateComponent}
-    </Fragment>
+    <Grid>
+      <RowCol>
+        <ul className='entity_list'>
+          {songsComponent}
+        </ul>
+      </RowCol>
+      <RowCol>{paginateComponent}</RowCol>
+    </Grid>
   )
 }
 
@@ -104,37 +106,39 @@ const SearchDiscs = (props) => {
     })
   };
 
-  let discsComponent = <EntityList placeholder={true} grid={true} size={16} cover={true}/>;
+  let discsComponent = (<EntityList placeholder={true} grid={true} size={16} cover={true}/>);
   if (discs) {
     const items = discs.map((disc) => ({
-      'cover': <CoverArt disc={disc} size={3}/>,
-    'link': `/disc/${disc.id}`,
-    'title': disc.title,
-    'subtitle': disc.artist.name
-  }));
-  const list = [{
-    'items': items
-  }]
-  discsComponent = <EntityList list={list} grid={true}/>
-}
+      'cover': (<CoverArt disc={disc} size={3}/>),
+      'link': `/disc/${disc.id}`,
+      'title': disc.title,
+      'subtitle': disc.artist.name
+    }));
+    const list = [{
+      'items': items
+    }]
+    discsComponent = <EntityList list={list} grid={true}/>
+  }
 
-let paginateComponent;
-if (paginate) {
-  const total = paginate.total;
-  const currentPage = paginate.current_page;
-  const pageLimit = paginate.per_page;
+  let paginateComponent;
+  if (paginate) {
+    const total = paginate.total;
+    const currentPage = paginate.current_page;
+    const pageLimit = paginate.per_page;
 
-  paginateComponent = <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage} pageNeighbours={2} onPageChanged={handlePageChange} makeLink={makeLink}/>
-}
+    paginateComponent = <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage} pageNeighbours={2} onPageChanged={handlePageChange} makeLink={makeLink}/>
+  }
 
-return (
-  <Fragment>
-    <ul className='entity_list'>
-      {discsComponent}
-    </ul>
-    {paginateComponent}
-  </Fragment>
-)
+  return (
+    <Grid>
+      <RowCol>
+        <ul className='entity_list'>
+          {discsComponent}
+        </ul>
+      </RowCol>
+      <RowCol>{paginateComponent}</RowCol>
+    </Grid>
+  )
 }
 
 const SearchArtists = (props) => {
@@ -190,18 +194,12 @@ const SearchArtists = (props) => {
 
   return (
     <Grid>
-      <Row>
-        <Col>
-          <ul className='entity_list'>
-            {artistsContent}
-          </ul>
-        </Col>
-      </Row>
-      <Row>
-        <Col>
-          {paginateContent}
-        </Col>
-      </Row>
+      <RowCol>
+        <ul className='entity_list'>
+          {artistsContent}
+        </ul>
+      </RowCol>
+      <RowCol>{paginateContent}</RowCol>
     </Grid>
   )
 }
@@ -277,17 +275,11 @@ export const Search = (props) => {
 
   return (
     <Grid>
-      <Row><Col><h1>Búsqueda</h1></Col></Row>
-      <Row>
-        <Col>
-          <SearchBar query={query} onQueryChanged={handleQueryChange} history={props.history}/>
-        </Col>
-      </Row>
-      <Row>
-        <Col>
-          {content}
-        </Col>
-      </Row>
+      <RowCol><h1>Búsqueda</h1></RowCol>
+      <RowCol>
+        <SearchBar query={query} onQueryChanged={handleQueryChange} history={props.history}/>
+      </RowCol>
+      <RowCol>{content}</RowCol>
     </Grid>
   );
 }

src/views/Song.jsx

@@ -1,17 +1,16 @@
-import React, {Fragment, useEffect, useState} from 'react';
+import React, {useEffect, useState} from 'react';
 
 import {capitalize, toDuration} from "../services/utils";
 import {getSong} from "../services/entity_service";
 
 import {Entity} from "../components/Entity";
 import {Comments} from "../components/Comments";
+import {Grid, RowCol} from "../components/Grid";
 
 const Song = (props) => {
   const song = props.song;
 
-  if(!song) {
-    return <Fragment/>
-  }
+  if(!song) { return null}
 
   let subtitle = ''
 
@@ -38,12 +37,9 @@ export const SongView = (props) => {
   }, [mbid]);
 
   return (
-    <div>
-      <Song song={song}/>
-      {song &&
-        <Comments/>
-      }
-    </div>
+    <Grid>
+      <RowCol><Song song={song}/></RowCol>
+      <RowCol><Comments render={song}/></RowCol>
+    </Grid>
   )
-
 }