Issue #16: Grid en search y recomended

src/components/Grid.jsx

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

src/components/Grid.scss

@@ -1,5 +1,5 @@
 .grid {
-  --gutter: 1em;
+  --gutter: 1rem;
   width: 100%;
 
   .row {

src/components/SearchBar.scss

@@ -1,7 +1,4 @@
 .searchbar {
-  margin-bottom: 2em;
-  margin-top: 1em;
-
   input {
     border: var(--line-width) solid var(--accent);
     border-right: none;

src/index.jsx

@@ -4,7 +4,6 @@ import ReactDOM from 'react-dom';
 
 import './styles/reset.css';
 import './styles/main.scss';
-import './styles/grid.scss';
 import './styles/tabs.scss';
 
 import {Nav} from "./components/Nav";

src/styles/tabs.scss

@@ -2,10 +2,10 @@ ul.tabs {
   display: flex;
   align-items: stretch;
   border-bottom: var(--line-width) var(--gray-1) solid;
-  margin: 1rem 0;
+  margin-top: 1em;
 
   li.tab {
-    padding: .5rem 1em;
+    padding: .5em 1em;
     margin-bottom: -2px;
     cursor: pointer;
 

src/views/Recomended.jsx

@@ -5,6 +5,7 @@ import {getArtist, getDisc, getSong} from '../services/entity_service';
 
 import {EntityList} from '../components/EntityList';
 import {CoverArt} from '../components/CoverArt';
+import {Grid, Row, Col} from '../components/Grid';
 
 const PopularArtists = () => {
   const artistIDs = ['fa3b825f-7c85-4377-b393-d28a2016e293', 'b2d122f9-eadb-4930-a196-8f221eeb0c66',
@@ -91,23 +92,23 @@ export const Recomended = () => {
   // TODO crear una forma de obtener cosas populares
   // Esto es un por mientras hago todo el resto y la pagina de inicio no se vea tan vacia
   return (
-    <div class='grid'>
-      <div class='row'>
-        <div class='col'>
+    <Grid>
+      <Row>
+        <Col>
           <h3>Artistas Populares</h3>
           <PopularArtists/>
-        </div>
-        <div class='col'>
+        </Col>
+        <Col>
           <h3>Canciones Populares</h3>
           <PopularSongs/>
-        </div>
-      </div>
-      <div className="row">
-        <div className="col">
+        </Col>
+      </Row>
+      <Row>
+        <Col>
           <h3>Discos Populares</h3>
           <PopularDiscs/>
-        </div>
-      </div>
-    </div>
+        </Col>
+      </Row>
+    </Grid>
   )
 }

src/views/Search.jsx

@@ -8,269 +8,286 @@ 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';
 
 
 const SearchSongs = (props) => {
-    const [songs, setSongs] = useState(null);
-    const [paginate, setPaginate] = useState(null);
-    const [page, setPage] = useState(props.page ? props.page : 1);
+  const [songs, setSongs] = useState(null);
+  const [paginate, setPaginate] = useState(null);
+  const [page, setPage] = useState(props.page ? props.page : 1);
 
-    useEffect(() => {
-        setSongs(null);
-        setPaginate(null);
-        loadSongs(props.query, page)
-    }, [props.query, page]);
+  useEffect(() => {
+    setSongs(null);
+    setPaginate(null);
+    loadSongs(props.query, page)
+  }, [props.query, page]);
 
-    const makeLink = page => `/search/song?query=${props.query}&page=${page}`;
+  const makeLink = page => `/search/song?query=${props.query}&page=${page}`;
 
-    const handlePageChange = page => {
-        setSongs(null);
-        setPage(page);
-        props.onPageChange(page);
-    }
+  const handlePageChange = page => {
+    setSongs(null);
+    setPage(page);
+    props.onPageChange(page);
+  }
 
-    const loadSongs = (query, page) => {
-        page = page ? page : 1;
+  const loadSongs = (query, page) => {
+    page = page ? page : 1;
 
-        searchSong(query, page).then((response) => {
-            setSongs(response.recordings);
-            setPaginate(response.paginate);
-        })
-    };
+    searchSong(query, page).then((response) => {
+      setSongs(response.recordings);
+      setPaginate(response.paginate);
+    })
+  };
 
 
-    let songsComponent = <EntityList placeholder={true} size={10}/>;
-    if (songs) {
-        const items = songs.map((song) => {
-          return {
-            'cover': null,
-            'link': `/song/${song.id}`,
-            'title': song.title,
-            'subtitle': song.artist.name
-          };
-        });
-        const list = [{
-          'items': items
-        }]
-        songsComponent = <EntityList list={list}/>
+  let songsComponent = <EntityList placeholder={true} size={10}/>;
+  if (songs) {
+    const items = songs.map((song) => {
+      return {
+        'cover': null,
+        'link': `/song/${song.id}`,
+        'title': song.title,
+        'subtitle': song.artist.name
+      };
+    });
+    const list = [{
+      'items': items
+    }]
+    songsComponent = <EntityList list={list}/>
 
-    }
+  }
 
-    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'>
-                {songsComponent}
-            </ul>
-            {paginateComponent}
-        </Fragment>
-    )
+  return (
+    <Fragment>
+      <ul className='entity_list'>
+        {songsComponent}
+      </ul>
+      {paginateComponent}
+    </Fragment>
+  )
 }
 
 const SearchDiscs = (props) => {
-    const [discs, setDiscs] = useState(null);
-    const [paginate, setPaginate] = useState(null);
-    const [page, setPage] = useState(null);
+  const [discs, setDiscs] = useState(null);
+  const [paginate, setPaginate] = useState(null);
+  const [page, setPage] = useState(null);
 
-    useEffect(_ => {
-        setDiscs(null)
-        setPaginate(null)
-        loadDiscs(props.query, page)
-    }, [props.query, page])
+  useEffect(_ => {
+    setDiscs(null)
+    setPaginate(null)
+    loadDiscs(props.query, page)
+  }, [props.query, page])
 
-    const makeLink = page => `/search/disc?query=${props.query}&page=${page}`;
+  const makeLink = page => `/search/disc?query=${props.query}&page=${page}`;
 
-    const handlePageChange = page => {
-        setDiscs(null);
-        setPage(page);
-        props.onPageChange(page);
-    }
+  const handlePageChange = page => {
+    setDiscs(null);
+    setPage(page);
+    props.onPageChange(page);
+  }
 
-    const loadDiscs = (query, page) => {
-        page = page ? page : 1;
+  const loadDiscs = (query, page) => {
+    page = page ? page : 1;
 
-        searchDisc(query, page, 16).then((response) => {
-            setDiscs(response.discs);
-            setPaginate(response.paginate);
-        })
-    };
+    searchDisc(query, page, 16).then((response) => {
+      setDiscs(response.discs);
+      setPaginate(response.paginate);
+    })
+  };
 
-    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}/>
-    }
+  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}/>
+}
 
-    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 (
+  <Fragment>
+    <ul className='entity_list'>
+      {discsComponent}
+    </ul>
+    {paginateComponent}
+  </Fragment>
+)
 }
 
 const SearchArtists = (props) => {
-    const [artists, setArtist] = useState(null);
-    const [paginate, setPaginate] = useState(null);
-    const [page, setPage] = useState(props.page ? props.page : 1);
+  const [artists, setArtist] = useState(null);
+  const [paginate, setPaginate] = useState(null);
+  const [page, setPage] = useState(props.page ? props.page : 1);
 
-    useEffect(_ => {
-        setArtist(null)
-        setPaginate(null)
-        loadArtists(props.query, page)
-    }, [props.query, page])
+  useEffect(_ => {
+    setArtist(null)
+    setPaginate(null)
+    loadArtists(props.query, page)
+  }, [props.query, page])
 
-    const makeLink = page => `/search/artist?query=${props.query}&page=${page}`;
+  const makeLink = page => `/search/artist?query=${props.query}&page=${page}`;
 
-    const handlePageChange = page => {
-        setArtist(null);
-        setPage(page);
-        props.onPageChange(page);
-    }
+  const handlePageChange = page => {
+    setArtist(null);
+    setPage(page);
+    props.onPageChange(page);
+  }
 
-    const loadArtists = (query, page) => {
-        page = page ? page : 1;
+  const loadArtists = (query, page) => {
+    page = page ? page : 1;
 
-        searchArtist(query, page).then((response) => {
-            setArtist(response.artists);
-            setPaginate(response.paginate);
-        })
-    };
+    searchArtist(query, page).then((response) => {
+      setArtist(response.artists);
+      setPaginate(response.paginate);
+    })
+  };
 
-    let artistsContent = <EntityList placeholder={true} size={10}/>;
-    if (artists) {
-        const items = artists.map((artist) => ({
-          'cover': null,
-          'link': `/artist/${artist.id}`,
-          'title': artist.name,
-          'subtitle': [artist.type, artist.country].filter(Boolean).join(' - ')
-        }));
-        const list = [{
-          'items': items
-        }];
-        artistsContent = <EntityList list={list}/>
-    }
+  let artistsContent = <EntityList placeholder={true} size={10}/>;
+  if (artists) {
+    const items = artists.map((artist) => ({
+      'cover': null,
+      'link': `/artist/${artist.id}`,
+      'title': artist.name,
+      'subtitle': [artist.type, artist.country].filter(Boolean).join(' - ')
+    }));
+    const list = [{
+      'items': items
+    }];
+    artistsContent = <EntityList list={list}/>
+  }
 
-    let paginateContent;
-    if (paginate) {
-        const total = paginate.total;
-        const currentPage = paginate.current_page;
-        const pageLimit = paginate.per_page;
+  let paginateContent;
+  if (paginate) {
+    const total = paginate.total;
+    const currentPage = paginate.current_page;
+    const pageLimit = paginate.per_page;
 
-        paginateContent = <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage} pageNeighbours={2} onPageChanged={handlePageChange} makeLink={makeLink}/>
-    }
+    paginateContent = <Paginate totalRecords={total} pageLimit={pageLimit} currentPage={currentPage} pageNeighbours={2} onPageChanged={handlePageChange} makeLink={makeLink}/>
+  }
 
-    return (
-        <Fragment>
-            <ul className='entity_list'>
-                {artistsContent}
-            </ul>
-            {paginateContent}
-        </Fragment>
-    )
+  return (
+    <Grid>
+      <Row>
+        <Col>
+          <ul className='entity_list'>
+            {artistsContent}
+          </ul>
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          {paginateContent}
+        </Col>
+      </Row>
+    </Grid>
+  )
 }
 
 const SearchTabs = (props) => {
-    const nameToIndex = (name) => {
-        if (name === 'artist') return 0
-        if (name === 'disc') return 1
-        if (name === 'song') return 2
-        else return 0;
-    }
+  const nameToIndex = (name) => {
+    if (name === 'artist') return 0
+    if (name === 'disc') return 1
+    if (name === 'song') return 2
+    else return 0;
+  }
 
-    const indexToName = (index) => {
-        if (index === 0) return 'artist'
-        if (index === 1) return 'disc'
-        if (index === 2) return 'song'
-        else return 'artist';
-    }
+  const indexToName = (index) => {
+    if (index === 0) return 'artist'
+    if (index === 1) return 'disc'
+    if (index === 2) return 'song'
+    else return 'artist';
+  }
 
-    const handleSelect = (index) => {
-        props.onTabChanged(indexToName(index))
-    }
+  const handleSelect = (index) => {
+    props.onTabChanged(indexToName(index))
+  }
 
-    const handlePageChange = (who) => (index) => props.onPageChange(who, index);
+  const handlePageChange = (who) => (index) => props.onPageChange(who, index);
 
-    return (
-        <Tabs selectedIndex={nameToIndex(props.selected)} onSelect={handleSelect}>
-            <TabList className='tabs'>
-                <Tab className='tab' selectedClassName='selected'>Artistas</Tab>
-                <Tab className='tab' selectedClassName='selected'>Discos</Tab>
-                <Tab className='tab' selectedClassName='selected'>Canciones</Tab>
-            </TabList>
-            <TabPanel><SearchArtists query={props.query} page={props.page} onPageChange={handlePageChange('artist')}/></TabPanel>
-            <TabPanel><SearchDiscs query={props.query} page={props.page} onPageChange={handlePageChange('disc')}/></TabPanel>
-            <TabPanel><SearchSongs query={props.query} page={props.page} onPageChange={handlePageChange('song')}/></TabPanel>
-        </Tabs>
-    )
+  return (
+    <Tabs selectedIndex={nameToIndex(props.selected)} onSelect={handleSelect}>
+      <TabList className='tabs'>
+        <Tab className='tab' selectedClassName='selected'>Artistas</Tab>
+        <Tab className='tab' selectedClassName='selected'>Discos</Tab>
+        <Tab className='tab' selectedClassName='selected'>Canciones</Tab>
+      </TabList>
+      <TabPanel><SearchArtists query={props.query} page={props.page} onPageChange={handlePageChange('artist')}/></TabPanel>
+      <TabPanel><SearchDiscs query={props.query} page={props.page} onPageChange={handlePageChange('disc')}/></TabPanel>
+      <TabPanel><SearchSongs query={props.query} page={props.page} onPageChange={handlePageChange('song')}/></TabPanel>
+    </Tabs>
+  )
 }
 
 export const Search = (props) => {
-    const parsedParams = queryString.parse(props.location.search);
-    const [who, setWho] = useState(props.match.params['who'] ? props.match.params['who'] : 'artist')
-    const [query, setQuery] = useState(parsedParams.query)
-    const [page, setPage] = useState(!isNaN(+parsedParams.page) ? +parsedParams.page : 1)
+  const parsedParams = queryString.parse(props.location.search);
+  const [who, setWho] = useState(props.match.params['who'] ? props.match.params['who'] : 'artist')
+  const [query, setQuery] = useState(parsedParams.query)
+  const [page, setPage] = useState(!isNaN(+parsedParams.page) ? +parsedParams.page : 1)
 
-    const navigateTo = (who, query, page) => props.history.push(`/search/${who}?query=${query}&page=${page}`);
+  const navigateTo = (who, query, page) => props.history.push(`/search/${who}?query=${query}&page=${page}`);
 
-    const handleQueryChange = query => {
-        setQuery(query);
-        setPage(1);
-        navigateTo(who, query, 1)
-    };
+  const handleQueryChange = query => {
+    setQuery(query);
+    setPage(1);
+    navigateTo(who, query, 1)
+  };
 
-    const handleTabChange = who => {
-        setWho(who);
-        setPage(1)
-        navigateTo(who, query, 1)
-    };
+  const handleTabChange = who => {
+    setWho(who);
+    setPage(1)
+    navigateTo(who, query, 1)
+  };
 
-    const handlePageChange = (who, page) => {
-        setWho(who);
-        setPage(page);
-        navigateTo(who, query, page);
-    };
+  const handlePageChange = (who, page) => {
+    setWho(who);
+    setPage(page);
+    navigateTo(who, query, page);
+  };
 
-    const content = _ => {
-        if (query) {
-            return <SearchTabs query={query} onTabChanged={handleTabChange} onPageChange={handlePageChange} selected={who} page={page}/>
-        } else {
-            return null;
-        }
+  const content = (() => {
+    if (query) {
+      return <SearchTabs query={query} onTabChanged={handleTabChange} onPageChange={handlePageChange} selected={who} page={page}/>
+    } else {
+      return null;
     }
+  })();
 
-    return (
-        <Fragment>
-            <h1>Búsqueda</h1>
-            <SearchBar query={query} onQueryChanged={handleQueryChange} history={props.history}/>
-            {content()}
-        </Fragment>
-    );
+  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>
+    </Grid>
+  );
 }