use oauth for file uploads

client/app/pages/Pubg/Pubg.tsx

@@ -1,3 +1,4 @@
+// DEPRECATED
 import React from 'react';
 import axios from 'axios';
 import * as _ from 'lodash';

client/app/pages/Soundboard/Soundboard.tsx

@@ -5,141 +5,139 @@ import axios, { AxiosRequestConfig } from 'axios';
 import { SoundList, SoundType } from '../../components/SoundList';
 
 import './Soundboard.scss';
+import { storage } from '../../storage';
 
 let self: any;
 
-interface Props {
-
-}
+interface Props {}
 
 interface State {
-    percentCompleted: number;
-    password: string;
-    uploaded: boolean;
-    uploadError: string;
-    soundList: SoundType[];
+  percentCompleted: number;
+  uploaded: boolean;
+  uploadError: string;
+  soundList: SoundType[];
 }
 
 export class Soundboard extends React.Component<Props, State> {
-    
-    private config: AxiosRequestConfig;
-    private soundListCache: any;
+  private config: AxiosRequestConfig;
+  private soundListCache: any;
 
-    constructor() {
-        super();
-        this.state = {
-            percentCompleted: 0,
-            password: "",
-            uploaded: false,
-            uploadError: " ",
-            soundList: [],
-        },
+  constructor() {
+    super();
+    (this.state = {
+      percentCompleted: 0,
+      uploaded: false,
+      uploadError: ' ',
+      soundList: [],
+    }),
+      (self = this);
+  }
 
-        self = this;
-    }
-    
-    componentDidMount() {
-        this.config = {
-            headers: {
-                'Content-Type': 'multipart/form-data',
-            },
-            onUploadProgress: (progressEvent) => {
-                this.setState({
-                    percentCompleted: Math.round( (progressEvent.loaded * 100) / progressEvent.total ),
-                });
-            }
-        };
-
-        this.getSoundList();
-    }
-    
-    private getSoundList() {
-        if (!this.soundListCache) {
-            axios.get("/api/soundlist").then((response) => {
-                this.soundListCache = response.data;
-                this.setState({
-                    soundList: response.data,
-                });
-            }).catch((error: any) => {
-                console.error(error.response.data);
-            });
-        } else {
-            this.setState({
-                soundList: this.soundListCache,
-            });
-        }
-    }
-
-    onDrop(acceptedFiles: any) {
-        if (acceptedFiles.length > 0) {
-            self.uploadFile(acceptedFiles[0]);
-        }
-    }
-    
-    uploadFile(file: any) {
-        let formData = new FormData();
-        formData.append("name", file.name);
-        formData.append("file", file);
-        formData.append("password", this.state.password);
-        
-        axios.post("/api/upload", formData, this.config)
-            .then(() => {
-                this.setState({
-                    password: "",
-                    percentCompleted: 0,
-                    uploaded: true,
-                    uploadError: " ",
-                });
-                
-                this.soundListCache = undefined;
-                this.getSoundList();
-            }).catch((err) => {
-                this.setState({
-                    percentCompleted: 0,
-                    uploaded: false,
-                    uploadError: err.response.data,
-                });
-            });
-    }
-    
-    passwordOnChange(event: any) {
+  componentDidMount() {
+    this.config = {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+        'Authorization': `Bearer ${storage.getJWT()}`
+      },
+      onUploadProgress: progressEvent => {
         this.setState({
-            password: event.target.value,
+          percentCompleted: Math.round(
+            progressEvent.loaded * 100 / progressEvent.total,
+          ),
         });
+      },
+    };
+
+    this.getSoundList();
+  }
+
+  private getSoundList() {
+    if (!this.soundListCache) {
+      axios
+        .get('/api/soundlist')
+        .then(response => {
+          this.soundListCache = response.data;
+          this.setState({
+            soundList: response.data,
+          });
+        })
+        .catch((error: any) => {
+          console.error(error.response.data);
+        });
+    } else {
+      this.setState({
+        soundList: this.soundListCache,
+      });
     }
-    
-    render() {
-        const { soundList } = this.state;
-        return (
-            <div className="Soundboard">
-                <div className="column">
-                    <SoundList soundList={soundList} type="Sounds"/>
-                </div>
-            
-                <div className="column">
-                    <div>
-                        <Dropzone className="Dropzone"
-                                activeClassName="Dropzone--active"
-                                onDrop={this.onDrop}
-                                multiple={false}
-                                disableClick={true}
-                                maxSize={10000000000}
-                                accept={"audio/*"}>
-                                
-                            <input className="input Soundboard__input"
-                                    type="password"
-                                    placeholder="Password"
-                                    value={this.state.password}
-                                    onChange={this.passwordOnChange.bind(this)}/>
-                                
-                            <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> : ""}
-                            <div style={{color: '#f95f59'}}>{this.state.uploadError}</div>
-                        </Dropzone>
-                    </div>
-                </div>
-            </div>
-        );
+  }
+
+  onDrop(acceptedFiles: any) {
+    if (acceptedFiles.length > 0) {
+      self.uploadFile(acceptedFiles[0]);
     }
+  }
+
+  uploadFile(file: any) {
+    let formData = new FormData();
+    formData.append('name', file.name);
+    formData.append('file', file);
+
+    axios
+      .post('/api/upload', formData, this.config)
+      .then(() => {
+        this.setState({
+          percentCompleted: 0,
+          uploaded: true,
+          uploadError: ' ',
+        });
+
+        this.soundListCache = undefined;
+        this.getSoundList();
+      })
+      .catch(err => {
+        this.setState({
+          percentCompleted: 0,
+          uploaded: false,
+          uploadError: err.response.data,
+        });
+      });
+  }
+
+  render() {
+    const { soundList } = this.state;
+    return (
+      <div className="Soundboard">
+        <div className="column">
+          <SoundList soundList={soundList} type="Sounds" />
+        </div>
+
+        <div className="column">
+          <div>
+            <Dropzone
+              className="Dropzone"
+              activeClassName="Dropzone--active"
+              onDrop={this.onDrop}
+              multiple={false}
+              disableClick={true}
+              maxSize={10000000000}
+              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>
+              ) : (
+                ''
+              )}
+              <div style={{ color: '#f95f59' }}>{this.state.uploadError}</div>
+            </Dropzone>
+          </div>
+        </div>
+      </div>
+    );
+  }
 }

client/app/pages/oauth/oauth.tsx

@@ -1,36 +1,37 @@
 import React from 'react';
 import { get } from 'lodash';
 import axios from 'axios';
+import { storage } from '../../storage';
 
-interface Props {
-    
-}
+interface Props {}
 
-interface State {
-    
-}
+interface State {}
 
 export class Oauth extends React.Component<Props, State> {
-    
-    constructor(props: Props) {
-        super(props);
+  constructor(props: Props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    const code = get(this, 'props.location.query.code');
+
+    if (code) {
+      // do stuff here
+      this.fetchOauth(code as string);
     }
-    
-    componentDidMount() {
-        const code = get(this, 'props.location.query.code');
-        
-        if (code) {
-            // do stuff here
-            this.fetchOauth(code as string);
-        }
-    }
-    
-    private async fetchOauth(code: string) {
-        const res = await axios.post('/api/oauth', { code });
-        console.log(res);
-    }
-    
-    render() {
-        return <div></div>
+  }
+
+  private async fetchOauth(code: string) {
+    try {
+      const res = await axios.post('/api/oauth', { code });
+      storage.setJWT(res.data);
+      window.location.href = '/';
+    } catch (e) {
+      console.error(e);
     }
+  }
+
+  render() {
+    return <div />;
+  }
 }