typescript conversion

client/app/pages/Soundboard/SoundList.component.tsx

@@ -3,8 +3,23 @@ import axios from 'axios';
 
 import './SoundList.scss';
 
-export default class SoundList extends React.Component {
+interface Props {
+
+}
+
+interface State {
+    showAudioControls: boolean[];
+    soundList: {
+        extension: string;
+        name: string;
+        prefix: string;
+    }[];
+}
+
+export class SoundList extends React.Component<Props, State> {
     
+    private soundListCache: any;
+
     constructor() {
         super();
         this.state = {
@@ -34,7 +49,7 @@ export default class SoundList extends React.Component {
         }
     }
     
-    checkExtension(extension) {
+    checkExtension(extension: string) {
         switch(extension) {
         case "wav":
             return true;
@@ -47,7 +62,7 @@ export default class SoundList extends React.Component {
         }
     }
 
-    handleShowAudio(index) {
+    handleShowAudio(index: any) {
         let temp = this.state.showAudioControls;
         temp[index] = true;
 
@@ -77,7 +92,7 @@ export default class SoundList extends React.Component {
                             
                             {this.checkExtension(sound.extension) && this.state.showAudioControls[index] ?
                             <audio controls src={"/public/sounds/" + sound.name + "." + sound.extension}
-                                    type={"audio/" + sound.extension}
+                                    itemType={"audio/" + sound.extension}
                                     style={{width: "100px"}}/>
                             : <i className="fa fa-play link" aria-hidden="true" onClick={() => this.handleShowAudio(index)}/> }
                         </div>

client/app/pages/Soundboard/Soundboard.tsx

@@ -1,15 +1,29 @@
 import React from 'react';
 import Dropzone from 'react-dropzone';
-import axios from 'axios';
+import axios, { AxiosRequestConfig } from 'axios';
 
-import SoundList from './SoundList.component';
+import { SoundList } from './SoundList.component';
 
 import './Soundboard.scss';
 
-let self;
+let self: any;
 
-export default class Soundboard extends React.Component {
+interface Props {
+
+}
+
+interface State {
+    percentCompleted: number;
+    password: string;
+    uploaded: boolean;
+    uploadError: string;
+}
+
+export class Soundboard extends React.Component<Props, State> {
     
+    private config: AxiosRequestConfig;
+    public refs: any;
+
     constructor() {
         super();
         this.state = {
@@ -35,13 +49,13 @@ export default class Soundboard extends React.Component {
         };
     }
     
-    onDrop(acceptedFiles) {
+    onDrop(acceptedFiles: any) {
         if (acceptedFiles.length > 0) {
             self.uploadFile(acceptedFiles[0]);
         }
     }
     
-    uploadFile(file) {
+    uploadFile(file: any) {
         let formData = new FormData();
         formData.append("name", file.name);
         formData.append("file", file);
@@ -68,7 +82,7 @@ export default class Soundboard extends React.Component {
             });
     }
     
-    passwordOnChange(event) {
+    passwordOnChange(event: any) {
         this.setState({
             password: event.target.value,
         });