0.0.19

- Tidy init/goscrobble.service
- Add routers for Artist/Album/Track endpoints + basic pages
- Move UUID generation into Go so we don't have to query the record!! Wooo!

web/src/Api/index.js

@@ -11,6 +11,9 @@ function getHeaders() {
     if (user.exp < unixtime) {
       // TODO: Handle expiry nicer
       toast.warning("Session expired. Please log in again")
+      // localStorage.removeItem('user');
+      // window.location.reload();
+      return {};
     }
 
     return { Authorization: 'Bearer ' + user.jwt };
@@ -252,3 +255,30 @@ export const getServerInfo = () => {
     return handleErrorResp(error)
   });
 }
+
+export const getArtist = (uuid) => {
+  return axios.get(process.env.REACT_APP_API_URL + "artist/" + uuid).then(
+    (data) => {
+      return data.data;
+  }).catch((error) => {
+    return handleErrorResp(error)
+  });
+};
+
+export const getAlbum = (uuid) => {
+  return axios.get(process.env.REACT_APP_API_URL + "album/" + uuid).then(
+    (data) => {
+      return data.data;
+  }).catch((error) => {
+    return handleErrorResp(error)
+  });
+};
+
+export const getTrack = (uuid) => {
+  return axios.get(process.env.REACT_APP_API_URL + "track/" + uuid).then(
+    (data) => {
+      return data.data;
+  }).catch((error) => {
+    return handleErrorResp(error)
+  });
+};

web/src/Components/Navigation.js

@@ -13,7 +13,7 @@ const menuItems = [
 
 const loggedInMenuItems = [
   'Dashboard',
-  'About',
+  'Docs',
 ]
 
 const isMobile = () => {

web/src/Pages/About.css

@@ -0,0 +1 @@
+

web/src/Pages/Album.js

@@ -2,31 +2,30 @@ import React, { useState, useEffect } from 'react';
 import '../App.css';
 import './Album.css';
 import ScaleLoader from 'react-spinners/ScaleLoader';
-import ScrobbleTable from '../Components/ScrobbleTable'
+import { getAlbum } from '../Api/index'
 
 const Album = (route) => {
   const [loading, setLoading] = useState(true);
-  const [profile, setProfile] = useState({});
+  const [album, setAlbum] = useState({});
 
-  let album = false;
+  let albumUUID = false;
   if (route && route.match && route.match.params && route.match.params.uuid) {
-    album = route.match.params.uuid;
+    albumUUID = route.match.params.uuid;
   } else {
-    album = false;
+    albumUUID = false;
   }
 
   useEffect(() => {
-    if (!album) {
+    if (!albumUUID) {
       return false;
     }
 
-    // getProfile(username)
-    //   .then(data => {
-    //     setProfile(data);
-    //     console.log(data)
-    //     setLoading(false);
-    //   })
-  }, [album])
+    getAlbum(albumUUID)
+      .then(data => {
+        setAlbum(data);
+        setLoading(false);
+      })
+  }, [albumUUID])
 
   if (loading) {
     return (
@@ -36,7 +35,7 @@ const Album = (route) => {
     )
   }
 
-  if (!album || !album) {
+  if (!albumUUID || !album) {
     return (
       <div className="pageWrapper">
         Unable to fetch user
@@ -47,10 +46,11 @@ const Album = (route) => {
   return (
     <div className="pageWrapper">
       <h1>
-        {album}
+        {album.name}
       </h1>
       <div className="pageBody">
-        Album
+        MusicBrainzId: {album.mbid}<br/>
+        SpotifyID: {album.spotify_id}
       </div>
     </div>
   );

web/src/Pages/Artist.js

@@ -2,31 +2,30 @@ import React, { useState, useEffect } from 'react';
 import '../App.css';
 import './Artist.css';
 import ScaleLoader from 'react-spinners/ScaleLoader';
-import ScrobbleTable from '../Components/ScrobbleTable'
+import { getArtist } from '../Api/index'
 
 const Artist = (route) => {
   const [loading, setLoading] = useState(true);
-  const [profile, setProfile] = useState({});
+  const [artist, setArtist] = useState({});
 
-  let artist = false;
+  let artistUUID = false;
   if (route && route.match && route.match.params && route.match.params.uuid) {
-    artist = route.match.params.uuid;
+    artistUUID = route.match.params.uuid;
   } else {
-    artist = false;
+    artistUUID = false;
   }
 
   useEffect(() => {
-    if (!artist) {
+    if (!artistUUID) {
       return false;
     }
 
-    // getProfile(username)
-    //   .then(data => {
-    //     setProfile(data);
-    //     console.log(data)
-    //     setLoading(false);
-    //   })
-  }, [artist])
+    getArtist(artistUUID)
+      .then(data => {
+        setArtist(data);
+        setLoading(false);
+      })
+  }, [artistUUID])
 
   if (loading) {
     return (
@@ -36,7 +35,7 @@ const Artist = (route) => {
     )
   }
 
-  if (!artist || !artist) {
+  if (!artistUUID || !artist) {
     return (
       <div className="pageWrapper">
         Unable to fetch user
@@ -47,10 +46,11 @@ const Artist = (route) => {
   return (
     <div className="pageWrapper">
       <h1>
-        {artist}
+        {artist.name}
       </h1>
       <div className="pageBody">
-        Artist
+        MusicBrainzId: {artist.mbid}<br/>
+        SpotifyID: {artist.spotify_id}
       </div>
     </div>
   );

web/src/Pages/Docs.css

@@ -0,0 +1 @@
+

web/src/Pages/Docs.js

@@ -0,0 +1,25 @@
+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

@@ -2,31 +2,30 @@ import React, { useState, useEffect } from 'react';
 import '../App.css';
 import './Track.css';
 import ScaleLoader from 'react-spinners/ScaleLoader';
-import ScrobbleTable from '../Components/ScrobbleTable'
+import { getTrack } from '../Api/index'
 
 const Track = (route) => {
   const [loading, setLoading] = useState(true);
-  const [profile, setProfile] = useState({});
+  const [track, setTrack] = useState({});
 
-  let artist = false;
+  let trackUUID = false;
   if (route && route.match && route.match.params && route.match.params.uuid) {
-    artist = route.match.params.uuid;
+    trackUUID = route.match.params.uuid;
   } else {
-    artist = false;
+    trackUUID = false;
   }
 
   useEffect(() => {
-    if (!artist) {
+    if (!trackUUID) {
       return false;
     }
 
-    // getProfile(username)
-    //   .then(data => {
-    //     setProfile(data);
-    //     console.log(data)
-    //     setLoading(false);
-    //   })
-  }, [artist])
+    getTrack(trackUUID)
+      .then(data => {
+        setTrack(data);
+        setLoading(false);
+      })
+  }, [trackUUID])
 
   if (loading) {
     return (
@@ -36,7 +35,7 @@ const Track = (route) => {
     )
   }
 
-  if (!artist || !artist) {
+  if (!trackUUID || !track) {
     return (
       <div className="pageWrapper">
         Unable to fetch user
@@ -44,13 +43,21 @@ const Track = (route) => {
     )
   }
 
+  let length = "0";
+  if (track.length !== '') {
+    length = new Date(track.length * 1000).toISOString().substr(11, 8)
+  }
+
+
   return (
     <div className="pageWrapper">
       <h1>
-        {artist}
+        {track.name}
       </h1>
       <div className="pageBody">
-        Artist
+        MusicBrainzId: {track.mbid}<br/>
+        SpotifyID: {track.spotify_id}<br/>
+        Track Length: {length}
       </div>
     </div>
   );

web/src/Pages/User.js

@@ -8,7 +8,7 @@ import { getUser, patchUser } from '../Api/index'
 import { Button } from 'reactstrap';
 import { confirmAlert } from 'react-confirm-alert';
 import 'react-confirm-alert/src/react-confirm-alert.css';
-import { spotifyConnectionRequest, spotifyDisonnectionRequest, resetScrobbleToken } from '../Api/index'
+import { spotifyConnectionRequest, spotifyDisonnectionRequest } from '../Api/index'
 import TimezoneSelect from 'react-timezone-select'
 
 const User = () => {