0.0.4

-  Display stats on homepage

.gitlab-ci.yml

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

internal/goscrobble/stats.go

@@ -10,7 +10,7 @@ import (
 type StatsRequest struct {
 	Users       int       `json:"users"`
 	Scrobbles   int       `json:"scrobbles"`
-	Tracks      int       `json:"songs"`
+	Tracks      int       `json:"tracks"`
 	Artists     int       `json:"artists"`
 	LastUpdated time.Time `json:"last_updated"`
 }

web/src/Actions/api.js

@@ -1,28 +1,9 @@
-import { toast } from 'react-toastify';
 import ApiService from "../Services/api.service";
 
-export const getStats = () => () => {
+export const getStats = () => {
   return ApiService.getStats().then(
     (data) => {
-      console.log(data);
+      return data.data;
-      if (data.error) {
-          toast.error(data.error)
-          return Promise.reject();
-      }
-
-      return Promise.resolve();
-    },
-    (error) => {
-      const message =
-        (error.response &&
-          error.response.data &&
-          error.response.data.message) ||
-        error.message ||
-        error.toString();
-        console.log(message);
-
-      toast.error(message);
-      return Promise.reject();
     }
   );
 };

web/src/Components/HomeBanner.css

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

web/src/Components/HomeBanner.js

@@ -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) => {
+    .then((data) => {
-    //   this.setState({
+      this.setState({
-    //     loading: false,
+        isLoading: false,
-    //     userCount: data.users,
+        userCount: data.users,
-    //     scrobbleCount: data.scrobbles,
+        scrobbleCount: data.scrobbles,
-    //     trackCount: data.tracks,
+        trackCount: data.tracks,
-    //     artistCount: data.artists,
+        artistCount: data.artists,
-    //   });
+      });
-    // })
+    })
-    // .catch(() => {
+    .catch(() => {
-    //   this.setState({
+      this.setState({
-    //     loading: false
+        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>
     );
   }

web/src/Services/api.service.js

@@ -2,11 +2,7 @@ import axios from "axios";
 
 class ApiService {
   async getStats() {
-    return axios.get(process.env.REACT_APP_API_URL + "stats")
+    return axios.get(process.env.REACT_APP_API_URL + "stats");
-      .then((response) => {
-        return response.data;
-      }
-    );
   }
 }