idanoo/GoScrobble
1
0
Fork 0
mirror of https://github.com/idanoo/GoScrobble.git synced 2024-11-22 00:21:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

0.0.7

Browse Source 
- Switch redux -> Context
- Remove excess packages
This commit is contained in:
Daniel Mason 2021-03-31 19:14:22 +13:00
parent ebd88b3bb0
commit 65c092e4ee
Signed by: idanoo
GPG Key ID: 387387CDBC02F132
14 changed files with 293 additions and 397 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitlab-ci.yml
View File

@ -8,6 +8,7 @@ variables:
build-go:
image: golang:1.16.2
stage: build
only: master
script:
- go build -o goscrobble cmd/go-scrobble/*.go
artifacts:
@ -21,6 +22,7 @@ build-go:
build-react:
image: node:15.12.0
stage: build
only: master
script:
- cd web
- npm install
@ -33,6 +35,7 @@ build-react:
bundle:
image: bash:latest
stage: bundle
only: master
variables:
GIT_STRATEGY: none
before_script:

4
docs/changelog.md
View File

@ -1,5 +1,7 @@
# 0.0.7
-Switch redux -> context.
- Switch redux -> Context
- Remove excess packages
# 0.0.6
- Fix hitting dashboard when logged out

2
internal/goscrobble/user.go
View File

@ -61,10 +61,8 @@ func createUser(req *RegisterRequest, ip net.IP) error {
// Check username is valid
if !isUsernameValid(req.Username) {
log.Println("user is invalid")
return errors.New("Username contains invalid characters")
}
log.Println("user is valid")
// If set an email.. validate it!
if req.Email != "" {

30
web/src/Api/index.js
View File

@ -24,30 +24,26 @@ export const PostLogin = (formValues) => {
jwt: response.data.token,
uuid: expandedUser.sub,
exp: expandedUser.exp,
username: expandedUser.username,
}
// Set in local storage
localStorage.setItem('user', JSON.stringify(user));
// Set in context
// setUser(user)
toast.success('Successfully logged in.');
// setLoading(false)
return user;
} else {
toast.error(response.data.error ? response.data.error: 'An Unknown Error has occurred');
// setLoading(false)
return null
}
})
.catch(() => {
return Promise.resolve();
});
};
export const PostRegister = (formValues) => {
axios.post(process.env.REACT_APP_API_URL + "register", formValues)
return axios.post(process.env.REACT_APP_API_URL + "register", formValues)
.then((response) => {
if (response.data.token) {
toast.success('Successfully registered. Please sign in');
if (response.data.message) {
toast.success(response.data.message);
return Promise.resolve();
} else {
@ -56,16 +52,8 @@ export const PostRegister = (formValues) => {
return Promise.reject();
}
})
.error((error) => {
const message =
(error.response &&
error.response.data &&
error.response.data.message) ||
error.message ||
error.toString();
toast.error(message ? message : 'An Unknown Error has occurred')
return Promise.reject();
.catch(() => {
return Promise.resolve();
});
};

101
web/src/Components/Navigation.js
View File

@ -1,10 +1,10 @@
import { React, Component } from 'react';
import { React, useState, useContext } from 'react';
import { Navbar, NavbarBrand, Collapse, Nav, NavbarToggler, NavItem } from 'reactstrap';
import { Link } from 'react-router-dom';
import { Link, useLocation } from 'react-router-dom';
import logo from '../logo.png';
import './Navigation.css';
import logout from '../Contexts/AuthContextProvider';
import AuthContext from '../Contexts/AuthContext';
const menuItems = [
'Home',
@ -20,68 +20,42 @@ const isMobile = () => {
return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
};
class Navigation extends Component {
constructor(props) {
super(props);
this.toggleNavbar = this.toggleNavbar.bind(this);
this.handleLogout = this.handleLogout.bind(this);
const Navigation = () => {
const location = useLocation();
// Yeah I know you might not hit home.. but I can't get the
// path based finder thing working on initial load :sweatsmile:
this.state = { active: "Home", collapsed: true };
// Lovely hack to highlight the current page (:
let active = "Home"
if (location && location.pathname && location.pathname.length > 1) {
active = location.pathname.replace(/\//, "");
}
componentDidMount() {
const { isLoggedIn } = this.props;
if (isLoggedIn) {
this.setState({
isLoggedIn: true,
});
}
}
_handleClick(menuItem) {
this.setState({ active: menuItem, collapsed: !this.state.collapsed });
}
handleLogout() {
this.dispatch(logout());
}
toggleNavbar() {
this.setState({ collapsed: !this.state.collapsed });
}
// This is a real mess. TO CLEAN UP.
render() {
const activeStyle = { color: '#FFFFFF' };
let activeStyle = { color: '#FFFFFF' };
let { user, Logout } = useContext(AuthContext);
let [collapsed, setCollapsed] = useState(true);
const renderMobileNav = () => {
return <Navbar color="dark" dark fixed="top">
<NavbarBrand className="mr-auto"><img src={logo} className="nav-logo" alt="logo" /> GoScrobble</NavbarBrand>
<NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
<Collapse isOpen={!this.state.collapsed} navbar>
{this.state.isLoggedIn ?
<NavbarToggler onClick={setCollapsed(!collapsed)} className="mr-2" />
<Collapse isOpen={!collapsed} navbar>
{user ?
<Nav className="navLinkLoginMobile" navbar>
{loggedInMenuItems.map(menuItem =>
<NavItem>
<Link
key={menuItem}
className="navLinkMobile"
style={this.state.active === menuItem ? activeStyle : {}}
onClick={this._handleClick.bind(this, menuItem)}
style={active === menuItem ? activeStyle : {}}
to={menuItem}
>{menuItem}</Link>
</NavItem>
)}
<Link
to="/profile"
style={this.state.active === "profile" ? activeStyle : {}}
onClick={this._handleClick.bind(this, "profile")}
style={active === "profile" ? activeStyle : {}}
className="navLinkMobile"
>Profile</Link>
<Link to="/" className="navLink" onClick={this.handleLogout}>Logout</Link>
<Link to="/" className="navLink" onClick={Logout}>Logout</Link>
</Nav>
: <Nav className="navLinkLoginMobile" navbar>
{menuItems.map(menuItem =>
@ -89,8 +63,7 @@ class Navigation extends Component {
<Link
key={menuItem}
className="navLinkMobile"
style={this.state.active === menuItem ? activeStyle : {}}
onClick={this._handleClick.bind(this, menuItem)}
style={active === menuItem ? activeStyle : {}}
to={menuItem === "Home" ? "/" : menuItem}
>
{menuItem}
@ -99,19 +72,16 @@ class Navigation extends Component {
)}
<NavItem>
<Link
to="/login"
style={this.state.active === "login" ? activeStyle : {}}
onClick={this._handleClick.bind(this, "login")}
to="/Login"
style={active === "Login" ? activeStyle : {}}
className="navLinkMobile"
>Login</Link>
</NavItem>
<NavItem>
<Link
to="/register"
to="/Register"
className="navLinkMobile"
style={this.state.active === "register" ? activeStyle : {}}
onClick={this._handleClick.bind(this, "register")}
history={this.props.history}
style={active === "Register" ? activeStyle : {}}
>Register</Link>
</NavItem>
</Nav>
@ -123,14 +93,13 @@ class Navigation extends Component {
const renderDesktopNav = () => {
return <Navbar color="dark" dark fixed="top">
<NavbarBrand className="mr-auto"><img src={logo} className="nav-logo" alt="logo" /> GoScrobble</NavbarBrand>
{this.state.isLoggedIn ?
{user ?
<div>
{loggedInMenuItems.map(menuItem =>
<Link
key={menuItem}
className="navLink"
style={this.state.active === menuItem ? activeStyle : {}}
onClick={this._handleClick.bind(this, menuItem)}
style={active === menuItem ? activeStyle : {}}
to={menuItem}
>
{menuItem}
@ -142,8 +111,7 @@ class Navigation extends Component {
<Link
key={menuItem}
className="navLink"
style={this.state.active === menuItem ? activeStyle : {}}
onClick={this._handleClick.bind(this, menuItem)}
style={active === menuItem ? activeStyle : {}}
to={menuItem === "Home" ? "/" : menuItem}
>
{menuItem}
@ -151,30 +119,26 @@ class Navigation extends Component {
)}
</div>
}
{this.state.isLoggedIn ?
{user ?
<div className="navLinkLogin">
<Link
to="/profile"
style={this.state.active === "profile" ? activeStyle : {}}
onClick={this._handleClick.bind(this, "profile")}
style={active === "profile" ? activeStyle : {}}
className="navLink"
>Profile</Link>
<Link to="/" className="navLink" onClick={this.handleLogout}>Logout</Link>
>{user.username}</Link>
<Link to="/" className="navLink" onClick={Logout}>Logout</Link>
</div>
:
<div className="navLinkLogin">
<Link
to="/login"
style={this.state.active === "login" ? activeStyle : {}}
onClick={this._handleClick.bind(this, "login")}
style={active === "login" ? activeStyle : {}}
className="navLink"
>Login</Link>
<Link
to="/register"
className="navLink"
style={this.state.active === "register" ? activeStyle : {}}
onClick={this._handleClick.bind(this, "register")}
history={this.props.history}
style={active === "register" ? activeStyle : {}}
>Register</Link>
</div>
@ -192,6 +156,5 @@ class Navigation extends Component {
</div>
);
}
}
export default Navigation;

16
web/src/Components/ScrobbleTable.js
View File

@ -1,15 +1,6 @@
import React from "react";
class ScrobbleTable extends React.Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data,
};
}
render() {
const ScrobbleTable = (props) => {
return (
<div>
<table border={1} cellPadding={5}>
@ -23,8 +14,8 @@ class ScrobbleTable extends React.Component {
</thead>
<tbody>
{
this.state.data && this.state.data.items &&
this.state.data.items.map(function (element) {
props.data && props.data.items &&
props.data.items.map(function (element) {
return <tr>
<td>{element.time}</td>
<td>{element.track}</td>
@ -38,6 +29,5 @@ class ScrobbleTable extends React.Component {
</div>
);
}
}
export default ScrobbleTable;

10
web/src/Contexts/AuthContextProvider.js
View File

@ -1,7 +1,6 @@
import React, { useState, useEffect } from 'react';
import { toast } from 'react-toastify';
import AuthContext from './AuthContext';
import { PostLogin, PostRegister } from '../Api/index';
const AuthContextProvider = ({ children }) => {
@ -22,21 +21,16 @@ const AuthContextProvider = ({ children }) => {
PostLogin(formValues).then(user => {
if (user) {
setUser(user);
const { history } = this.props;
history.push("/dashboard");
localStorage.setItem('user', JSON.stringify(user));
}
setLoading(false);
})
}
const Register = (formValues) => {
const { history } = this.props;
setLoading(true);
return PostRegister(formValues).then(response => {
if (response) {
history.push("/login");
}
// Do stuff here?
setLoading(false);
});
};

2
web/src/Pages/About.js
View File

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

54
web/src/Pages/Dashboard.js
View File

@ -1,56 +1,44 @@
import React from 'react';
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';
class Dashboard extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
scrobbleData: [],
uuid: null,
};
const Dashboard = () => {
const history = useHistory();
let { user } = useContext(AuthContext);
let [isLoading, setIsLoading] = useState(true);
let [dashboardData, setDashboardData] = useState({});
if (!user) {
history.push("/login");
}
componentDidMount() {
const { history, uuid } = this.props;
const isLoggedIn = this.props.isLoggedIn;
if (!isLoggedIn) {
history.push("/login")
useEffect(() => {
if (!user) {
return
}
getRecentScrobbles(uuid)
.then((data) => {
this.setState({
isLoading: false,
data: data
});
getRecentScrobbles(user.uuid)
.then(data => {
setDashboardData(data);
setIsLoading(false);
})
.catch(() => {
this.setState({
isLoading: false
});
});
}
}, [user])
render() {
return (
<div className="pageWrapper">
<h1>
Dashboard!
</h1>
{this.state.isLoading
{isLoading
? <ScaleLoader color="#FFF" size={60} />
: <ScrobbleTable data={this.state.data} />
: <ScrobbleTable data={dashboardData} />
}
</div>
);
}
}
export default Dashboard;

4
web/src/Pages/Home.js
View File

@ -4,8 +4,7 @@ import './Home.css';
import HomeBanner from '../Components/HomeBanner';
import React from 'react';
class Home extends React.Component {
render() {
const Home = () => {
return (
<div className="pageWrapper">
<img src={logo} className="App-logo" alt="logo" />
@ -14,6 +13,5 @@ class Home extends React.Component {
</div>
);
}
}
export default Home;

8
web/src/Pages/Login.js
View File

@ -5,10 +5,16 @@ import { Button } from 'reactstrap';
import { Formik, Form, Field } from 'formik';
import ScaleLoader from 'react-spinners/ScaleLoader';
import AuthContext from '../Contexts/AuthContext';
import { useHistory } from "react-router";
const Login = () => {
const history = useHistory();
let boolTrue = true;
let { Login, loading } = useContext(AuthContext);
let { Login, loading, user } = useContext(AuthContext);
if (user) {
history.push("/dashboard");
}
return (
<div className="pageWrapper">

20
web/src/Pages/Profile.js
View File

@ -1,25 +1,25 @@
import React from 'react';
import React, { useContext } from 'react';
import '../App.css';
import './Dashboard.css';
import { useHistory } from "react-router";
import AuthContext from '../Contexts/AuthContext';
class Profile extends React.Component {
componentDidMount() {
const { history, isLoggedIn } = this.props;
const Profile = () => {
const history = useHistory();
const { user } = useContext(AuthContext);
if (!isLoggedIn) {
history.push("/login")
}
if (!user) {
history.push("/login");
}
render() {
return (
<div className="pageWrapper">
<h1>
Hai User
Welcome {user.username}!
</h1>
</div>
);
}
}
export default Profile;

61
web/src/Pages/Register.js
View File

@ -1,51 +1,25 @@
import React from 'react';
import React, { useContext } from 'react';
import '../App.css';
import './Register.css';
import { Button } from 'reactstrap';
import ScaleLoader from "react-spinners/ScaleLoader";
import register from '../Contexts/AuthContextProvider';
import AuthContext from '../Contexts/AuthContext';
import { Formik, Field, Form } from 'formik';
import { useHistory } from "react-router";
class Register extends React.Component {
constructor(props) {
super(props);
this.state = {username: '', email: '', password: '', passwordconfirm: '', loading: false};
const Register = () => {
const history = useHistory();
let boolTrue = true;
let { Register, user, loading } = useContext(AuthContext);
if (user) {
history.push("/dashboard");
}
componentDidMount() {
const { history, isLoggedIn } = this.props;
if (isLoggedIn) {
history.push("/dashboard")
}
}
handleRegister(values) {
console.log(values)
this.setState({loading: true});
const { dispatch, history } = this.props;
dispatch(register(values.username, values.email, values.password))
.then(() => {
this.setState({
loading: false,
});
history.push("/login");
})
.catch(() => {
this.setState({
loading: false
});
});
}
render() {
let trueBool = true;
return (
<div className="pageWrapper">
{
// TODO: Move to DB:config REGISTRATION_DISABLED=1|0
// TODO: Move to DB:config REGISTRATION_DISABLED=1|0 :upsidedownsmile:
process.env.REACT_APP_REGISTRATION_DISABLED === "true" ?
<p>Registration is temporarily disabled. Please try again soon!</p>
:
@ -56,7 +30,7 @@ class Register extends React.Component {
<div className="registerBody">
<Formik
initialValues={{ username: '', email: '', password: '', passwordconfirm: '' }}
onSubmit={async values => this.handleRegister(values)}
onSubmit={async values => Register(values)}
>
<Form>
<label>
@ -64,7 +38,7 @@ class Register extends React.Component {
<Field
name="username"
type="text"
required={trueBool}
required={boolTrue}
className="registerFields"
/>
</label>
@ -83,7 +57,7 @@ class Register extends React.Component {
<Field
name="password"
type="password"
required={trueBool}
required={boolTrue}
className="registerFields"
/>
</label>
@ -93,7 +67,7 @@ class Register extends React.Component {
<Field
name="passwordconfirm"
type="password"
required={trueBool}
required={boolTrue}
className="registerFields"
/>
</label>
@ -102,8 +76,8 @@ class Register extends React.Component {
color="primary"
type="submit"
className="registerButton"
disabled={this.state.loading}
>{this.state.loading ? <ScaleLoader color="#FFF" size={35} /> : "Register"}</Button>
disabled={loading}
>{loading ? <ScaleLoader color="#FFF" size={35} /> : "Register"}</Button>
</Form>
</Formik>
</div>
@ -112,6 +86,5 @@ class Register extends React.Component {
</div>
);
}
}
export default Register;

9
web/src/Pages/Settings.js
View File

@ -2,13 +2,7 @@ import React from 'react';
import '../App.css';
import './Settings.css';
class Settings extends React.Component {
constructor(props) {
super(props);
this.state = {username: '', password: '', loading: false};
}
render() {
const Settings = () => {
return (
<div className="pageWrapper">
<h1>
@ -22,6 +16,5 @@ class Settings extends React.Component {
</div>
);
}
}
export default Settings;