diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index d852bfa2..e4f1ce50 100644 --- a/.gitlab-ci.yml +++ b/.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 diff --git a/docs/changelog.md b/docs/changelog.md index 1a6122d6..a4c322a5 100644 --- a/docs/changelog.md +++ b/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 diff --git a/internal/goscrobble/server.go b/internal/goscrobble/server.go index 6ede0d85..74393455 100644 --- a/internal/goscrobble/server.go +++ b/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, } diff --git a/web/src/Api/index.js b/web/src/Api/index.js index 481535b3..dca3d660 100644 --- a/web/src/Api/index.js +++ b/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')); diff --git a/web/src/App.css b/web/src/App.css index e4ac4b25..20882da3 100644 --- a/web/src/App.css +++ b/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; diff --git a/web/src/App.js b/web/src/App.js index bd10e51a..520cbe07 100644 --- a/web/src/App.js +++ b/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 = () => { - diff --git a/web/src/Components/Navigation.js b/web/src/Components/Navigation.js index 0d266d15..405750b4 100644 --- a/web/src/Components/Navigation.js +++ b/web/src/Components/Navigation.js @@ -12,8 +12,9 @@ const menuItems = [ ]; const loggedInMenuItems = [ - 'Dashboard', - 'Docs', + 'Home', + 'My Profile', + // 'Docs', ] const isMobile = () => { @@ -50,8 +51,7 @@ const Navigation = () => { key={menuItem} className="navLinkMobile" style={active === menuItem.toLowerCase() ? activeStyle : {}} - to={menuItem.toLowerCase()} - onClick={toggleCollapsed} + to={menuItem === "My Profile" ? "/u/" + user.username : "/" + menuItem.toLowerCase()} onClick={toggleCollapsed} >{menuItem} )} @@ -60,7 +60,7 @@ const Navigation = () => { style={active === "user" ? activeStyle : {}} className="navLinkMobile" onClick={toggleCollapsed} - >{user.username} + >Settings {user.admin && { key={menuItem} className="navLink" style={active === menuItem.toLowerCase() ? activeStyle : {}} - to={"/" + menuItem.toLowerCase()} + to={menuItem === "My Profile" ? "/u/" + user.username : "/" + menuItem.toLowerCase()} > {menuItem} @@ -140,7 +140,7 @@ const Navigation = () => { to="/user" style={active === "user" ? activeStyle : {}} className="navLink" - >{user.username} + >Settings {user.admin && { return (
- +
diff --git a/web/src/Components/TopTable.css b/web/src/Components/TopTable.css new file mode 100644 index 00000000..a84d5996 --- /dev/null +++ b/web/src/Components/TopTable.css @@ -0,0 +1,11 @@ +.biggestWrapper { + display: flex; + flex-wrap: wrap; +} + +.biggestBox { + margin: 0; + padding: 0; + width: 300px; + height: 300px; +} diff --git a/web/src/Components/TopTable.js b/web/src/Components/TopTable.js new file mode 100644 index 00000000..5fd7fa4e --- /dev/null +++ b/web/src/Components/TopTable.js @@ -0,0 +1,47 @@ +import React from "react"; +import './TopTable.css' +import TopTableBox from './TopTableBox'; + +const TopTable = (props) => { + return ( +
+ Top {props.type} +
+
+ +
+
+ + + + +
+
+ + + + + + + + + +
+
+
+ ); +} + +export default TopTable; \ No newline at end of file diff --git a/web/src/Components/TopTableBox.css b/web/src/Components/TopTableBox.css new file mode 100644 index 00000000..63792bd4 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/web/src/Components/TopTableBox.js b/web/src/Components/TopTableBox.js new file mode 100644 index 00000000..8ba2efa4 --- /dev/null +++ b/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 ( + +
+
+ #{props.number} {props.title} +
+
+ + + ); +} + +export default TopTableBox; \ No newline at end of file diff --git a/web/src/Contexts/AuthContextProvider.js b/web/src/Contexts/AuthContextProvider.js index 1ac053b6..401e4c97 100644 --- a/web/src/Contexts/AuthContextProvider.js +++ b/web/src/Contexts/AuthContextProvider.js @@ -22,8 +22,8 @@ const AuthContextProvider = ({ children }) => { user = RefreshToken(user.refresh_token) localStorage.setItem('user', JSON.stringify(user)); } - - setUser(user) + + setUser(user); } } setLoading(false) diff --git a/web/src/Pages/Dashboard.css b/web/src/Pages/Dashboard.css deleted file mode 100644 index e69de29b..00000000 diff --git a/web/src/Pages/Dashboard.js b/web/src/Pages/Dashboard.js deleted file mode 100644 index a9be5628..00000000 --- a/web/src/Pages/Dashboard.js +++ /dev/null @@ -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 ( -
- -
- ) - } - - return ( -
-

- {user.username}'s Dashboard! -

-
- {loading - ? - : - } -
-
- ); -} - -export default Dashboard; diff --git a/web/src/Pages/Login.js b/web/src/Pages/Login.js index 524aed3d..e89d8336 100644 --- a/web/src/Pages/Login.js +++ b/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 = () => { diff --git a/web/src/Pages/Profile.js b/web/src/Pages/Profile.js index 425c5343..65e43838 100644 --- a/web/src/Pages/Profile.js +++ b/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
+ +
Last 10 scrobbles...
Timestamp