client: updated everything, deprecated pubg stuff

client/app/components/Navbar/Navbar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router';
+import { NavLink } from 'react-router-dom';
 import jwt_decode from 'jwt-decode';
 
 import './Navbar.scss';
@@ -15,7 +15,6 @@ if (!process.env.NODE_ENV) {
   oauthUrl = `https://discordapp.com/api/oauth2/authorize?client_id=271998875802402816&redirect_uri=https%3A%2F%2Fcashdiscord.com%2Foauth&response_type=code&scope=identify%20guilds%20email`;
 }
 
-
 interface Props {}
 
 interface State {
@@ -24,7 +23,6 @@ interface State {
 }
 
 export class Navbar extends React.Component<Props, State> {
-
   constructor(props: Props) {
     super(props);
     this.state = {
@@ -37,6 +35,7 @@ export class Navbar extends React.Component<Props, State> {
 
     if (token) {
       const claims: any = jwt_decode(token!);
+      console.log(claims);
       const email = claims['email'];
       this.setState({ token, email });
     }
@@ -45,23 +44,34 @@ export class Navbar extends React.Component<Props, State> {
   private logout = () => {
     localStorage.clear();
     window.location.href = '/';
-  }
+  };
 
   render() {
     return (
       <div className="Navbar">
         <div className="Navbar__header">Go Discord Bot</div>
-        <Link to="/" className="Navbar__item" onlyActiveOnIndex activeClassName="Navbar__item--active">Home</Link>
-        <Link to="/soundboard" className="Navbar__item" activeClassName="Navbar__item--active">Soundboard</Link>
-        <Link to="/downloader" className="Navbar__item" activeClassName="Navbar__item--active">Youtube Downloader</Link>
-        {/* PUBG - DEPRECATED */}
-        {/* <Link to="/pubg" className="Navbar__item" activeClassName="Navbar__item--active">Pubg</Link> */}
-        <Link to="/clips" className="Navbar__item" activeClassName="Navbar__item--active">Clips</Link>
+        <NavLink exact to="/" className="Navbar__item" activeClassName="Navbar__item--active">
+          Home
+        </NavLink>
+        <NavLink to="/soundboard" className="Navbar__item" activeClassName="Navbar__item--active">
+          Soundboard
+        </NavLink>
+        <NavLink to="/downloader" className="Navbar__item" activeClassName="Navbar__item--active">
+          Youtube Downloader
+        </NavLink>
+        <NavLink to="/clips" className="Navbar__item" activeClassName="Navbar__item--active">
+          Clips
+        </NavLink>
 
-        { !this.state.token ?
-          <a href={oauthUrl} className="Navbar__item">Login</a> :
-          <a className="Navbar__item" onClick={this.logout}>Logout</a>
-        }
+        {!this.state.token ? (
+          <a href={oauthUrl} className="Navbar__item">
+            Login
+          </a>
+        ) : (
+          <a className="Navbar__item" onClick={this.logout}>
+            Logout
+          </a>
+        )}
 
         {this.state.email && <div className="Navbar__email">{this.state.email}</div>}
       </div>

client/app/components/SoundList/SoundList.scss

@@ -1,12 +1,12 @@
-@import "../../scss/variables";
+@import '../../scss/variables';
 
 .SoundList__item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 50px;
-    
-    & + .SoundList__item {
-        border-top: 1px solid $gray3;
-    }
-}
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 50px;
+
+  & + .SoundList__item {
+    border-top: 1px solid $gray3;
+  }
+}

client/app/components/SoundList/SoundList.tsx

@@ -3,81 +3,85 @@ import React from 'react';
 import './SoundList.scss';
 
 interface Props {
-    soundList: SoundType[];
-    type: string;
+  soundList: SoundType[];
+  type: string;
 }
 
 interface State {
-    showAudioControls: boolean[];
+  showAudioControls: boolean[];
 }
 
 export interface SoundType {
-    extension: string;
-    name: string;
-    prefix?: string;
+  extension: string;
+  name: string;
+  prefix?: string;
 }
 
 export class SoundList extends React.Component<Props, State> {
-    
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      showAudioControls: [],
+    };
+  }
 
-    constructor() {
-        super();
-        this.state = {
-            showAudioControls: [],
-        };
-    }
-    
-    checkExtension(extension: string) {
-        switch(extension) {
-        case "wav":
-            return true;
-        case "mp3":
-            return true;
-        case "mpeg":
-            return true;
-        default:
-            return false;
-        }
+  checkExtension(extension: string) {
+    switch (extension) {
+      case 'wav':
+        return true;
+      case 'mp3':
+        return true;
+      case 'mpeg':
+        return true;
+      default:
+        return false;
     }
+  }
 
-    handleShowAudio(index: any) {
-        let temp = this.state.showAudioControls;
-        temp[index] = true;
+  handleShowAudio(index: any) {
+    let temp = this.state.showAudioControls;
+    temp[index] = true;
 
-        this.setState({
-            showAudioControls: temp,
-        });
-    }
-    
-    render() {
+    this.setState({
+      showAudioControls: temp,
+    });
+  }
 
-        const { soundList, type } = this.props;
+  render() {
+    const { soundList, type } = this.props;
 
-        return (
-            <div className="Card">
-                <div className="Card__header" style={{display:'flex'}}>
-                    <div>
-                        <span>{type}</span>
-                        <i className="fa fa fa-volume-up" aria-hidden="true"/>
-                    </div>
-                    <div style={{flex:1}}/>
-                    <div>({soundList.length})</div>
+    return (
+      <div className="Card">
+        <div className="Card__header" style={{ display: 'flex' }}>
+          <div>
+            <span>{type}</span>
+            <i className="fa fa fa-volume-up" aria-hidden="true" />
+          </div>
+          <div style={{ flex: 1 }} />
+          <div>({soundList.length})</div>
+        </div>
+
+        {soundList.length > 0
+          ? soundList.map((sound: SoundType, index: number) => {
+              return (
+                <div key={index} className="SoundList__item">
+                  <div>{(sound.prefix || '') + sound.name}</div>
+
+                  {this.checkExtension(sound.extension) && this.state.showAudioControls[index] ? (
+                    <audio
+                      controls
+                      src={`/public/${type.toLowerCase()}/` + sound.name + '.' + sound.extension}
+                      itemType={'audio/' + sound.extension}
+                      style={{ width: '100px' }}
+                    />
+                  ) : (
+                    <i className="fa fa-play link" aria-hidden="true" onClick={() => this.handleShowAudio(index)} />
+                  )}
                 </div>
-                
-                {soundList.length > 0 ? soundList.map((sound: SoundType, index: number) => {
-                    return (
-                        <div key={index} className="SoundList__item">
-                            <div>{(sound.prefix || '') + sound.name}</div>
-                            
-                            {this.checkExtension(sound.extension) && this.state.showAudioControls[index] ?
-                            <audio controls src={`/public/${type.toLowerCase()}/` + sound.name + "." + sound.extension}
-                                    itemType={"audio/" + sound.extension}
-                                    style={{width: "100px"}}/>
-                            : <i className="fa fa-play link" aria-hidden="true" onClick={() => this.handleShowAudio(index)}/> }
-                        </div>
-                    );
-                }) : null}
-            </div>
-        );
-    }
+              );
+            })
+          : null}
+      </div>
+    );
+  }
 }