wip ui for pubg

client/app/pages/Pubg/Pubg.scss

@@ -0,0 +1,19 @@
+@import "../../scss/variables";
+
+.pubg__container {
+    padding: 10px;
+}
+
+.pubg__table {
+    border-collapse: collapse;
+    width: 100%;
+    text-align: left;
+
+    tr {
+        border-top: 1px solid $gray3;
+    }
+
+    td, th {
+        padding: 5px;
+    }
+}

client/app/pages/Pubg/Pubg.tsx

@@ -1,10 +1,108 @@
 import React from 'react';
+import axios from 'axios';
+import * as _ from 'lodash';
+import './Pubg.scss';
 
-export class Pubg extends React.Component<any, any> {
+interface Props {
+
+}
+
+interface State {
+    players: Player[];
+}
+
+interface Player {
+    PlayerName: string;
+    agg?: any;
+    as?: any;
+    na?: any;
+    sa?: any;
+}
+
+export class Pubg extends React.Component<Props, State> {
+
+    constructor() {
+        super();
+        this.state = {
+            players: [],
+        };
+    }
+
+    componentDidMount() {
+        axios.get("/stats/pubg").then((res) => {
+
+        console.log(res.data);
+            this.setState({
+                players: this.filterData(res.data),
+            });
+
+            console.log(this.state.players);
+        });
+    }
+
+    filterData(data: any): Player[] {
+        return _.map(_.values(data), (data: any) => {
+
+            let regions: any = _.chain(data.Stats).groupBy('Region')
+            /*
+            .mapValues((val: any) => {
+                return  _.groupBy(val, 'Match');
+            })
+            */
+            .value();
+
+
+            _.forIn(regions, (val: any, key: string) => {
+                regions[key] = _.groupBy(val, 'Match');
+
+                _.forIn(regions[key], (val2: any, key2: string) => {
+                    //regions[key][key2] = _.groupBy(regions[key][key2][0].Stats, 'field');
+                    regions[key][key2] = _.groupBy(_.flatten(regions[key][key2][0].Stats), 'field');
+                    _.each(regions[key][key2], s => s = _.flatten(s));
+
+                    //console.log(regions[key][key2][0]);
+
+                });
+            });
+
+            //console.log(regions);
+
+            return {
+                ...{ PlayerName: data.PlayerName },
+                ...regions,
+            };
+        });
+    }
+
+    insertTableData() {
+
+        return this.state.players.map((stat: any, index: number) => {
+            return (
+                <tr key={index}>
+                    <td>{stat.PlayerName}</td>
+                </tr>
+            );
+        });
+    }
 
     render() {
         return (
-            <div>test 123</div>
+            <div className="pubg__container">
+                <div className="card">
+                    <div className="card__header">PUBG Stats</div>
+                    <table className="pubg__table">
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {this.insertTableData()}
+                        </tbody>
+                    </table>
+
+                </div>
+            </div>
         );
     }
 }

client/package.json

@@ -10,6 +10,7 @@
   "author": "Mitchell Gerber",
   "license": "MIT",
   "devDependencies": {
+    "@types/lodash": "^4.14.71",
     "@types/react": "^16.0.0",
     "@types/react-dom": "^15.5.1",
     "@types/react-dropzone": "^3.13.1",
@@ -29,6 +30,7 @@
     "extract-text-webpack-plugin": "2.0.0-rc.1",
     "file-loader": "^0.10.0",
     "html-webpack-plugin": "^2.24.1",
+    "lodash": "^4.17.4",
     "node-sass": "^4.5.3",
     "postcss-loader": "^1.2.1",
     "react": "15.6.1",

client/yarn.lock

@@ -6,6 +6,10 @@
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/@types/history/-/history-3.2.1.tgz#0039ab0e0be2a0cc22bac171d27a44588103d123"
 
+"@types/lodash@^4.14.71":
+  version "4.14.71"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.71.tgz#0dc383f78981216ac76e2f2c3afd998e0450e4c1"
+
 "@types/react-dom@^15.5.1":
   version "15.5.1"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-15.5.1.tgz#f3c3e14c682785923c7d64583537df319442dec1"
@@ -2955,7 +2959,7 @@ lodash.uniq@^4.3.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.2.0, lodash@^4.3.0:
+lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"