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 discs = props.discs ? props.discs : null;
-    const paginate = props.paginate ? props.paginate : null;
+  const paginate = props.paginate ? props.paginate : null;
 
-    const handlePageChanged = (page) => {
+  const handlePageChanged = (page) => {
-        props.onPageChanged(page);
+    props.onPageChanged(page);
-    }
+  }
 
-    let discsComponent = <Fragment/>;
+  let discsComponent = <Fragment/>;
-    if (discs) {
+  if (discs) {
-        const items = discs.map((disc) => ({
+    const items = discs.map((disc) => ({
-          'cover': <CoverArt disc={disc}/>,
+      'cover': <CoverArt disc={disc}/>,
-          'link': `/disc/${disc.id}`,
+    'link': `/disc/${disc.id}`,
-          'title': disc.title,
+    'title': disc.title,
-          'subtitle': disc.artist.name
+    'subtitle': disc.artist.name
-        }));
+  }));
-        discsComponent = <EntityList items={items} grid={true}/>
+  discsComponent = <EntityList items={items} grid={true}/>
-    }
+}
 
-    let paginateContent;
+let paginateContent;
-    if (paginate) {
+if (paginate) {
-        const total = paginate.total;
+  const total = paginate.total;
-        const currentPage = paginate.current_page;
+  const currentPage = paginate.current_page;
-        const pageLimit = paginate.per_page;
+  const pageLimit = paginate.per_page;
 
-        paginateContent = <Paginate totalRecords={total} pageLimit={pageLimit}
+  paginateContent = <Paginate totalRecords={total} pageLimit={pageLimit}
-                                    currentPage={currentPage} pageNeighbours={2}
+    currentPage={currentPage} pageNeighbours={2}
-                                    onPageChanged={handlePageChanged} makeLink={props.makeLink}/>
+    onPageChanged={handlePageChanged} makeLink={props.makeLink}/>
-    }
+}
 
-    return (
+return (
-        <div className='discs'>
+  <div className='discs'>
-            <h2>Discos</h2>
+    <h2>Discos</h2>
-            {discsComponent}
+    {discsComponent}
-            {paginateContent}
+    {paginateContent}
-        </div>
+  </div>
-    )
+)
 }
 
 const Artist = (props) => {
-    const artist = props.artist;
+  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 <></>
-    }
 }
 
 export const ArtistView = (props) => {
-    const parsedParams = queryString.parse(props.location.search);
+  const parsedParams = queryString.parse(props.location.search);
 
-    const [artist, setArtist] = useState(null);
+  const [artist, setArtist] = useState(null);
-    const [discs, setDiscs] = useState(null);
+  const [discs, setDiscs] = useState(null);
-    const [discsPaginate, setDiscsPaginate] = useState(null);
+  const [discsPaginate, setDiscsPaginate] = useState(null);
-    const [page, setPage] = useState(!isNaN(+parsedParams.page) ? +parsedParams.page : 1)
+  const [page, setPage] = useState(!isNaN(+parsedParams.page) ? +parsedParams.page : 1)
 
-    const mbid = props.match.params.mbid;
+  const mbid = props.match.params.mbid;
 
-    useEffect(() => {
+  useEffect(() => {
-        if (mbid) {
+    if (mbid) {
-            getArtist(mbid).then((result) => setArtist(result));
+      getArtist(mbid).then((result) => setArtist(result));
-            getArtistDiscs(mbid, page, 16).then((result) => {
+      getArtistDiscs(mbid, page, 16).then((result) => {
-                setDiscs(result.discs);
+        setDiscs(result.discs);
-                setDiscsPaginate(result.paginate);
+        setDiscsPaginate(result.paginate);
-            });
+      });
-        }
-    }, [mbid, page])
-
-    const makeLink = (page) => {
-        return `/artist/${mbid}?page=${page}`;
     }
+  }, [mbid, page])
 
-    const handleDiscPageChanged = (page) => {
+  const makeLink = (page) => {
-        setDiscs(null);
+    return `/artist/${mbid}?page=${page}`;
-        setPage(page);
+  }
 
-        getArtistDiscs(mbid, page, 16).then((result) => {
+  const handleDiscPageChanged = (page) => {
-            setDiscs(result.discs);
+    setDiscs(null);
-            setDiscsPaginate(result.paginate);
+    setPage(page);
-        });
-        props.history.push(makeLink(page));
-    }
 
-    const handleNavigateToDisc = (disc) => {
+    getArtistDiscs(mbid, page, 16).then((result) => {
-        console.log(disc);
+      setDiscs(result.discs);
-        props.history.push(`/disc/${disc.id}`)
+      setDiscsPaginate(result.paginate);
-    }
+    });
+    props.history.push(makeLink(page));
+  }
+
+  const handleNavigateToDisc = (disc) => {
+    console.log(disc);
+    props.history.push(`/disc/${disc.id}`)
+  }
 
 
-    return (
+  return (
-        <div className='artist-view'>
+    <div className='artist-view'>
-            <Artist artist={artist}/>
+      <Artist artist={artist}/>
-            {artist && <Discs discs={discs} paginate={discsPaginate} onPageChanged={handleDiscPageChanged} makeLink={makeLink} navigateToDisc={handleNavigateToDisc}/>}
+      {artist && <Discs discs={discs} paginate={discsPaginate} onPageChanged={handleDiscPageChanged} makeLink={makeLink} navigateToDisc={handleNavigateToDisc}/>}
-        </div>
+    </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;
+  }
+}

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