From 8ed4ad16e120912134011701f08de912d5fe6072 Mon Sep 17 00:00:00 2001 From: Daniel Cortes Date: Fri, 19 Jun 2020 14:04:04 -0400 Subject: [PATCH] Issue #16: Grid en search y recomended --- src/components/Grid.jsx | 15 + .../grid.scss => components/Grid.scss} | 2 +- src/components/SearchBar.scss | 3 - src/index.jsx | 1 - src/styles/tabs.scss | 4 +- src/views/Recomended.jsx | 25 +- src/views/Search.jsx | 437 +++++++++--------- 7 files changed, 258 insertions(+), 229 deletions(-) create mode 100644 src/components/Grid.jsx rename src/{styles/grid.scss => components/Grid.scss} (97%) diff --git a/src/components/Grid.jsx b/src/components/Grid.jsx new file mode 100644 index 0000000..b0a3a5b --- /dev/null +++ b/src/components/Grid.jsx @@ -0,0 +1,15 @@ +import React from 'react'; + +import './Grid.scss'; + +export const Col = (props) => { + return
{props.children}
+} + +export const Row = (props) => { + return
{props.children}
+} + +export const Grid = (props) => { + return
{props.children}
+} diff --git a/src/styles/grid.scss b/src/components/Grid.scss similarity index 97% rename from src/styles/grid.scss rename to src/components/Grid.scss index 51c54b7..addafe4 100644 --- a/src/styles/grid.scss +++ b/src/components/Grid.scss @@ -1,5 +1,5 @@ .grid { - --gutter: 1em; + --gutter: 1rem; width: 100%; .row { diff --git a/src/components/SearchBar.scss b/src/components/SearchBar.scss index b0dc3d9..d318a98 100644 --- a/src/components/SearchBar.scss +++ b/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; diff --git a/src/index.jsx b/src/index.jsx index cb36a76..512d059 100644 --- a/src/index.jsx +++ b/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"; diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index b29214d..64dabfb 100644 --- a/src/styles/tabs.scss +++ b/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; diff --git a/src/views/Recomended.jsx b/src/views/Recomended.jsx index 1e58f9b..8f824be 100644 --- a/src/views/Recomended.jsx +++ b/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 ( -
-
-
+ + +

Artistas Populares

-
-
+ +

Canciones Populares

-
-
-
-
+ + + +

Discos Populares

-
-
-
+ + + ) } diff --git a/src/views/Search.jsx b/src/views/Search.jsx index 2c26fb2..6cfde70 100644 --- a/src/views/Search.jsx +++ b/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 = ; - 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 = + let songsComponent = ; + 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 = - } + } - 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 = - } + paginateComponent = + } - return ( - -
    - {songsComponent} -
- {paginateComponent} - - ) + return ( + +
    + {songsComponent} +
+ {paginateComponent} + + ) } 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 = ; - if (discs) { - const items = discs.map((disc) => ({ - 'cover': , - 'link': `/disc/${disc.id}`, - 'title': disc.title, - 'subtitle': disc.artist.name - })); - const list = [{ - 'items': items - }] - discsComponent = - } + let discsComponent = ; + if (discs) { + const items = discs.map((disc) => ({ + 'cover': , + 'link': `/disc/${disc.id}`, + 'title': disc.title, + 'subtitle': disc.artist.name + })); + const list = [{ + 'items': items + }] + discsComponent = +} - 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 = - } + paginateComponent = +} - return ( - -
    - {discsComponent} -
- {paginateComponent} - - ) +return ( + +
    + {discsComponent} +
+ {paginateComponent} + +) } 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 = ; - 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 = - } + let artistsContent = ; + 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 = + } - 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 = - } + paginateContent = + } - return ( - -
    - {artistsContent} -
- {paginateContent} - - ) + return ( + + + +
    + {artistsContent} +
+ + + + + {paginateContent} + + + + ) } 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 ( - - - Artistas - Discos - Canciones - - - - - - ) + return ( + + + Artistas + Discos + Canciones + + + + + + ) } 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 - } else { - return null; - } + const content = (() => { + if (query) { + return + } else { + return null; } + })(); - return ( - -

Búsqueda

- - {content()} - - ); + return ( + +

Búsqueda

 + + + + + + + + {content} + + + + ); }