Artista usando Entity

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 = <Fragment/>;
-    if (discs) {
-        const items = discs.map((disc) => ({
-          'cover': <CoverArt disc={disc}/>,
-          'link': `/disc/${disc.id}`,
-          'title': disc.title,
-          'subtitle': disc.artist.name
-        }));
-        discsComponent = <EntityList items={items} grid={true}/>
-    }
+  let discsComponent = <Fragment/>;
+  if (discs) {
+    const items = discs.map((disc) => ({
+      'cover': <CoverArt disc={disc}/>,
+    'link': `/disc/${disc.id}`,
+    'title': disc.title,
+    'subtitle': disc.artist.name
+  }));
+  discsComponent = <EntityList items={items} grid={true}/>
+}
 
-    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={handlePageChanged} makeLink={props.makeLink}/>
-    }
+  paginateContent = <Paginate totalRecords={total} pageLimit={pageLimit}
+    currentPage={currentPage} pageNeighbours={2}
+    onPageChanged={handlePageChanged} makeLink={props.makeLink}/>
+}
 
-    return (
-        <div className='discs'>
-            <h2>Discos</h2>
-            {discsComponent}
-            {paginateContent}
-        </div>
-    )
+return (
+  <div className='discs'>
+    <h2>Discos</h2>
+    {discsComponent}
+    {paginateContent}
+  </div>
+)
 }
 
 const Artist = (props) => {
-    const artist = props.artist;
-    if (artist) {
-        return (
-            <div className='artist'>
-                <div className='title'>
-                    <h1>{artist.name}</h1>
-                    <h4>{[artist.type, artist.country].filter(Boolean).join(' - ')}</h4>
-                </div>
-                <ul className='tags'>
-                    {artist.tags.map((tag, index) => (<li key={index}>{tag.name}</li>))}
-                </ul>
-
-                <div>
-                    <button className='button'>Agregar a mi Lista</button>
-                </div>
-            </div>
-        )
-    } else {
-        return <></>
-    }
+  const artist = props.artist;
+  if (artist){
+    return <Entity title={artist.name}
+      subtitle={[artist.type, artist.country].filter(Boolean).join(' - ')}
+      tags={artist.tags.map((tag) => (tag.name))}
+      buttonText='Agregar a mi list'/>
+  }else {
+    return <Fragment></Fragment>
+  }
 }
 
 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 (
-        <div className='artist-view'>
-            <Artist artist={artist}/>
-            {artist && <Discs discs={discs} paginate={discsPaginate} onPageChanged={handleDiscPageChanged} makeLink={makeLink} navigateToDisc={handleNavigateToDisc}/>}
-        </div>
-    );
+  return (
+    <div className='artist-view'>
+      <Artist artist={artist}/>
+      {artist && <Discs discs={discs} paginate={discsPaginate} onPageChanged={handleDiscPageChanged} makeLink={makeLink} navigateToDisc={handleNavigateToDisc}/>}
+    </div>
+  );
 }

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 (
+    <div className='entity'>
+      <div>
+        <div className='header'>
+          <h1 className='title'>{props.title}</h1>
+          <h4 className='subtitle'>{props.subtitle}</h4>
+        </div>
+        <div className='body'>
+          {hasTags &&
+            <ul className='tags'>
+              {props.tags.map((tag, index) => (<li className='tag' key={index}>{tag}</li>))}
+            </ul>
+          }
+        </div>
+        {hasButton &&
+          <button className='button' onClick={props.onButtonClick}>{props.buttonText}</button>
+        }
+      </div>
+
+      {hasCover &&
+        <div className='cover'>
+          {props.cover}
+        </div>
+      }
+    </div>
+  )
+}

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;
+  }
+}