diff --git a/src/components/Artist.jsx b/src/components/Artist.jsx
index 83d54c5..982328a 100644
--- a/src/components/Artist.jsx
+++ b/src/components/Artist.jsx
@@ -62,18 +62,17 @@ const Artist = (props) => {
if (artist) {
return (
-
-
-
{artist.name}
- {[artist.type, artist.country].filter(Boolean).join(' - ')}
-
-
-
-
+
+
{artist.name}
+ {[artist.type, artist.country].filter(Boolean).join(' - ')}
{artist.tags.map((tag, index) => (- {tag.name}
))}
+
+
+
+
)
} else {
diff --git a/src/components/Disc.jsx b/src/components/Disc.jsx
new file mode 100644
index 0000000..c31f074
--- /dev/null
+++ b/src/components/Disc.jsx
@@ -0,0 +1,46 @@
+import React, {useEffect, useState} from 'react';
+import queryString from "query-string";
+import {getArtist, getArtistDiscs, getDisc} from "../services/entity_service";
+import {CoverArt} from "./CoverArt";
+import './Disc.scss';
+
+const Disc = (props) => {
+ const disc = props.disc;
+ if (disc) {
+ return (
+
+
+
+
{disc.title}
+ {disc.artist[0].name}
+
+
+
+
+
+
+
+ )
+ } else {
+ return <>>
+ }
+}
+
+export const DiscView = (props) => {
+ const parsedParams = queryString.parse(props.location.search);
+ const mbid = props.match.params.mbid;
+
+ const [disc, setDisc] = useState(null);
+
+ useEffect(() => {
+ if (mbid) {
+ getDisc(mbid).then((result) => setDisc(result));
+ }
+ }, [mbid])
+
+
+
+ return (
+
+ )
+}
diff --git a/src/components/Disc.scss b/src/components/Disc.scss
new file mode 100644
index 0000000..8ef7bcc
--- /dev/null
+++ b/src/components/Disc.scss
@@ -0,0 +1,18 @@
+.disc {
+ .title {
+ h1 {
+ margin-bottom: 0
+ }
+ h4 {
+ margin-top: 0;
+ margin-bottom: .5em
+ }
+ }
+
+ .cover-container {
+ width: 250px;
+ height: 250px;
+ min-width: 250px;
+ margin-top: 1em;
+ }
+}
diff --git a/src/index.jsx b/src/index.jsx
index 1514268..f14c7ec 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -10,6 +10,7 @@ import {Nav} from "./components/Nav";
import {BrowserRouter, Switch, Route} from "react-router-dom";
import {ArtistView} from "./components/Artist";
+import {DiscView} from "./components/Disc";
const Main = (props) => {
const navigate = (query) => props.history.push(`/search?query=${query}`);
@@ -38,6 +39,7 @@ const App = () => (
+
diff --git a/src/services/entity_service.js b/src/services/entity_service.js
index 711d83a..3e3ea04 100644
--- a/src/services/entity_service.js
+++ b/src/services/entity_service.js
@@ -8,9 +8,27 @@ export async function getArtist(mbid) {
return response.data
}
-export async function getArtistDiscs(mbid, page = 1, per_page=10) {
+export async function getArtistDiscs(mbid, page = 1, per_page = 10) {
const url = `${baseUrl}/artist/${mbid}/discs?per_page=${per_page}&page=${page}`;
const response = await axios.get(url);
return response.data
}
+
+export async function getDisc(mbid) {
+ const url = `${baseUrl}/disc/${mbid}`;
+ const response = await axios.get(url);
+ return response.data
+}
+
+export async function getDiscVersions(mbid, page = 1, per_page = 30) {
+ const url = `${baseUrl}/disc/${mbid}/releases`;
+ const response = await axios.get(url);
+ return response.data
+}
+
+export async function getReleaseSongs(mbid, page = 1, per_page = 50) {
+ const url = `${baseUrl}/release/${mbid}/recordings`;
+ const response = await axios.get(url);
+ return response.data
+}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 34d3cc3..a55f0d3 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -152,6 +152,7 @@ ul.pagination {
display: flex;
margin: 1rem auto;
justify-content: space-between;
+ font-weight: 500;
.page-center {
display: flex;
@@ -355,7 +356,7 @@ ul.tabs {
}
.button {
- margin-bottom: 1em;
+ margin: .5em auto;
}
.tags {
@@ -369,9 +370,9 @@ ul.tabs {
margin-bottom: .5em;
font-weight: 500;
}
-
- margin-bottom: 2em;
}
+
+ margin-bottom: 1em;
}
.discs {
@@ -444,7 +445,6 @@ ul.tabs {
.space-between {
display: flex;
justify-content: space-between;
- align-items: center;
@media (max-width: 767px) {
justify-content: flex-start;