diff --git a/src/components/Artist.jsx b/src/components/Artist.jsx index 2c5a5fa..32b6baa 100644 --- a/src/components/Artist.jsx +++ b/src/components/Artist.jsx @@ -3,116 +3,106 @@ import {getArtist, getArtistDiscs} from "../services/entity_service"; import {CoverArt} from './CoverArt'; import {Paginate} from "./Paginate"; import {EntityList} from "./EntityList"; +import {Entity} from "./Entity"; import queryString from "query-string"; const Discs = (props) => { - const discs = props.discs ? props.discs : null; - const paginate = props.paginate ? props.paginate : null; + const discs = props.discs ? props.discs : null; + const paginate = props.paginate ? props.paginate : null; - const handlePageChanged = (page) => { - props.onPageChanged(page); - } + const handlePageChanged = (page) => { + props.onPageChanged(page); + } - let discsComponent = ; - if (discs) { - const items = discs.map((disc) => ({ - 'cover': , - 'link': `/disc/${disc.id}`, - 'title': disc.title, - 'subtitle': disc.artist.name - })); - discsComponent = - } + let discsComponent = ; + if (discs) { + const items = discs.map((disc) => ({ + 'cover': , + 'link': `/disc/${disc.id}`, + 'title': disc.title, + 'subtitle': disc.artist.name + })); + discsComponent = +} - 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 ( -
-

Discos

- {discsComponent} - {paginateContent} -
- ) +return ( +
+

Discos

+ {discsComponent} + {paginateContent} +
+) } const Artist = (props) => { - const artist = props.artist; - if (artist) { - return ( -
-
-

{artist.name}

-

{[artist.type, artist.country].filter(Boolean).join(' - ')}

-
-
    - {artist.tags.map((tag, index) => (
  • {tag.name}
    • ))} -
- -
- -
-
- ) - } else { - return <> - } + const artist = props.artist; + if (artist){ + return (tag.name))} + buttonText='Agregar a mi list'/> + }else { + return + } } export const ArtistView = (props) => { - const parsedParams = queryString.parse(props.location.search); + const parsedParams = queryString.parse(props.location.search); - const [artist, setArtist] = useState(null); - const [discs, setDiscs] = useState(null); - const [discsPaginate, setDiscsPaginate] = useState(null); - const [page, setPage] = useState(!isNaN(+parsedParams.page) ? +parsedParams.page : 1) + const [artist, setArtist] = useState(null); + const [discs, setDiscs] = useState(null); + const [discsPaginate, setDiscsPaginate] = useState(null); + const [page, setPage] = useState(!isNaN(+parsedParams.page) ? +parsedParams.page : 1) - const mbid = props.match.params.mbid; + const mbid = props.match.params.mbid; - useEffect(() => { - if (mbid) { - getArtist(mbid).then((result) => setArtist(result)); - getArtistDiscs(mbid, page, 16).then((result) => { - setDiscs(result.discs); - setDiscsPaginate(result.paginate); - }); - } - }, [mbid, page]) - - const makeLink = (page) => { - return `/artist/${mbid}?page=${page}`; + useEffect(() => { + if (mbid) { + getArtist(mbid).then((result) => setArtist(result)); + getArtistDiscs(mbid, page, 16).then((result) => { + setDiscs(result.discs); + setDiscsPaginate(result.paginate); + }); } + }, [mbid, page]) - const handleDiscPageChanged = (page) => { - setDiscs(null); - setPage(page); + const makeLink = (page) => { + return `/artist/${mbid}?page=${page}`; + } - getArtistDiscs(mbid, page, 16).then((result) => { - setDiscs(result.discs); - setDiscsPaginate(result.paginate); - }); - props.history.push(makeLink(page)); - } + const handleDiscPageChanged = (page) => { + setDiscs(null); + setPage(page); - const handleNavigateToDisc = (disc) => { - console.log(disc); - props.history.push(`/disc/${disc.id}`) - } + getArtistDiscs(mbid, page, 16).then((result) => { + setDiscs(result.discs); + setDiscsPaginate(result.paginate); + }); + props.history.push(makeLink(page)); + } + + const handleNavigateToDisc = (disc) => { + console.log(disc); + props.history.push(`/disc/${disc.id}`) + } - return ( -
- - {artist && } -
- ); + return ( +
+ + {artist && } +
+ ); } diff --git a/src/components/Entity.jsx b/src/components/Entity.jsx new file mode 100644 index 0000000..73e6e30 --- /dev/null +++ b/src/components/Entity.jsx @@ -0,0 +1,34 @@ +import React from "react"; +import "./Entity.scss" + +export const Entity = (props) => { + const hasCover = props.cover; + const hasTags = props.tags && props.tags.length > 0; + const hasButton = props.onButtonClick || props.buttonText + return ( +
+
+
+

{props.title}

+

{props.subtitle}

+
+
+ {hasTags && +
    + {props.tags.map((tag, index) => (
  • {tag}
    • ))} +
+ } +
+ {hasButton && + + } +
+ + {hasCover && +
+ {props.cover} +
+ } +
+ ) +} diff --git a/src/components/Entity.scss b/src/components/Entity.scss new file mode 100644 index 0000000..f61aa7f --- /dev/null +++ b/src/components/Entity.scss @@ -0,0 +1,45 @@ +.entity{ + display: grid; + grid-template-columns: 3fr 1fr; + margin-bottom: 1em; + + .header { + margin-bottom: .5em; + .title { + } + .subtitle { + margin-top: -15px; + } + } + + .body { + margin-bottom: .5em; + .tags { + display: flex; + flex-wrap: wrap; + + .tag { + border-bottom: var(--line-width) solid var(--accent); + margin-right: 1em; + line-height: 1; + margin-bottom: .5em; + font-weight: 500; + } + } + } + + + .cover { + height: 300px; + width: 300px; + } + +} + + +@media (max-width: 700px){ + .entity{ + display: flex; + flex-direction: column-reverse; + } +} diff --git a/src/index.jsx b/src/index.jsx index fb22238..f14c7ec 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -2,7 +2,6 @@ import React, {Fragment} from 'react'; import ReactDOM from 'react-dom'; import {Search} from './components/Search'; import {SearchBar} from "./components/SearchBar"; -import {EntityList} from "./components/EntityList"; import './styles/reset.css'; import './styles/main.scss'; @@ -41,7 +40,6 @@ const App = () => ( - diff --git a/src/styles/main.scss b/src/styles/main.scss index 832456b..ac14ea7 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -213,78 +213,6 @@ ul.pagination { } } -/* Lista de entidades */ -// ul.entity_list { -// display: flex; -// flex-direction: column; -// -// li.artist, li.disc, li.song { -// border-bottom: var(--line-width) var(--gray-1) solid; -// margin-bottom: 1em; -// -// .cover-container { -// width: 200px; -// height: 200px; -// margin: 1em; -// } -// -// &:last-child { -// margin-bottom: auto; -// } -// -// &:hover { -// background-color: var(--gray-1); -// border-bottom: var(--line-width) var(--accent) solid; -// } -// -// a { -// display: flex; -// text-decoration: none; -// color: var(--black); -// align-items: center; -// height: 100%; -// -// .description { -// display: flex; -// flex-direction: column; -// justify-content: center; -// padding-left: 1em; -// -// .small { -// color: var(--gray-4); -// font-size: .8em; -// } -// } -// -// } -// } -// -// li.artist { -// height: 4em; -// } -// -// li.disc { -// height: 14em; -// -// a { -// .release-date { -// display: inline-block; -// font-size: .7em; -// background-color: var(--gray-4);; -// color: var(--white); -// padding: .1rem .5em; -// border-radius: .25em; -// text-align: center; -// line-height: 1; -// } -// } -// } -// -// li.song { -// height: 4em; -// } -// } - .cover-caption { figcaption { display: inline-block; @@ -339,86 +267,6 @@ ul.tabs { } } -/* Artists */ -.artist-view { - .artist { - .title { - h1 { - margin-bottom: 0 - } - - h4 { - margin-top: 0; - margin-bottom: .5em - } - - max-width: 60%; - } - - .button { - margin: .5em auto; - } - - .tags { - display: flex; - flex-wrap: wrap; - - li { - border-bottom: var(--line-width) solid var(--accent); - margin-right: 1em; - line-height: 1; - margin-bottom: .5em; - font-weight: 500; - } - } - - margin-bottom: 1em; - } - - .discs { - .discs-list { - $grid-width: 250px; - $grid-gap: 45px; - - display: grid; - grid-auto-rows: $grid-width; - gap: $grid-gap; - justify-content: start; - align-content: start; - - @for $x from 1 to 5 { - @media (min-width: $grid-width * $x + $grid-gap * 3) { - grid-template-columns: repeat($x, auto); - } - } - - @media (min-width: $grid-width * 4 + $grid-gap * 3) { - justify-content: space-between; - } - - .cover-container { - width: 250px; - height: 250px; - cursor: pointer; - - &:hover{ - .cover-caption figcaption:after { - width: 100%; - } - - .coverart { - transition: all 200ms ease-in-out; - outline: 6px var(--accent) solid; - outline-offset: -4px; - } - } - } - - margin-bottom: 3em; - } - } -} - /* Utils */ .full-width { width: 100%;