added soundlist to client

app/Wrapper.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Navbar from './components/Navbar/Navbar';
+import Navbar from './components/Navbar/Navbar.component';
 
 //styling
 import './scss/index.scss';

app/pages/Soundboard/SoundList.component.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import axios from 'axios';
+
+import './SoundList.scss';
+
+let soundListCache;
+
+export default class SoundList extends React.Component {
+    
+    constructor() {
+        super();
+        this.state = {
+            soundList: [],
+        };
+    }
+    
+    componentDidMount() {
+        this.getSoundList();
+    }
+    
+    getSoundList() {
+        if (!soundListCache) {
+            axios.get("/soundlist")
+                .then((response) => {
+                    soundListCache = response.data;
+                    this.setState({
+                        soundList: response.data,
+                    });
+                }).catch((error) => {
+                    console.warn(error.response.data);
+                });
+        } else {
+            this.setState({
+                soundList: soundListCache,
+            });
+        }
+    }
+    
+    checkExtension(extension) {
+        console.log(extension);
+        switch(extension) {
+            case "wav":
+                return true;
+            case "wav":
+                return true;
+            case "wav":
+                return true;
+            default:
+                console.log("not working");
+                return false;
+        }
+    }
+    
+    render() {
+        return (
+            <div className="Card">
+                <div className="Card__header">
+                    Sounds
+                <i className="fa fa fa-volume-up" aria-hidden="true"></i>
+                </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) ?
+                        <audio controls src={"/sounds/" + sound.name + "." + sound.extension}
+                                type={"audio/" + sound.extension}
+                                style={{width: "100px"}}/>
+                        : null}
+                    </div>
+                }) : null}
+            </div>
+        );
+    }
+}

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;
+    }
+}

app/pages/Soundboard/Soundboard.js

@@ -2,6 +2,8 @@ import React from 'react';
 import Dropzone from 'react-dropzone';
 import axios from 'axios';
 
+import SoundList from './SoundList.component';
+
 import './Soundboard.scss';
 
 let self;
@@ -11,9 +13,10 @@ export default class Soundboard extends React.Component {
     constructor() {
         super();
         this.state = {
-            uploaded: false,
             percentCompleted: 0,
             password: "",
+            uploaded: false,
+            uploadError: " ",
         }
         self = this;
     }
@@ -49,14 +52,13 @@ export default class Soundboard extends React.Component {
                     password: "",
                     percentCompleted: 0,
                     uploaded: true,
-                    uploadError: undefined,
+                    uploadError: " ",
                 });
             }).catch((err) => {
                 this.setState({
-                    password: "",
                     percentCompleted: 0,
                     uploaded: false,
-                    uploadError: "Upload error.",
+                    uploadError: err.response.data,
                 });
             });
     }
@@ -70,25 +72,33 @@ export default class Soundboard extends React.Component {
     render() {
         return (
             <div className="Soundboard">
+                <div className="column">
+                    <SoundList/>
+                </div>
             
-            <input className="Soundboard__input"
-                    type="password"
-                    placeholder="Password"
-                    value={this.state.password}
-                    onChange={this.passwordOnChange.bind(this)}></input>
-            <div>
-                <Dropzone className="Dropzone"
-                        activeClassName="Dropzone--active"
-                        onDrop={this.onDrop}
-                        multiple={false}
-                        accept={"audio/*"}>
-                        
-                    <div>Drop file here to upload.</div>
-                    {this.state.percentCompleted > 0 ? <div>Progress: {this.state.percentCompleted}</div> : ""}
-                    {this.state.uploaded ? <div>File uploded!</div> : ""}
-                    {this.state.uploadError ? <div>{this.state.uploadError}</div> : ""}
-                </Dropzone>
-            </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>
         )
     }

app/pages/Soundboard/Soundboard.scss

@@ -2,16 +2,21 @@
 
 .Soundboard {
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
+    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;
@@ -22,16 +27,19 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    border: 2px solid lighten($gray1, 10%);
-    padding: 20px;
-    color: lighten($gray1, 15%);
+    border: 2px solid $primaryBlue;
     border-radius: 1em;
-    width: 300px;
-    height: 300px;
+    padding: 20px;
+    margin-right: auto;
+    margin-left: auto;
+    color: lighten($gray1, 15%);
+    width: 400px;
+    height: 400px;
     background-color: $gray2;
-    transition: background-color 0.1s linear;
+    transition: box-shadow 0.1s linear, background-color 0.1s linear;
 }
 
 .Dropzone--active {
-    background-color: $primaryBlue;
+    background-color: $gray3;
+    box-shadow: 0px 0px 5px 1px $primaryBlue;
 }

app/scss/style.scss

@@ -26,7 +26,9 @@ body {
 .Card {
     background-color: $gray2;
     border-radius: 5px;
+    max-width: 800px;
     padding: 10px;
+    border: 1px solid $gray3;
 }
 
 .Card__header {
@@ -39,4 +41,12 @@ body {
     border-radius: 5px 5px 0 0;
     font-size: 25px;
     background-color: $gray3;
+}
+
+.column {
+    flex: 1;
+    
+    & + .column {
+        margin-left: 10px;
+    }
 }

app/scss/variables.scss

@@ -7,7 +7,7 @@ $white: darken(white, 10%);
 
 $gray1: #2e3136;
 $gray2: #2a2d32;
-$gray3: #282b30;
+$gray3: #23262a;
 $gray4: #2e3136;
 $gray5: #282b30;
 $gray6: #1e2124;

makefile

@@ -16,4 +16,4 @@ clean:
 copyfiles:
 	cp config.template.json ./dist/config.template.json
 
-all: linux mac windows copyfiles
+all: linux copyfiles