idanoo/GoScrobble
1
0
Fork 0
mirror of https://github.com/idanoo/GoScrobble synced 2025-07-03 14:42:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Remove redux

Browse source
This commit is contained in:
Daniel Mason 2021-03-31 13:16:42 +13:00
parent 0c56281bcd
commit ebd88b3bb0
Signed by: idanoo
GPG key ID: 387387CDBC02F132
30 changed files with 263 additions and 696 deletions
Download patch file Download diff file Expand all files Collapse all files

88
web/src/Components/HomeBanner.js
View file

@ -1,65 +1,45 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import '../App.css';
import './HomeBanner.css';
import { getStats } from '../Actions/api';
import { getStats } from '../Api/index';
import ClipLoader from 'react-spinners/ClipLoader'
class HomeBanner extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
userCount: 0,
scrobbleCount: 0,
trackCount: 0,
artistCount: 0,
};
}
const HomeBanner = () => {
let [bannerData, setBannerData] = useState({});
let [isLoading, setIsLoading] = useState(true);
componentDidMount() {
useEffect(() => {
getStats()
.then((data) => {
this.setState({
isLoading: false,
userCount: data.users,
scrobbleCount: data.scrobbles,
trackCount: data.tracks,
artistCount: data.artists,
});
})
.catch(() => {
this.setState({
isLoading: false
});
});
}
.then(data => {
setBannerData(data);
setIsLoading(false);
})
}, [])
render() {
return (
<div className="homeBanner">
<div className="homeBannerItem">
{this.state.isLoading
? <ClipLoader color="#6AD7E5" size={36} />
: <span className="homeBannerItemCount">{this.state.scrobbleCount}</span>}<br/>Scrobbles
</div>
<div className="homeBannerItem">
{this.state.isLoading
? <ClipLoader color="#6AD7E5" size={36} />
: <span className="homeBannerItemCount">{this.state.userCount}</span>}<br/>Users
</div>
<div className="homeBannerItem">
{this.state.isLoading
? <ClipLoader color="#6AD7E5" size={36} />
: <span className="homeBannerItemCount">{this.state.trackCount}</span>}<br/>Tracks
</div>
<div className="homeBannerItem">
{this.state.isLoading
? <ClipLoader color="#6AD7E5" size={36} />
: <span className="homeBannerItemCount">{this.state.artistCount}</span>}<br/>Artists
</div>
return (
<div className="homeBanner">
<div className="homeBannerItem">
{isLoading
? <ClipLoader color="#6AD7E5" size={34} />
: <span className="homeBannerItemCount">{bannerData.scrobbles}</span>}<br/>Scrobbles
</div>
);
}
<div className="homeBannerItem">
{isLoading
? <ClipLoader color="#6AD7E5" size={34} />
: <span className="homeBannerItemCount">{bannerData.users}</span>}<br/>Users
</div>
<div className="homeBannerItem">
{isLoading
? <ClipLoader color="#6AD7E5" size={34} />
: <span className="homeBannerItemCount">{bannerData.tracks}</span>}<br/>Tracks
</div>
<div className="homeBannerItem">
{isLoading
? <ClipLoader color="#6AD7E5" size={34} />
: <span className="homeBannerItemCount">{bannerData.artists}</span>}<br/>Artists
</div>
</div>
);
}
export default HomeBanner;

29
web/src/Components/Navigation.js
View file

@ -3,14 +3,8 @@ import { Navbar, NavbarBrand, Collapse, Nav, NavbarToggler, NavItem } from 'reac
import { Link } from 'react-router-dom';
import logo from '../logo.png';
import './Navigation.css';
import { connect } from 'react-redux';
import { logout } from '../Actions/auth';
import eventBus from "../Actions/eventBus";
import {
LOGIN_SUCCESS,
LOGOUT,
} from "../Actions/types";
import logout from '../Contexts/AuthContextProvider';
const menuItems = [
'Home',
@ -45,17 +39,6 @@ class Navigation extends Component {
});
}
eventBus.on(LOGIN_SUCCESS, () =>
this.setState({ isLoggedIn: true })
);
eventBus.on(LOGOUT, () =>
this.setState({ isLoggedIn: false })
);
}
componentWillUnmount() {
eventBus.remove(LOGIN_SUCCESS);
}
_handleClick(menuItem) {
@ -211,12 +194,4 @@ class Navigation extends Component {
}
}
function mapStateToProps(state) {
const { isLoggedIn } = state.auth;
return {
isLoggedIn
};
}
export default connect(mapStateToProps)(Navigation);
export default Navigation;