diff --git a/app/Wrapper.js b/app/Wrapper.js
index fa1f1ac..d9d9348 100644
--- a/app/Wrapper.js
+++ b/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';
diff --git a/app/components/Navbar/Navbar.js b/app/components/Navbar/Navbar.component.js
similarity index 100%
rename from app/components/Navbar/Navbar.js
rename to app/components/Navbar/Navbar.component.js
diff --git a/app/pages/Soundboard/SoundList.component.js b/app/pages/Soundboard/SoundList.component.js
new file mode 100644
index 0000000..dd98d67
--- /dev/null
+++ b/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 (
+
+
+ Sounds
+
+
+
+ {this.state.soundList.length > 0 ? this.state.soundList.map((sound, index) => {
+ return
+
+ {sound.prefix + sound.name}
+
+
+ {this.checkExtension(sound.extension) ?
+
+ : null}
+
+ }) : null}
+
+ );
+ }
+}
diff --git a/app/pages/Soundboard/SoundList.scss b/app/pages/Soundboard/SoundList.scss
new file mode 100644
index 0000000..a34cc40
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/app/pages/Soundboard/Soundboard.js b/app/pages/Soundboard/Soundboard.js
index 2e391aa..d20efb5 100644
--- a/app/pages/Soundboard/Soundboard.js
+++ b/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 (