Movidas vistas a una carpeta distinta de components

Realmente no son lo mismo, un componente es reutilizable y se utiliza en
vistas, la vista es una composicion distintos componentes :3

src/views/Artist.jsx

@@ -0,0 +1,110 @@
+import React, {Fragment, useEffect, useState} from 'react'
+import queryString from "query-string";
+
+import {getArtist, getArtistDiscs} from "../services/entity_service";
+
+import {CoverArt} from '../components/CoverArt';
+import {Paginate} from "../components/Paginate";
+import {EntityList} from "../components/EntityList";
+import {Entity} from "../components/Entity";
+
+
+const Discs = (props) => {
+  const discs = props.discs ? props.discs : null;
+  const paginate = props.paginate ? props.paginate : null;
+
+  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 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}/>
+  }
+
+  return (
+    <div className='discs'>
+      <h2>Discos</h2>
+      {discsComponent}
+      {paginateContent}
+    </div>
+  );
+}
+
+const Artist = (props) => {
+  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 [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;
+
+  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}`;
+  }
+
+  const handleDiscPageChanged = (page) => {
+    setDiscs(null);
+    setPage(page);
+
+    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>
+  );
+}