client: updated everything, deprecated pubg stuff

client/app/pages/Clips/Clips.tsx

@@ -10,8 +10,8 @@ interface State {
 }
 
 export class Clips extends React.Component<Props, State> {
-  constructor() {
-    super();
+  constructor(props: Props) {
+    super(props);
     this.state = {
       clipList: [],
     };
@@ -38,7 +38,7 @@ export class Clips extends React.Component<Props, State> {
     return (
       <div className="Soundboard">
         <div className="column">
-          <SoundList soundList={this.state.clipList} type="Clips"/>
+          <SoundList soundList={this.state.clipList} type="Clips" />
         </div>
       </div>
     );

client/app/pages/Downloader/Downloader.scss

@@ -1,16 +1,15 @@
 .Downloader {
-    padding: 10px;
+  padding: 10px;
 }
 
 .Downloader__input {
-    width: 100%;
-    margin-top: 10px;
-    margin-bottom: 10px;
+  width: 100%;
+  margin-top: 10px;
+  margin-bottom: 10px;
 }
 
 .Downloader__button {
-
-    & + & {
-        margin-left: 10px;
-    }
+  & + & {
+    margin-left: 10px;
+  }
 }

client/app/pages/Downloader/Downloader.tsx

@@ -3,97 +3,102 @@ import axios from 'axios';
 
 import './Downloader.scss';
 
-interface Props {
-
-}
+interface Props {}
 
 interface State {
-    fileType: string;
-    url: string;
-    message: string;
-    downloadLink: string;
-    downLoadFileName: string;
-    dataLoading: boolean;
-    dataLoaded: boolean;
+  fileType: string;
+  url: string;
+  message: string;
+  downloadLink: string;
+  downLoadFileName: string;
+  dataLoading: boolean;
+  dataLoaded: boolean;
 }
 
 export class Downloader extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      fileType: 'mp3',
+      url: '',
+      message: '',
+      dataLoaded: false,
+      downloadLink: '',
+      downLoadFileName: '',
+      dataLoading: false,
+    };
+  }
 
-    constructor(props: Props) {
-        super(props);
-        this.state = {
-            fileType: "mp3",
-            url: "",
-            message: "",
-            dataLoaded: false,
-            downloadLink: "",
-            downLoadFileName: "",
-            dataLoading: false,
-        };
+  sendRequest() {
+    if (this.state.url === '') {
+      this.setState({
+        message: 'Invalid URL',
+      });
+
+      return;
     }
 
-    sendRequest() {
-        if (this.state.url === "") {
-            this.setState({
-                message: "Invalid URL",
-            });
-
-            return;
-        }
+    this.setState({
+      message: '',
+      url: '',
+      dataLoaded: false,
+      dataLoading: true,
+    });
 
+    axios
+      .get(`/api/ytdownloader`, {
+        params: {
+          fileType: this.state.fileType,
+          url: this.state.url,
+        },
+      })
+      .then(res => {
         this.setState({
-            message: "",
-            url: "",
-            dataLoaded: false,
-            dataLoading: true,
+          dataLoaded: true,
+          dataLoading: false,
+          downloadLink: `/public/youtube/${res.data.fileName}`,
+          downLoadFileName: res.data.fileName,
         });
-
-        axios.get(`/api/ytdownloader`, {
-            params: {
-                fileType: this.state.fileType,
-                url: this.state.url,
-            }
-        }).then((res) => {
-            this.setState({
-                dataLoaded: true,
-                dataLoading: false,
-                downloadLink: `/public/youtube/${res.data.fileName}`,
-                downLoadFileName: res.data.fileName,
-            });
-        }).catch(() => {
-            this.setState({
-                message: "Internal error.",
-                dataLoading: false,
-            });
+      })
+      .catch(() => {
+        this.setState({
+          message: 'Internal error.',
+          dataLoading: false,
         });
-    }
+      });
+  }
 
-    render() {
-        return (
-            <div className="Downloader">
-                <div className="card">
-                    <div className="card__header">
-                        Youtube to MP3
-                    </div>
+  render() {
+    return (
+      <div className="Downloader">
+        <div className="card">
+          <div className="card__header">Youtube to MP3</div>
 
-                    <input placeholder="Enter Youtube URL"
-                            className="input Downloader__input"
-                            value={this.state.url}
-                            onChange={(event) => this.setState({url: event.target.value})}/>
+          <input
+            placeholder="Enter Youtube URL"
+            className="input Downloader__input"
+            value={this.state.url}
+            onChange={event => this.setState({ url: event.target.value })}
+          />
 
-                    <div style={{marginBottom:'10px'}}>
-                        <button className="button button--primary"
-                                style={{width: '100px', height: '40px', fontSize: 'large'}}
-                                onClick={this.sendRequest.bind(this)}>
-                            {this.state.dataLoading ? <i className="fa fa-spinner fa-spin fa-fw"/> : 'Convert'}
-                        </button>
-                    </div>
+          <div style={{ marginBottom: '10px' }}>
+            <button
+              className="button button--primary"
+              style={{ width: '100px', height: '40px', fontSize: 'large' }}
+              onClick={this.sendRequest.bind(this)}
+            >
+              {this.state.dataLoading ? <i className="fa fa-spinner fa-spin fa-fw" /> : 'Convert'}
+            </button>
+          </div>
 
-                    {this.state.message !== "" && <div>{this.state.message}</div>}
-                    {this.state.dataLoaded && <a href={this.state.downloadLink} download>{this.state.downLoadFileName}</a>}
-                </div>
-
-            </div>
-        );
-    }
+          {this.state.message !== '' && <div>{this.state.message}</div>}
+          {this.state.dataLoaded && (
+            <a href={this.state.downloadLink} download>
+              {this.state.downLoadFileName}
+            </a>
+          )}
+        </div>
+      </div>
+    );
+  }
 }

client/app/pages/Home/Home.scss

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

client/app/pages/Home/Home.tsx

@@ -2,50 +2,47 @@ import React from 'react';
 
 import './Home.scss';
 
-interface Props {
+interface Props {}
 
-}
-
-interface State {
-
-}
+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>
 
-    render() {
-        return (
-            <div className="Home">
-                <div className="Card">
-                    <div className="Card__header">
-                        Go Discord Bot
-                    </div>
-                    <h3>Audio Clipping</h3>
-                    <p><em>NEW:</em> Audio clipping now supported! Try it out with the <code>clip</code> command!</p>
+          <h3>04-09-18 Update</h3>
+          <ul>
+            <li>pubg stats no longer updated on this site</li>
+            <li>client dependencies all updated (including webpack 4 and react router 4)</li>
+          </ul>
 
-                    <br/>
+          <h3>Audio Clipping</h3>
+          <p>
+            <em>NEW:</em> Audio clipping now supported! Try it out with the <code>clip</code> command!
+          </p>
 
-                    <h3>PUBG Stats</h3>
-                    <p>PUBG stats are pulled from the score API.</p>
+          <h3>PUBG Stats</h3>
+          <p>PUBG stats are pulled from the score API.</p>
 
-                    <br/>
+          <h3>Youtube Downloader</h3>
+          <p>Convert Youtube URL's to MP3 files.</p>
 
-                    <h3>Youtube Downloader</h3>
-                    <p>Convert Youtube URL's to MP3 files.</p>
+          <h3>Soundboard Upload</h3>
+          <p>Drag and drop files to upload. Sounds can be played in discord by typing the commands on the next page.</p>
 
-                    <br/>
-
-                    <h3>Soundboard Upload</h3>
-                    <p>Drag and drop files to upload. Sounds can be played in discord by typing the commands on the next page.</p>
-
-                    <br/>
-
-                    <p>Check out the source code on 
-                        <a href="https://github.com/mgerb/GoBot" target="_blank"> GitHub 
-                            <i className="fa fa-github" aria-hidden="true"/>
-                        </a>
-                    </p>
-                </div>
-            </div>
-        );
-    }
+          <p>
+            Check out the source code on
+            <a href="https://github.com/mgerb/GoBot" target="_blank">
+              {' '}
+              GitHub
+              <i className="fa fa-github" aria-hidden="true" />
+            </a>
+          </p>
+        </div>
+      </div>
+    );
+  }
 }

client/app/pages/NotFound/NotFound.scss

@@ -1,8 +1,8 @@
 .NotFound {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    font-size: 20px;
-}
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  font-size: 20px;
+}

client/app/pages/NotFound/NotFound.tsx

@@ -1,20 +1,12 @@
 import React from 'react';
 import './NotFound.scss';
 
-interface Props {
+interface Props {}
 
-}
-
-interface State {
-
-}
+interface State {}
 
 export class NotFound extends React.Component<Props, State> {
-    render() {
-        return (
-            <div className="NotFound">
-                404 Not Found
-            </div>
-        );
-    }
+  render() {
+    return <div className="NotFound">404 Not Found</div>;
+  }
 }

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>
+    );
+  }
 }

client/app/pages/Soundboard/Soundboard.scss

@@ -1,40 +1,40 @@
 @import '../../scss/variables';
 
 .Soundboard {
-    display: flex;
-    padding: 10px;
+  display: flex;
+  padding: 10px;
 }
 
 .Soundboard__column {
-    flex: 1;    
+  flex: 1;
 }
 
 .Soundboard__input {
-    display: block;
-    width: 200px;
-    margin-bottom: 10px;
-    margin-right: auto;
-    margin-left: auto;
+  display: block;
+  width: 200px;
+  margin-bottom: 10px;
+  margin-right: auto;
+  margin-left: auto;
 }
 
 .Dropzone {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border: 2px solid $primaryBlue;
-    border-radius: 1em;
-    padding: 20px;
-    margin-right: auto;
-    margin-left: auto;
-    color: $lightGray;
-    width: 400px;
-    height: 400px;
-    background-color: $gray2;
-    transition: box-shadow 0.1s linear, background-color 0.1s linear;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid $primaryBlue;
+  border-radius: 1em;
+  padding: 20px;
+  margin-right: auto;
+  margin-left: auto;
+  color: $lightGray;
+  width: 400px;
+  height: 400px;
+  background-color: $gray2;
+  transition: box-shadow 0.1s linear, background-color 0.1s linear;
 }
 
 .Dropzone--active {
-    background-color: $gray3;
-    box-shadow: 0px 0px 5px 1px $primaryBlue;
+  background-color: $gray3;
+  box-shadow: 0px 0px 5px 1px $primaryBlue;
 }

client/app/pages/Soundboard/Soundboard.tsx

@@ -22,8 +22,8 @@ export class Soundboard extends React.Component<Props, State> {
   private config: AxiosRequestConfig;
   private soundListCache: any;
 
-  constructor() {
-    super();
+  constructor(props: Props) {
+    super(props);
     (this.state = {
       percentCompleted: 0,
       uploaded: false,
@@ -37,13 +37,11 @@ export class Soundboard extends React.Component<Props, State> {
     this.config = {
       headers: {
         'Content-Type': 'multipart/form-data',
-        'Authorization': `Bearer ${storage.getJWT()}`
+        Authorization: `Bearer ${storage.getJWT()}`,
       },
       onUploadProgress: progressEvent => {
         this.setState({
-          percentCompleted: Math.round(
-            progressEvent.loaded * 100 / progressEvent.total,
-          ),
+          percentCompleted: Math.round(progressEvent.loaded * 100 / progressEvent.total),
         });
       },
     };
@@ -123,16 +121,8 @@ export class Soundboard extends React.Component<Props, State> {
               accept={'audio/*'}
             >
               <div style={{ fontSize: '20px' }}>Drop file here to upload.</div>
-              {this.state.percentCompleted > 0 ? (
-                <div>Uploading: {this.state.percentCompleted}</div>
-              ) : (
-                ''
-              )}
-              {this.state.uploaded ? (
-                <div style={{ color: 'green' }}>File uploded!</div>
-              ) : (
-                ''
-              )}
+              {this.state.percentCompleted > 0 ? <div>Uploading: {this.state.percentCompleted}</div> : ''}
+              {this.state.uploaded ? <div style={{ color: 'green' }}>File uploded!</div> : ''}
               <div style={{ color: '#f95f59' }}>{this.state.uploadError}</div>
             </Dropzone>
           </div>

client/app/pages/oauth/oauth.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { get } from 'lodash';
 import axios from 'axios';
+import queryString from 'query-string';
+import { RouteComponentProps } from 'react-router-dom';
 import { storage } from '../../storage';
 
-interface Props {}
+interface Props extends RouteComponentProps<any> {}
 
 interface State {}
 
@@ -13,11 +14,11 @@ export class Oauth extends React.Component<Props, State> {
   }
 
   componentDidMount() {
-    const code = get(this, 'props.location.query.code');
+    const params = queryString.parse(this.props.location.search);
 
-    if (code) {
+    if (params['code']) {
       // do stuff here
-      this.fetchOauth(code as string);
+      this.fetchOauth(params['code']);
     }
   }