major file refactor - fix disconnecting bug

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import axios from 'axios';
+
+import './SoundList.scss';
+
+export default class SoundList extends React.Component {
+    
+    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) {
+        switch(extension) {
+        case "wav":
+            return true;
+        case "mp3":
+            return true;
+        case "mpeg":
+            return true;
+        default:
+            return false;
+        }
+    }
+
+    handleShowAudio(index) {
+        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={"/sounds/" + sound.name + "." + sound.extension}
+                                    type={"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

@@ -0,0 +1,12 @@
+@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.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import Dropzone from 'react-dropzone';
+import axios from 'axios';
+
+import SoundList from './SoundList.component';
+
+import './Soundboard.scss';
+
+let self;
+
+export default class Soundboard extends React.Component {
+    
+    constructor() {
+        super();
+        this.state = {
+            percentCompleted: 0,
+            password: "",
+            uploaded: false,
+            uploadError: " ",
+        }
+        self = this;
+    }
+    
+    componentDidMount() {
+        this.config = {
+            headers: {
+                'Content-Type': 'multipart/form-data',
+            },
+            onUploadProgress: (progressEvent) => {
+                this.setState({
+                    percentCompleted: Math.round( (progressEvent.loaded * 100) / progressEvent.total ),
+                });
+            }
+        };
+    }
+    
+    onDrop(acceptedFiles, rejectedFiles) {
+        if (acceptedFiles.length > 0) {
+            self.uploadFile(acceptedFiles[0]);
+        }
+    }
+    
+    uploadFile(file) {
+        let formData = new FormData();
+        formData.append("name", file.name);
+        formData.append("file", file);
+        formData.append("password", this.state.password);
+        
+        axios.put("/upload", formData, this.config)
+            .then(() => {
+                this.setState({
+                    password: "",
+                    percentCompleted: 0,
+                    uploaded: true,
+                    uploadError: " ",
+                });
+                
+                // reset sound list cache and load the new list
+                this.refs.SoundList.soundListCache = undefined;
+                this.refs.SoundList.getSoundList();
+            }).catch((err) => {
+                this.setState({
+                    percentCompleted: 0,
+                    uploaded: false,
+                    uploadError: err.response.data,
+                });
+            });
+    }
+    
+    passwordOnChange(event) {
+        this.setState({
+            password: event.target.value,
+        });
+    }
+    
+    render() {
+        return (
+            <div className="Soundboard">
+                <div className="column">
+                    <SoundList ref="SoundList"/>
+                </div>
+            
+                <div className="column">
+                    <div>
+                        <Dropzone className="Dropzone"
+                                activeClassName="Dropzone--active"
+                                onDrop={this.onDrop}
+                                multiple={false}
+                                disableClick={true}
+                                maxSize={10000000000}
+                                accept={"audio/*"}>
+                                
+                            <input className="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>
+        )
+    }
+}

client/app/pages/Soundboard/Soundboard.scss

@@ -0,0 +1,45 @@
+@import '../../scss/variables';
+
+.Soundboard {
+    display: flex;
+    padding: 10px;
+}
+
+.Soundboard__column {
+    flex: 1;    
+}
+
+.Soundboard__input {
+    display: block;
+    width: 200px;
+    border-radius: 3px;
+    border: 1px solid lighten($gray1, 5%);
+    margin-bottom: 10px;
+    margin-right: auto;
+    margin-left: auto;
+    padding-left: 5px;
+    padding-right: 5px;
+    height: 30px;
+}
+
+.Dropzone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid $primaryBlue;
+    border-radius: 1em;
+    padding: 20px;
+    margin-right: auto;
+    margin-left: auto;
+    color: lighten($gray1, 15%);
+    width: 400px;
+    height: 400px;
+    background-color: $gray2;
+    transition: box-shadow 0.1s linear, background-color 0.1s linear;
+}
+
+.Dropzone--active {
+    background-color: $gray3;
+    box-shadow: 0px 0px 5px 1px $primaryBlue;
+}