typescript conversion

client/app/Wrapper.tsx

@@ -1,10 +1,22 @@
 import React from 'react';
-import Navbar from './components/Navbar/Navbar.component';
+import { Navbar } from './components/Navbar/Navbar.component';
 
 //styling
 import './scss/index.scss';
 
-export default class Wrapper extends React.Component {
+interface Props {
+
+}
+
+interface State {
+
+}
+
+export class Wrapper extends React.Component<Props, State> {
+
+    constructor() {
+        super();
+    }
 
     render() {
         return (
@@ -17,7 +29,3 @@ export default class Wrapper extends React.Component {
         );
     }
 }
-
-Wrapper.propTypes = {
-    children: React.PropTypes.node,
-};

client/app/app.tsx

@@ -2,11 +2,12 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router, Route, IndexRoute, browserHistory } from 'react-router';
 
-import Wrapper from './Wrapper';
-import Home from './pages/Home/Home';
-import Soundboard from './pages/Soundboard/Soundboard';
-import NotFound from './pages/NotFound/NotFound';
-import Downloader from './pages/Downloader/Downloader';
+import { Wrapper } from './Wrapper';
+import { Home } from './pages/Home/Home';
+import { Soundboard } from './pages/Soundboard/Soundboard';
+import { NotFound } from './pages/NotFound/NotFound';
+import { Downloader } from './pages/Downloader/Downloader';
+import { Pubg } from './pages/Pubg/Pubg';
 
 ReactDOM.render(
     <Router history={browserHistory}>
@@ -14,6 +15,7 @@ ReactDOM.render(
             <IndexRoute component={Home}/>
             <Route path="/soundboard" component={Soundboard}/>
             <Route path="/downloader" component={Downloader}/>
+            <Route path="/pubg" component={Pubg}/>
             <Route path="*" component={NotFound}/>
         </Route>
     </Router>

client/app/components/Navbar/Navbar.component.tsx

@@ -3,7 +3,15 @@ import { Link } from 'react-router';
 
 import './Navbar.scss';
 
-export default class Navbar extends React.Component {
+interface Props {
+
+}
+
+interface State {
+
+}
+
+export class Navbar extends React.Component<Props, State> {
 
     render() {
         return (
@@ -12,11 +20,8 @@ export default class Navbar extends React.Component {
                 <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>
+                <Link to="/pubg" className="Navbar__item" activeClassName="Navbar__item--active">Pubg</Link>
             </div>
         );
     }
 }
-
-Navbar.propTypes = {
-    children: React.PropTypes.node,
-};

client/app/pages/Downloader/Downloader.tsx

@@ -3,9 +3,23 @@ import axios from 'axios';
 
 import './Downloader.scss';
 
-export default class Downloader extends React.Component {
+interface Props {
 
-    constructor(props) {
+}
+
+interface State {
+    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",

client/app/pages/Home/Home.tsx

@@ -2,7 +2,16 @@ import React from 'react';
 
 import './Home.scss';
 
-export default class Home extends React.Component {
+interface Props {
+
+}
+
+interface State {
+
+}
+
+export class Home extends React.Component<Props, State> {
+
     render() {
         return (
             <div className="Home">

client/app/pages/NotFound/NotFound.tsx

@@ -1,7 +1,15 @@
 import React from 'react';
 import './NotFound.scss';
 
-export default class Default extends React.Component {
+interface Props {
+
+}
+
+interface State {
+
+}
+
+export class NotFound extends React.Component<Props, State> {
     render() {
         return (
             <div className="NotFound">

client/app/pages/Pubg/Pubg.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export class Pubg extends React.Component<any, any> {
+
+    render() {
+        return (
+            <div>test 123</div>
+        );
+    }
+}

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