Artista usando Entity

src/components/Artist.jsx

@@ -3,6 +3,7 @@ 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";
 
 
@@ -23,10 +24,10 @@ const Discs = (props) => {
     'subtitle': disc.artist.name
   }));
   discsComponent = <EntityList items={items} grid={true}/>
-    }
+}
 
-    let paginateContent;
+let paginateContent;
-    if (paginate) {
+if (paginate) {
   const total = paginate.total;
   const currentPage = paginate.current_page;
   const pageLimit = paginate.per_page;
@@ -34,37 +35,26 @@ const Discs = (props) => {
   paginateContent = <Paginate totalRecords={total} pageLimit={pageLimit}
     currentPage={currentPage} pageNeighbours={2}
     onPageChanged={handlePageChanged} makeLink={props.makeLink}/>
-    }
+}
 
-    return (
+return (
   <div className='discs'>
     <h2>Discos</h2>
     {discsComponent}
     {paginateContent}
   </div>
-    )
+)
 }
 
 const Artist = (props) => {
   const artist = props.artist;
-    if (artist) {
+  if (artist){
-        return (
+    return <Entity title={artist.name}
-            <div className='artist'>
+      subtitle={[artist.type, artist.country].filter(Boolean).join(' - ')}
-                <div className='title'>
+      tags={artist.tags.map((tag) => (tag.name))}
-                    <h1>{artist.name}</h1>
+      buttonText='Agregar a mi list'/>
-                    <h4>{[artist.type, artist.country].filter(Boolean).join(' - ')}</h4>
+  }else {
-                </div>
+    return <Fragment></Fragment>
-                <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 <></>
   }
 }
 

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

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 = () => (
                 <Route path='/search/:who?' component={Search}/>
                 <Route path='/artist/:mbid?' component={ArtistView}/>
                 <Route path='/disc/:mbid?' component={DiscView}/>
-                <Route path='/test' component={EntityList}/>
                 <Route exact path='/' component={Main}/>
                 <Route path='*' component={NoRoute}/>
             </Switch>

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%;