client: updated everything, deprecated pubg stuff

client/app/pages/Pubg/Pubg.scss

@@ -1,32 +1,33 @@
-@import "../../scss/variables";
+@import '../../scss/variables';
 
 .pubg__container {
-    padding: 10px;
+  padding: 10px;
 }
 
 .pubg__table {
-    border-collapse: collapse;
-    width: 100%;
-    text-align: left;
-    margin-top: 20px;
+  border-collapse: collapse;
+  width: 100%;
+  text-align: left;
+  margin-top: 20px;
 
-    tr + tr {
-        border-top: 1px solid $gray3;
-    }
+  tr + tr {
+    border-top: 1px solid $gray3;
+  }
 
-    td, th {
-        padding: 5px;
-    }
+  td,
+  th {
+    padding: 5px;
+  }
 }
 
 .pubg__button-row {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 
-    .button {
-        min-width: 100px;
+  .button {
+    min-width: 100px;
 
-        & + .button {
-            margin-left: 5px;
-        }
+    & + .button {
+      margin-left: 5px;
     }
+  }
 }

client/app/pages/Pubg/Pubg.tsx

@@ -1,146 +1,159 @@
-// DEPRECATED
+/**
+ * DEPRECATED
+ */
+
 import React from 'react';
 import axios from 'axios';
 import * as _ from 'lodash';
 import './Pubg.scss';
 
-interface Props {
-
-}
+interface Props {}
 
 interface State {
-    players: Player[];
-    selectedRegion: string;
-    selectedMatch: string;
-    statList: string[];
+  players: Player[];
+  selectedRegion: string;
+  selectedMatch: string;
+  statList: string[];
 }
 
 interface Player {
-    PlayerName: string;
-    agg?: any;
-    as?: any;
-    na?: any;
-    sa?: any;
+  PlayerName: string;
+  agg?: any;
+  as?: any;
+  na?: any;
+  sa?: any;
 }
 
 export class Pubg extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      players: [],
+      selectedRegion: 'agg',
+      selectedMatch: 'squad',
+      statList: [],
+    };
+  }
 
-    constructor() {
-        super();
-        this.state = {
-            players: [],
-            selectedRegion: 'agg',
-            selectedMatch: 'squad',
-            statList: [],
-        };
+  componentDidMount() {
+    axios.get('/api/stats/pubg').then(res => {
+      this.setState({
+        players: _.map(res.data) as any,
+      });
+
+      this.setStatList();
+    });
+  }
+
+  // get stat list
+  setStatList() {
+    // hacky way to find existing content -- to tired to make it pretty
+    let i = 0;
+    let stats;
+    while (!stats) {
+      if (i > this.state.players.length) {
+        return;
+      }
+
+      stats = _.find(
+        _.get(this.state, `players[${i}].Stats`),
+        (s: any) => s.Match === this.state.selectedMatch.toLowerCase(),
+      );
+      i++;
     }
 
-    componentDidMount() {
-        axios.get("/api/stats/pubg").then((res) => {
+    if (stats) {
+      this.setState({
+        statList: _.sortBy(_.map(stats.Stats, 'field')) as any,
+      });
+    }
+  }
 
-            this.setState({
-                players: _.map(res.data) as any,
+  insertRows(): any {
+    return this.state.statList.map((val: any, index: any) => {
+      return (
+        <tr key={index}>
+          <td>{val}</td>
+          {this.state.players.map((player: any, i: number) => {
+            // find player stats for field
+            let playerStat = _.find(player.Stats, (p: any) => {
+              return (
+                p.Match === this.state.selectedMatch.toLowerCase() &&
+                p.Region === this.state.selectedRegion.toLowerCase()
+              );
             });
 
-            this.setStatList();
-        });
-    }
-
-    // get stat list
-    setStatList() {
-        
-        // hacky way to find existing content -- to tired to make it pretty
-        let i = 0;
-        let stats;
-        while (!stats) {
-            if (i > this.state.players.length) {
-                return;
-            }
-
-            stats = _.find(_.get(this.state, `players[${i}].Stats`), (s: any) => s.Match === this.state.selectedMatch.toLowerCase());
-            i++;
-        }
-
-        if (stats) {
-            this.setState({
-                statList: _.sortBy(_.map(stats.Stats, 'field')) as any,
-            });
-        }
-    }
-
-    insertRows(): any {
-        return this.state.statList.map((val: any, index: any) => {
             return (
-                <tr key={index}>
-                    <td>{val}</td>
-                    {this.state.players.map((player: any, i: number) => {
-                        // find player stats for field
-                        let playerStat = _.find(player.Stats, (p: any) => {
-                            return p.Match === this.state.selectedMatch.toLowerCase() && p.Region === this.state.selectedRegion.toLowerCase();
-                        });
-
-                        return <td key={i}>{_.get(_.find(_.get(playerStat, 'Stats'), (p: any) => p.field === val), 'displayValue')}</td>
-                    })}
-                </tr>
+              <td key={i}>{_.get(_.find(_.get(playerStat, 'Stats'), (p: any) => p.field === val), 'displayValue')}</td>
             );
-        });
-    }
+          })}
+        </tr>
+      );
+    });
+  }
 
-    buttonRegion(title: string) {
-        let lowerTitle = title === 'All' ? 'agg' : title.toLowerCase()
-        return (
-            <button className={`button ${lowerTitle === this.state.selectedRegion ? 'button--primary' : ''}`}
-                onClick={() => {
-                    this.setState({selectedRegion: lowerTitle});
-                    this.setStatList();
-                    }}>{title}</button>
-        );
-    }
+  buttonRegion(title: string) {
+    let lowerTitle = title === 'All' ? 'agg' : title.toLowerCase();
+    return (
+      <button
+        className={`button ${lowerTitle === this.state.selectedRegion ? 'button--primary' : ''}`}
+        onClick={() => {
+          this.setState({ selectedRegion: lowerTitle });
+          this.setStatList();
+        }}
+      >
+        {title}
+      </button>
+    );
+  }
 
-    buttonMatch(title: string) {
-        let lowerTitle = title.toLowerCase()
-        return (
-            <button className={`button ${lowerTitle === this.state.selectedMatch ? 'button--primary' : ''}`}
-                onClick={() => {
-                    this.setState({selectedMatch: lowerTitle});
-                    this.setStatList();
-                    }}>{title}</button>
-        );
-    }
+  buttonMatch(title: string) {
+    let lowerTitle = title.toLowerCase();
+    return (
+      <button
+        className={`button ${lowerTitle === this.state.selectedMatch ? 'button--primary' : ''}`}
+        onClick={() => {
+          this.setState({ selectedMatch: lowerTitle });
+          this.setStatList();
+        }}
+      >
+        {title}
+      </button>
+    );
+  }
 
-    render() {
-        return (
-            <div className="pubg__container">
-                <div className="card" style={{maxWidth:'initial'}}>
-                    <div className="card__header">PUBG Stats</div>
+  render() {
+    return (
+      <div className="pubg__container">
+        <div className="card" style={{ maxWidth: 'initial' }}>
+          <div className="card__header">PUBG Stats</div>
 
-                    <div className="pubg__button-row">
-                        {this.buttonMatch('Solo')}
-                        {this.buttonMatch('Duo')}
-                        {this.buttonMatch('Squad')}
-                    </div>
+          <div className="pubg__button-row">
+            {this.buttonMatch('Solo')}
+            {this.buttonMatch('Duo')}
+            {this.buttonMatch('Squad')}
+          </div>
 
-                    <div className="pubg__button-row">
-                        {this.buttonRegion('All')}
-                        {this.buttonRegion('Na')}
-                        {this.buttonRegion('As')}
-                        {this.buttonRegion('Au')}
-                    </div>
+          <div className="pubg__button-row">
+            {this.buttonRegion('All')}
+            {this.buttonRegion('Na')}
+            {this.buttonRegion('As')}
+            {this.buttonRegion('Au')}
+          </div>
 
-                    <table className="pubg__table">
-                        <tbody>
-                            <tr>
-                                <th></th>
-                                {this.state.players.map((val: any, index: number) => {
-                                    return <th key={index}>{val.PlayerName}</th>;
-                                })}
-                            </tr>
-                            {this.insertRows()}
-                        </tbody>
-                    </table>
-
-                </div>
-            </div>
-        );
-    }
+          <table className="pubg__table">
+            <tbody>
+              <tr>
+                <th />
+                {this.state.players.map((val: any, index: number) => {
+                  return <th key={index}>{val.PlayerName}</th>;
+                })}
+              </tr>
+              {this.insertRows()}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    );
+  }
 }