0.0.22

- Rework navbar + user pages

.gitlab-ci.yml

@@ -3,7 +3,7 @@ stages:
  - bundle
 
 variables:
-  VERSION: 0.0.21
+  VERSION: 0.0.22
 
 build-go:
   image: golang:1.16.2

docs/changelog.md

@@ -1,3 +1,6 @@
+# 0.0.22
+- Rework navbar + user pages
+
 # 0.0.21
 - Add ez deploy script
 - Half implemented JWT refresh tokens, need to finish JS implementation

internal/goscrobble/server.go

@@ -587,7 +587,7 @@ func getServerInfo(w http.ResponseWriter, r *http.Request) {
 	}
 
 	info := ServerInfo{
-		Version:             "0.0.21",
+		Version:             "0.0.22",
 		RegistrationEnabled: cachedRegistrationEnabled,
 	}
 

web/src/Api/index.js

@@ -1,8 +1,6 @@
 import axios from 'axios';
 import jwt from 'jwt-decode'
 import { toast } from 'react-toastify';
-import AuthContext from '../Contexts/AuthContext';
-import { useContext } from 'react';
 
 function getHeaders() {
   const user = JSON.parse(localStorage.getItem('user'));

web/src/App.css

@@ -35,7 +35,7 @@ html, body {
 
 .pageWrapper {
   background-color: #282c34;
-  padding: 100px 15px 0 15px;
+  padding: 90px 15px 0 15px;
   min-height: 100vh;
   display: flex;
   flex-direction: column;

web/src/App.js

@@ -1,7 +1,6 @@
 import { Route, Switch, withRouter } from 'react-router-dom';
 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';
@@ -33,7 +32,6 @@ const App = () => {
           <Route exact={boolTrue} path={["/", "/home"]} component={Home} />
           <Route path="/about" component={About} />
 
-          <Route path="/dashboard" component={Dashboard} />
           <Route path="/user" component={User} />
           <Route path="/u/:uuid" component={Profile} />
           <Route path="/artist/:uuid" component={Artist} />

web/src/Components/Navigation.js

@@ -12,8 +12,9 @@ const menuItems = [
 ];
 
 const loggedInMenuItems = [
-  'Dashboard',
+  'Home',
-  'Docs',
+  'My Profile',
+  // 'Docs',
 ]
 
 const isMobile = () => {
@@ -50,8 +51,7 @@ const Navigation = () => {
                 key={menuItem}
                 className="navLinkMobile"
                 style={active === menuItem.toLowerCase() ? activeStyle : {}}
-                to={menuItem.toLowerCase()}
+                to={menuItem === "My Profile" ? "/u/" + user.username : "/" + menuItem.toLowerCase()}                onClick={toggleCollapsed}
-                onClick={toggleCollapsed}
               >{menuItem}</Link>
             </NavItem>
           )}
@@ -60,7 +60,7 @@ const Navigation = () => {
             style={active === "user" ? activeStyle : {}}
             className="navLinkMobile"
             onClick={toggleCollapsed}
-            >{user.username}</Link>
+            >Settings</Link>
           {user.admin &&
             <Link
               to="/admin"
@@ -115,7 +115,7 @@ const Navigation = () => {
             key={menuItem}
             className="navLink"
             style={active === menuItem.toLowerCase() ? activeStyle : {}}
-            to={"/" + menuItem.toLowerCase()}
+            to={menuItem === "My Profile" ? "/u/" + user.username : "/" + menuItem.toLowerCase()}
           >
             {menuItem}
           </Link>
@@ -140,7 +140,7 @@ const Navigation = () => {
               to="/user"
               style={active === "user" ? activeStyle : {}}
               className="navLink"
-            >{user.username}</Link>
+            >Settings</Link>
             {user.admin &&
             <Link
               to="/admin"

web/src/Components/ScrobbleTable.js

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 const ScrobbleTable = (props) => {
     return (
         <div>
-        <table border={1} cellPadding={5}>
+        <table width={900} border={1} cellPadding={5}>
            <thead>
               <tr>
                 <td>Timestamp</td>

web/src/Components/TopTable.css

@@ -0,0 +1,11 @@
+.biggestWrapper {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.biggestBox {
+    margin: 0;
+    padding: 0;
+    width: 300px;
+    height: 300px;
+}

web/src/Components/TopTable.js

@@ -0,0 +1,47 @@
+import React from "react";
+import './TopTable.css'
+import TopTableBox from './TopTableBox';
+
+const TopTable = (props) => {
+    return (
+      <div>
+         <span>Top {props.type}</span>
+         <div className="biggestWrapper">
+            <div className="biggestBox">
+               <TopTableBox
+                  size={300}
+                  number="1"
+                  title="hot milk"
+                  uuid="a2bcc230-f7be-4087-b49a-8c43d19ed316"
+                  img="https://i.scdn.co/image/a397625e38fb671f1baa81997b4c1fd2670fcb10"
+               />
+            </div>
+            <div className="biggestBox">
+                  <TopTableBox
+                     size={150}
+                     number="2"
+                     title="Pendulum"
+                     uuid="a2bcc230-f7be-4087-b49a-8c43d19ed316"
+                     img="https://i.scdn.co/image/0f476171f283207656e95e1005cea7040be475d7"
+                  />
+                  <TopTableBox size={150} number="3" title="Illenium" uuid="a2bcc230-f7be-4087-b49a-8c43d19ed316" />
+                  <TopTableBox size={150} number="4" title="As It is" uuid="a2bcc230-f7be-4087-b49a-8c43d19ed316" />
+                  <TopTableBox size={150} number="5" title="CHVRCHES" uuid="a2bcc230-f7be-4087-b49a-8c43d19ed316" />
+            </div>
+            <div className="biggestBox">
+               <TopTableBox size={100} number="6" title="tester" uuid="a2bcc230-f7be-4087-b49a-8c43d19ed316" />
+               <TopTableBox size={100} number="7" title="tester" uuid="a2bcc230-f7be-4087-b49a-8c43d19ed316" />
+               <TopTableBox size={100} number="8" title="tester" uuid="a2bcc230-f7be-4087-b49a-8c43d19ed316" />
+               <TopTableBox size={100} number="9" title="tester" uuid="a2bcc230-f7be-4087-b49a-8c43d19ed316" />
+               <TopTableBox size={100} number="10" title="tester" uuid="a2bcc230-f7be-4087-b49a-8c43d19ed316" />
+               <TopTableBox size={100} number="11" title="tester" uuid="a2bcc230-f7be-4087-b49a-8c43d19ed316" />
+               <TopTableBox size={100} number="12" title="tester" uuid="a2bcc230-f7be-4087-b49a-8c43d19ed316" />
+               <TopTableBox size={100} number="13" title="tester" uuid="a2bcc230-f7be-4087-b49a-8c43d19ed316" />
+               <TopTableBox size={100} number="14" title="tester" uuid="a2bcc230-f7be-4087-b49a-8c43d19ed316" />
+            </div>
+         </div>
+      </div>
+    );
+}
+
+export default TopTable;

web/src/Components/TopTableBox.css

@@ -0,0 +1,22 @@
+.topTableBox:hover {
+    opacity: 0.7;
+    cursor: pointer;
+}
+
+img {
+    background-size: cover;
+    background-position: top center;
+}
+
+.topOverlay {
+    position: absolute;
+    margin: 5px;
+    padding: 0 5px 0 5px;
+    background-color: rgba(0, 0, 0, 0.6);
+}
+
+.topText {
+    margin: -2px 0 0 0;
+    font-size: 11pt;
+    color: #FFF;
+}

web/src/Components/TopTableBox.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { Link } from 'react-router-dom';
+import './TopTableBox.css'
+
+const TopTableBox = (props) => {
+   let img = 'https://www.foot.com/wp-content/uploads/2017/06/placeholder-square-300x300.jpg';
+   if (props.img && props.img !== '') {
+      img = props.img
+   }
+
+   return (
+         <Link to={"/artist/"+props.uuid} float="left" >
+            <div
+               className="topTableBox"
+               style={{
+                  backgroundImage: `url(${img})`,
+                  backgroundSize: `cover`,
+                  backgroundPosition: `top center`,
+                  width: `${props.size}px`,
+                  height: `${props.size}px`,
+                  float: `left`,
+               }} >
+               <div className="topOverlay">
+                  <span className="topText">#{props.number} {props.title}</span>
+               </div>
+            </div>
+         </Link>
+
+   );
+}
+
+export default TopTableBox;

web/src/Contexts/AuthContextProvider.js

@@ -23,7 +23,7 @@ const AuthContextProvider = ({ children }) => {
           localStorage.setItem('user', JSON.stringify(user));
         }
  
-        setUser(user)
+        setUser(user);
       }
     }
     setLoading(false)

web/src/Pages/Dashboard.js

@@ -1,55 +0,0 @@
-import React, { useState, useEffect, useContext } from 'react';
-import '../App.css';
-import './Dashboard.css';
-import { useHistory } from "react-router";
-import { getRecentScrobbles } from '../Api/index';
-import ScaleLoader from 'react-spinners/ScaleLoader';
-import ScrobbleTable from "../Components/ScrobbleTable";
-import AuthContext from '../Contexts/AuthContext';
-
-const Dashboard = () => {
-  const history = useHistory();
-  let { user } = useContext(AuthContext);
-  let [loading, setLoading] = useState(true);
-  let [dashboardData, setDashboardData] = useState({});
-
-  useEffect(() => {
-    if (!user) {
-      return
-    }
-    getRecentScrobbles(user.uuid)
-      .then(data => {
-        setDashboardData(data);
-        setLoading(false);
-      })
-  }, [user])
-
-
-  if (!user) {
-    history.push("/login")
-  }
-
-  if (loading) {
-    return (
-      <div className="pageWrapper">
-        <ScaleLoader color="#6AD7E5" />
-      </div>
-    )
-  }
-
-  return (
-    <div className="pageWrapper">
-      <h1>
-        {user.username}'s Dashboard!
-      </h1>
-      <div className="pageBody">
-      {loading
-        ? <ScaleLoader color="#6AD7E5" size={60} />
-        : <ScrobbleTable data={dashboardData.items} />
-      }
-      </div>
-    </div>
-  );
-}
-
-export default Dashboard;

web/src/Pages/Login.js

@@ -13,7 +13,7 @@ const Login = () => {
   let { Login, loading, user } = useContext(AuthContext);
 
   if (user) {
-    history.push("/dashboard");
+    history.push("/u/" + user.username);
   }
 
   const redirectReset = () => {

web/src/Pages/Profile.js

@@ -4,6 +4,7 @@ import './Profile.css';
 import ScaleLoader from 'react-spinners/ScaleLoader';
 import { getProfile } from '../Api/index'
 import ScrobbleTable from '../Components/ScrobbleTable'
+import TopTable from '../Components/TopTable'
 
 const Profile = (route) => {
   const [loading, setLoading] = useState(true);
@@ -50,6 +51,8 @@ const Profile = (route) => {
         {profile.username}'s Profile
       </h1>
       <div className="pageBody">
+        <TopTable type="Artists" />
+        <br/>
         Last 10 scrobbles...<br/>
         <ScrobbleTable data={profile.scrobbles}/>
       </div>