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

0.0.4

Browse source 
-  Display stats on homepage
This commit is contained in:
Daniel Mason 2021-03-30 16:45:31 +13:00
parent 038823055a
commit 7ae9a0cd66
Signed by: idanoo
GPG key ID: 387387CDBC02F132
6 changed files with 55 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

14
web/src/Components/HomeBanner.css
View file

@ -0,0 +1,14 @@
.homeBanner {
margin-top: 30px;
width: 100%;
}
.homeBannerItem {
float: left;
text-align: center;
width: 25%;
}
.homeBannerItemCount {
font-size: 22pt;
}

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

@ -2,6 +2,7 @@ import React from 'react';
import '../App.css';
import './HomeBanner.css';
import { getStats } from '../Actions/api';
import ClipLoader from 'react-spinners/ClipLoader'
class HomeBanner extends React.Component {
constructor(props) {
@ -17,25 +18,45 @@ class HomeBanner extends React.Component {
componentDidMount() {
getStats()
// .then((data) => {
// this.setState({
// loading: false,
// userCount: data.users,
// scrobbleCount: data.scrobbles,
// trackCount: data.tracks,
// artistCount: data.artists,
// });
// })
// .catch(() => {
// this.setState({
// loading: false
// });
// });
.then((data) => {
this.setState({
isLoading: false,
userCount: data.users,
scrobbleCount: data.scrobbles,
trackCount: data.tracks,
artistCount: data.artists,
});
})
.catch(() => {
this.setState({
isLoading: false
});
});
}
render() {
return (
<div className="container">
<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>
</div>
);
}