audio clips - client done

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

@@ -1,104 +0,0 @@
-import React from 'react';
-import axios from 'axios';
-
-import './SoundList.scss';
-
-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 = {
-            soundList: [],
-            showAudioControls: [],
-        };
-    }
-    
-    componentDidMount() {
-        this.getSoundList();
-    }
-    
-    getSoundList() {
-        if (!this.soundListCache) {
-            axios.get("/soundlist").then((response) => {
-                this.soundListCache = response.data;
-                this.setState({
-                    soundList: response.data,
-                });
-            }).catch(() => {
-                //console.warn(error.response.data);
-            });
-        } else {
-            this.setState({
-                soundList: this.soundListCache,
-            });
-        }
-    }
-    
-    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;
-
-        this.setState({
-            showAudioControls: temp,
-        });
-    }
-    
-    render() {
-        return (
-            <div className="Card">
-                <div className="Card__header" style={{display:'flex'}}>
-                    <div>
-                        Sounds
-                        <i className="fa fa fa-volume-up" aria-hidden="true"/>
-                    </div>
-                    <div style={{flex:1}}/>
-                    <div>({this.state.soundList.length})</div>
-                </div>
-                
-                {this.state.soundList.length > 0 ? this.state.soundList.map((sound, index) => {
-                    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/sounds/" + 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>
-        );
-    }
-}

client/app/pages/Soundboard/SoundList.scss

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

client/app/pages/Soundboard/Soundboard.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Dropzone from 'react-dropzone';
 import axios, { AxiosRequestConfig } from 'axios';
 
-import { SoundList } from './SoundList.component';
+import { SoundList, SoundType } from '../../components/SoundList';
 
 import './Soundboard.scss';
 
@@ -17,12 +17,13 @@ interface State {
     password: string;
     uploaded: boolean;
     uploadError: string;
+    soundList: SoundType[];
 }
 
 export class Soundboard extends React.Component<Props, State> {
     
     private config: AxiosRequestConfig;
-    public refs: any;
+    private soundListCache: any;
 
     constructor() {
         super();
@@ -31,6 +32,7 @@ export class Soundboard extends React.Component<Props, State> {
             password: "",
             uploaded: false,
             uploadError: " ",
+            soundList: [],
         },
 
         self = this;
@@ -47,8 +49,27 @@ export class Soundboard extends React.Component<Props, State> {
                 });
             }
         };
+
+        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]);
@@ -61,7 +82,7 @@ export class Soundboard extends React.Component<Props, State> {
         formData.append("file", file);
         formData.append("password", this.state.password);
         
-        axios.put("/upload", formData, this.config)
+        axios.put("/api/upload", formData, this.config)
             .then(() => {
                 this.setState({
                     password: "",
@@ -70,9 +91,8 @@ export class Soundboard extends React.Component<Props, State> {
                     uploadError: " ",
                 });
                 
-                // reset sound list cache and load the new list
-                this.refs.SoundList.soundListCache = undefined;
-                this.refs.SoundList.getSoundList();
+                this.soundListCache = undefined;
+                this.getSoundList();
             }).catch((err) => {
                 this.setState({
                     percentCompleted: 0,
@@ -89,10 +109,11 @@ export class Soundboard extends React.Component<Props, State> {
     }
     
     render() {
+        const { soundList } = this.state;
         return (
             <div className="Soundboard">
                 <div className="column">
-                    <SoundList ref="SoundList"/>
+                    <SoundList soundList={soundList} type="Sounds"/>
                 </div>
             
                 <div className="column">