0.0.32 Flesh out track page

web/src/Api/index.js

@@ -354,4 +354,13 @@ export const getTopArtists = (uuid) => {
   }).catch((error) => {
     return handleErrorResp(error)
   });
+}
+
+export const getTopUsersForTrack = (uuid) => {
+  return axios.get(process.env.REACT_APP_API_URL + "/api/v1/tracks/" + uuid + "/top").then(
+    (data) => {
+      return data.data;
+  }).catch((error) => {
+    return handleErrorResp(error)
+  });
 }

web/src/App.css

@@ -1,5 +1,7 @@
 html, body {
   background-color: #282c34;
+  /** WHY DOES THIS DEFAULT TO 1.5 */
+  line-height: 1.3!important;
 }
 
 .App {

web/src/Components/Navigation.js

@@ -8,7 +8,7 @@ import AuthContext from '../Contexts/AuthContext';
 
 const menuItems = [
   'Home',
-  'About',
+  // 'About',
 ];
 
 const loggedInMenuItems = [

web/src/Components/TopUserTable.js

@@ -0,0 +1,56 @@
+import { Link } from 'react-router-dom';
+import './TopUserTable.css'
+import React, { useState, useEffect } from 'react';
+import ScaleLoader from 'react-spinners/ScaleLoader';
+import { getTopUsersForTrack } from '../Api/index'
+
+const TopUserTable = (props) => {
+    const [loading, setLoading] = useState(true);
+    const [data, setData] = useState({});
+
+
+    useEffect(() => {
+        if (!props.uuid) {
+          return false;
+        }
+
+        getTopUsersForTrack(props.uuid)
+          .then(data => {
+            setData(data);
+            setLoading(false);
+          })
+      }, [props.uuid])
+
+    if (loading) {
+        return (
+          <div className="pageWrapper">
+            <ScaleLoader color="#6AD7E5" />
+          </div>
+        )
+      }
+
+    return (
+        <div style={{
+         width: `100%`,
+         display: `flex`,
+         flexWrap: `wrap`,
+         marginLeft: `20px`,
+         textAlign: `left`,
+        }}>
+         {
+            data.items &&
+            data.items.map(function (element) {
+               return <div style={{width: `100%`, padding: `2px`}} key={"box" + props.uuid}>
+                    <Link
+                        key={"user" + element.user_uuid}
+                        to={"/u/"+element.user_name}
+                     >{element.user_name}</Link> ({element.count})
+               </div>;
+
+            })
+         }
+      </div>
+    );
+}
+
+export default TopUserTable;

web/src/Pages/Docs.css

@@ -1 +0,0 @@
-

web/src/Pages/Docs.js

@@ -1,25 +0,0 @@
-import '../App.css';
-import './Docs.css';
-
-const Docs = () => {
-  return (
-    <div className="pageWrapper">
-      <h1>
-        Documentation
-      </h1>
-      <p className="aboutBody">
-        Go-Scrobble is an open source music scorbbling service written in Go and React.<br/>
-        Used to track your listening history and build a profile to discover new music.
-      </p>
-      <a
-        className="pageBody"
-        href="https://gitlab.com/idanoo/go-scrobble"
-        target="_blank"
-        rel="noopener noreferrer"
-      >gitlab.com/idanoo/go-scrobble
-      </a>
-    </div>
-  );
-}
-
-export default Docs;

web/src/Pages/Track.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import '../App.css';
 import './Track.css';
+import TopUserTable from '../Components/TopUserTable';
 import ScaleLoader from 'react-spinners/ScaleLoader';
 import { getTrack } from '../Api/index'
 import { Link } from 'react-router-dom';
@@ -80,22 +81,24 @@ const Track = (route) => {
       <div className="pageBody">
         <div style={{display: `flex`, flexWrap: `wrap`, textAlign: `center`}}>
           <div style={{width: `300px`, padding: `0 10px 10px 10px`, textAlign: `left`}}>
-
-          <span style={{fontSize: '14pt'}}>
-            {artists}
-          </span>
-          <br/>
-          <span style={{fontSize: '12pt'}}>
-            {albums}
-          </span>
-          <img src={process.env.REACT_APP_API_URL + "/img/" + track.img + "_full.jpg"} alt={track.name} style={{maxWidth: `300px`, maxHeight: `300px`}}/><br/><br/>
+            <img src={process.env.REACT_APP_API_URL + "/img/" + track.img + "_full.jpg"} alt={track.name} style={{maxWidth: `300px`, maxHeight: `300px`}}/>
+          </div>
+          <div style={{width: `290px`, padding: `0 10px 10px 10px`, margin: `0 5px 0 5px`, textAlign: `left`}}>
+            <span style={{fontSize: '14pt'}}>
+              {artists}
+            </span>
+            <br/>
+            <span style={{fontSize: '14pt', textDecoration: 'none'}}>
+              {albums}
+            </span>
+            <br/><br/>
             {track.mbid && <a rel="noreferrer" target="_blank" href={"https://musicbrainz.org/track/" + track.mbid}>Open on MusicBrainz<br/></a>}
             {track.spotify_id && <a rel="noreferrer" target="_blank" href={"https://open.spotify.com/track/" + track.spotify_id}>Open on Spotify<br/></a>}
-          Track Length: {length && length}
+            {length && <span>Track Length: {length}</span>}
           </div>
-          <div style={{width: `600px`, padding: `0 10px 10px 10px`}}>
-            <h3>Top Users</h3>
-            <br/>
+          <div style={{width: `290px`, padding: `0 10px 10px 10px`}}>
+            <h3>Top 10 Scrobblers</h3>
+            <TopUserTable uuid={track.uuid}/>
           </div>
         </div>
       </div>

web/src/Pages/User.css

@@ -12,6 +12,7 @@
 .modal {
   font-size: 12px;
 }
+
 .modal > .header {
   width: 100%;
   border-bottom: 1px solid gray;