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/Disc.jsx

@@ -0,0 +1,113 @@
+import React, {Fragment, useEffect, useState} from 'react';
+import queryString from "query-string";
+
+import {getDisc, getDiscVersions} from "../services/entity_service";
+
+import {CoverArt} from "../components/CoverArt";
+import {Entity} from "../components/Entity";
+import {EntityList} from "../components/EntityList";
+import {Paginate} from "../components/Paginate";
+
+const capitalize = (string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+
+const Versions = (props) => {
+  const versions = props.versions ? props.versions : null;
+  const paginate = props.paginate ? props.paginate : null;
+
+  const handlePageChanged = (page) => {
+    props.onPageChanged(page);
+  }
+
+  let versionsComponent = <Fragment/>;
+  if(versions) {
+    const items = versions.map((version) => ({
+      'cover': <CoverArt release={version}/>,
+      'link': `/release/${version.id}`,
+      'title': version.title,
+      'subtitle': <Fragment>
+                   <div>{version.date}</div>
+                   <div>{version.country}</div>
+                   <div>{capitalize(version.disambiguation)}</div>
+                   </Fragment>
+
+    }));
+    versionsComponent = <EntityList items={items}/>
+  }
+
+  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 (
+    <Fragment>
+      <h2>Versiones</h2>
+      {versionsComponent}
+      {paginateContent}
+    </Fragment>
+  )
+}
+
+const Disc = (props) => {
+  const disc = props.disc;
+  if (disc){
+    return <Entity title={disc.title}
+      subtitle={`${disc.artist.name} - [${disc.first_release_date}]`}
+      buttonText='Agregar a mi lista'
+      cover={<CoverArt disc={disc}/>}/>
+  }else {
+    return <Fragment></Fragment>
+  }
+}
+
+export const DiscView = (props) => {
+  const mbid = props.match.params.mbid;
+  const parsedParams = queryString.parse(props.location.search);
+
+  const [disc, setDisc] = useState(null);
+  const [versions, setVersions] = useState(null);
+  const [versionsPaginate, setVersionsPaginate] = useState(null);
+  const [page, setPage] = useState(!isNaN(+parsedParams.page) ? +parsedParams.page : 1)
+
+  useEffect(() => {
+    if (mbid) {
+      getDisc(mbid).then((result) => setDisc(result));
+      getDiscVersions(mbid, page).then((result) => {
+        setVersions(result.releases);
+        setVersionsPaginate(result.paginate);
+      });
+    }
+  }, [mbid, page])
+
+  const makeLink = (page) => {
+    return `/disc/${mbid}?page=${page}`;
+  }
+
+  const handleVersionPageChanged = (page) => {
+    setVersions(null);
+    setPage(page);
+    props.history.push(makeLink(page));
+  }
+
+  const handleNavigateToVersion= (disc) => {
+    props.history.push(`/release/${disc.id}`)
+  }
+
+  return (
+    <Fragment>
+      <Disc disc={disc}/>
+      <Versions versions={versions} paginate={versionsPaginate}
+                onPageChanged={handleVersionPageChanged} makeLink={makeLink}
+                navigateToVersion={handleNavigateToVersion}/>
+    </Fragment>
+  )
+}