statistics tab for discord chat

client/app/pages/Clips/Clips.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import axios from 'axios';
+import { axios } from '../../services';
 
 import { SoundList, SoundType } from '../../components/SoundList';
 

client/app/pages/Downloader/Downloader.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import axios from 'axios';
+import { axios } from '../../services';
 
 import './Downloader.scss';
 

client/app/pages/Home/Home.scss

@@ -1,3 +0,0 @@
-.Home {
-  padding: 10px;
-}

client/app/pages/Home/Home.tsx

@@ -9,9 +9,9 @@ interface State {}
 export class Home extends React.Component<Props, State> {
   render() {
     return (
-      <div className="Home">
-        <div className="Card">
-          <div className="Card__header">Go Discord Bot</div>
+      <div className="content">
+        <div className="card">
+          <div className="card__header">Go Discord Bot</div>
 
           <h3>04-09-18 Update</h3>
           <ul>

client/app/pages/Pubg/Pubg.tsx

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import axios from 'axios';
+import { axios } from '../../services';
 import * as _ from 'lodash';
 import './Pubg.scss';
 

client/app/pages/Soundboard/Soundboard.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import Dropzone from 'react-dropzone';
-import axios, { AxiosRequestConfig } from 'axios';
-
+import { axios } from '../../services';
 import { SoundList, SoundType } from '../../components/SoundList';
-
 import './Soundboard.scss';
-import { storage } from '../../storage';
+import { AxiosRequestConfig } from 'axios';
 
 let self: any;
 
@@ -37,7 +35,6 @@ export class Soundboard extends React.Component<Props, State> {
     this.config = {
       headers: {
         'Content-Type': 'multipart/form-data',
-        Authorization: `Bearer ${storage.getJWT()}`,
       },
       onUploadProgress: progressEvent => {
         this.setState({

client/app/pages/oauth/oauth.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import axios from 'axios';
+import { axios, StorageService } from '../../services';
 import queryString from 'query-string';
 import { RouteComponentProps } from 'react-router-dom';
-import { storage } from '../../storage';
 
 interface Props extends RouteComponentProps<any> {}
 
@@ -25,7 +24,7 @@ export class Oauth extends React.Component<Props, State> {
   private async fetchOauth(code: string) {
     try {
       const res = await axios.post('/api/oauth', { code });
-      storage.setJWT(res.data);
+      StorageService.setJWT(res.data);
       window.location.href = '/';
     } catch (e) {
       console.error(e);

client/app/pages/stats/stats.scss

@@ -0,0 +1,3 @@
+.Stats {
+  padding: 10px;
+}

client/app/pages/stats/stats.tsx

@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import { HorizontalBar } from 'react-chartjs-2';
+import { chain, map } from 'lodash';
+import { axios } from '../../services';
+import './stats.scss';
+
+interface IState {
+  data: {
+    username: string;
+    count: number;
+  }[];
+}
+
+/**
+ * a page to show discord chat statistics
+ * currently keeps track of number messages that contain external links
+ */
+export class Stats extends Component<any, IState> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      data: [],
+    };
+  }
+
+  componentDidMount() {
+    this.getdata();
+  }
+
+  async getdata() {
+    const messages = await axios.get('/api/logger/linkedmessages');
+    const data: any = chain(messages.data)
+      .map((v, k) => {
+        return { username: k, count: v };
+      })
+      .orderBy(v => v.count, 'desc')
+      .value();
+
+    this.setState({ data });
+  }
+
+  render() {
+    const data: any = {
+      labels: map(this.state.data, v => v.username),
+      datasets: [
+        {
+          label: 'Count',
+          backgroundColor: 'rgba(114,137,218, 0.4)',
+          borderColor: 'rgba(114,137,218, 0.9)',
+          borderWidth: 1,
+          hoverBackgroundColor: 'rgba(114,137,218, 0.6)',
+          hoverBorderColor: 'rgba(114,137,218, 1)',
+          data: map(this.state.data, v => v.count),
+        },
+      ],
+      options: {
+        responsive: true,
+      },
+    };
+
+    return (
+      <div className="content">
+        <div className="card" style={{ maxWidth: '1000px' }}>
+          <div className="card__header">Shitposts</div>
+          <HorizontalBar data={data} height={500} />
+        </div>
+      </div>
+    );
+  }
+}