0.0.18

- Add MBID/Spotify Autolinking if track exists
- Add Genre table + .go files

web/src/App.css

@@ -44,6 +44,11 @@ html, body {
   color: white;
 }
 
+.pageBody {
+  padding: 20px 5px 5px 5px;
+  font-size: 16pt;
+}
+
 .App-link {
   color: #61dafb;
 }

web/src/App.js

@@ -3,6 +3,9 @@ import Home from './Pages/Home';
 import About from './Pages/About';
 import Dashboard from './Pages/Dashboard';
 import Profile from './Pages/Profile';
+import Artist from './Pages/Artist';
+import Album from './Pages/Album';
+import Track from './Pages/Track';
 import User from './Pages/User';
 import Admin from './Pages/Admin';
 import Login from './Pages/Login';
@@ -33,6 +36,9 @@ const App = () => {
           <Route path="/dashboard" component={Dashboard} />
           <Route path="/user" component={User} />
           <Route path="/u/:uuid" component={Profile} />
+          <Route path="/artist/:uuid" component={Artist} />
+          <Route path="/album/:uuid" component={Album} />
+          <Route path="/track/:uuid" component={Track} />
 
           <Route path="/admin" component={Admin} />
 

web/src/Pages/About.css

@@ -1,4 +0,0 @@
-.aboutBody {
-    padding: 20px 0px 0px 0px;
-    font-size: 16pt;
-}

web/src/Pages/About.js

@@ -12,7 +12,7 @@ const About = () => {
         Used to track your listening history and build a profile to discover new music.
       </p>
       <a
-        className="aboutBody"
+        className="pageBody"
         href="https://gitlab.com/idanoo/go-scrobble"
         target="_blank"
         rel="noopener noreferrer"

web/src/Pages/Admin.css

@@ -1,9 +1,3 @@
-.adminBody {
-    padding: 20px 5px 5px 5px;
-    font-size: 16pt;
-    width: 300px;
-}
-
 .adminFields {
     width: 100%;
 }

web/src/Pages/Admin.js

@@ -1,7 +1,7 @@
 import React, { useContext, useState, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import '../App.css';
-import './Login.css';
+import './Admin.css';
 import { Button } from 'reactstrap';
 import { Formik, Form, Field } from 'formik';
 import ScaleLoader from 'react-spinners/ScaleLoader';
@@ -54,7 +54,7 @@ const Admin = () => {
       <h1>
         Admin Panel
       </h1>
-      <div className="loginBody">
+      <div className="pageBody">
         <Formik
           initialValues={configs}
           onSubmit={(values) => postConfigs(values, toggle)}

web/src/Pages/Album.js

@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from 'react';
+import '../App.css';
+import './Album.css';
+import ScaleLoader from 'react-spinners/ScaleLoader';
+import ScrobbleTable from '../Components/ScrobbleTable'
+
+const Album = (route) => {
+  const [loading, setLoading] = useState(true);
+  const [profile, setProfile] = useState({});
+
+  let album = false;
+  if (route && route.match && route.match.params && route.match.params.uuid) {
+    album = route.match.params.uuid;
+  } else {
+    album = false;
+  }
+
+  useEffect(() => {
+    if (!album) {
+      return false;
+    }
+
+    // getProfile(username)
+    //   .then(data => {
+    //     setProfile(data);
+    //     console.log(data)
+    //     setLoading(false);
+    //   })
+  }, [album])
+
+  if (loading) {
+    return (
+      <div className="pageWrapper">
+        <ScaleLoader color="#6AD7E5" />
+      </div>
+    )
+  }
+
+  if (!album || !album) {
+    return (
+      <div className="pageWrapper">
+        Unable to fetch user
+      </div>
+    )
+  }
+
+  return (
+    <div className="pageWrapper">
+      <h1>
+        {album}
+      </h1>
+      <div className="pageBody">
+        Album
+      </div>
+    </div>
+  );
+}
+
+export default Album;

web/src/Pages/Artist.js

@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from 'react';
+import '../App.css';
+import './Artist.css';
+import ScaleLoader from 'react-spinners/ScaleLoader';
+import ScrobbleTable from '../Components/ScrobbleTable'
+
+const Artist = (route) => {
+  const [loading, setLoading] = useState(true);
+  const [profile, setProfile] = useState({});
+
+  let artist = false;
+  if (route && route.match && route.match.params && route.match.params.uuid) {
+    artist = route.match.params.uuid;
+  } else {
+    artist = false;
+  }
+
+  useEffect(() => {
+    if (!artist) {
+      return false;
+    }
+
+    // getProfile(username)
+    //   .then(data => {
+    //     setProfile(data);
+    //     console.log(data)
+    //     setLoading(false);
+    //   })
+  }, [artist])
+
+  if (loading) {
+    return (
+      <div className="pageWrapper">
+        <ScaleLoader color="#6AD7E5" />
+      </div>
+    )
+  }
+
+  if (!artist || !artist) {
+    return (
+      <div className="pageWrapper">
+        Unable to fetch user
+      </div>
+    )
+  }
+
+  return (
+    <div className="pageWrapper">
+      <h1>
+        {artist}
+      </h1>
+      <div className="pageBody">
+        Artist
+      </div>
+    </div>
+  );
+}
+
+export default Artist;

web/src/Pages/Dashboard.css

@@ -1,4 +0,0 @@
-.dashboardBody {
-  padding: 20px 5px 5px 5px;
-  font-size: 16pt;
-}

web/src/Pages/Dashboard.js

@@ -42,7 +42,7 @@ const Dashboard = () => {
       <h1>
         {user.username}'s Dashboard!
       </h1>
-      <div className="dashboardBody">
+      <div className="pageBody">
       {loading
         ? <ScaleLoader color="#6AD7E5" size={60} />
         : <ScrobbleTable data={dashboardData.items} />

web/src/Pages/Login.css

@@ -1,9 +1,3 @@
-.loginBody {
-    padding: 20px 5px 5px 5px;
-    font-size: 16pt;
-    width: 300px;
-}
-
 .loginFields {
     width: 100%;
 }

web/src/Pages/Login.js

@@ -25,7 +25,7 @@ const Login = () => {
       <h1>
         Login
       </h1>
-      <div className="loginBody">
+      <div className="pageBody">
         <Formik
           initialValues={{ username: '', password: '' }}
           onSubmit={values => Login(values)}

web/src/Pages/Profile.css

@@ -1,4 +0,0 @@
-.profileBody {
-  padding: 20px 5px 5px 5px;
-  font-size: 16pt;
-}

web/src/Pages/Profile.js

@@ -50,7 +50,7 @@ const Profile = (route) => {
       <h1>
         {profile.username}'s Profile
       </h1>
-      <div className="profileBody">
+      <div className="pageBody">
         Last 10 scrobbles...<br/>
         <ScrobbleTable data={profile.scrobbles}/>
       </div>

web/src/Pages/Register.css

@@ -1,9 +1,3 @@
-.registerBody {
-    padding: 20px 5px 5px 5px;
-    font-size: 16pt;
-    width: 300px;
-}
-
 .registerFields {
     width: 100%;
 }

web/src/Pages/Register.js

@@ -47,7 +47,7 @@ const Register = () => {
           <h1>
           Register
           </h1>
-          <div className="registerBody">
+          <div className="pageBody">
             <Formik
               initialValues={{ username: '', email: '', password: '', passwordconfirm: '' }}
               onSubmit={async values => Register(values)}

web/src/Pages/Reset.css

@@ -1,9 +1,3 @@
-.resetBody {
-    padding: 20px 5px 5px 5px;
-    font-size: 16pt;
-    width: 300px;
-}
-
 .resetFields {
     width: 100%;
 }

web/src/Pages/Reset.js

@@ -64,7 +64,7 @@ const Reset = (route) => {
         <h1>
           Reset Password
         </h1>
-        <div className="loginBody">
+        <div className="pageBody">
           <Formik
             initialValues={{ email: '' }}
             onSubmit={values => sendReset(values)}

web/src/Pages/Settings.js

@@ -8,7 +8,7 @@ const Settings = () => {
       <h1>
         Settings
       </h1>
-      <div className="loginBody">
+      <div className="pageBody">
       <p>
         All the settings
       </p>

web/src/Pages/Track.js

@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from 'react';
+import '../App.css';
+import './Track.css';
+import ScaleLoader from 'react-spinners/ScaleLoader';
+import ScrobbleTable from '../Components/ScrobbleTable'
+
+const Track = (route) => {
+  const [loading, setLoading] = useState(true);
+  const [profile, setProfile] = useState({});
+
+  let artist = false;
+  if (route && route.match && route.match.params && route.match.params.uuid) {
+    artist = route.match.params.uuid;
+  } else {
+    artist = false;
+  }
+
+  useEffect(() => {
+    if (!artist) {
+      return false;
+    }
+
+    // getProfile(username)
+    //   .then(data => {
+    //     setProfile(data);
+    //     console.log(data)
+    //     setLoading(false);
+    //   })
+  }, [artist])
+
+  if (loading) {
+    return (
+      <div className="pageWrapper">
+        <ScaleLoader color="#6AD7E5" />
+      </div>
+    )
+  }
+
+  if (!artist || !artist) {
+    return (
+      <div className="pageWrapper">
+        Unable to fetch user
+      </div>
+    )
+  }
+
+  return (
+    <div className="pageWrapper">
+      <h1>
+        {artist}
+      </h1>
+      <div className="pageBody">
+        Artist
+      </div>
+    </div>
+  );
+}
+
+export default Track;

web/src/Pages/User.css

@@ -1,8 +1,3 @@
-.userBody {
-  padding: 20px 5px 5px 5px;
-  font-size: 16pt;
-}
-
 .userDropdown {
   color: #282C34;
   font-size: 12pt;

web/src/Pages/User.js

@@ -95,7 +95,7 @@ const User = () => {
       <h1>
         Welcome {userdata.username}
       </h1>
-      <p className="userBody">
+      <p className="pageBody">
       Timezone<br/>
       <TimezoneSelect
           className="userDropdown"