current place

app.js

@@ -12,6 +12,7 @@ var getUserAccounts = require('./routes/getUserAccounts')
 var singleUserCheck = require('./routes/singleCheck')
 var addAccount = require('./routes/addAccount')
 var readCookie = require('./routes/readCookie')
+var getStreamNames = require('./routes/getStreamNames')
 var login = require('./routes/login')
 var app = express();
 const basicAuth = require('express-basic-auth')
@@ -42,6 +43,7 @@ app.use('/getUserAccounts', getUserAccounts);
 app.use('/singleCheck', basicAuth(users), singleUserCheck)
 app.use('/addAccount', addAccount)
 app.use('/readCookie', readCookie)
+app.use('/getStreamNames', getStreamNames)
 
 
 // catch 404 and forward to error handler

client/src/components/AddAccount.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import axios from "axios";
+import DropDown from "./accountDropDown"
 
 class AddAccount extends Component {
   constructor() {
@@ -11,6 +12,7 @@ class AddAccount extends Component {
     };
   }
 
+  
   componentDidMount() {
     // fetch("/getStreams")
     //   .then((res) => res.json())
@@ -51,6 +53,7 @@ class AddAccount extends Component {
   };
 
   render() {
+    
     const { username, password, stream } = this.state;
 
     return (
@@ -89,6 +92,7 @@ class AddAccount extends Component {
                 </p>
                 <br />
                 <button type="submit">Add Account</button>
+                <DropDown />
               </form>
             </p>
           </article>

client/src/components/accountDropDown.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+var values;
+
+class DropDown extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      options: [],
+    };
+  }
+
+  componentDidMount() {
+    this.fetchOptions();
+  }
+
+  fetchOptions() {
+    fetch("/getStreamNames")
+      .then((res) => {
+        return res.json();
+      })
+      .then((json) => {
+        values = json;
+        let arr = [];
+        values.forEach((element) => {
+          arr.push(element.streamName);
+        });
+        this.setState({ options: arr });
+      });
+  }
+
+  state = { value: "Large" };
+
+  handleChange = (event) => {
+    this.setState({
+        value: event.target.value
+    });
+}
+
+  render() {
+    return (
+      <div className="drop-down">
+        <select>
+          {this.state.options.map((option, key) => (
+            <option key={key}>{option}</option>
+          ))}
+        </select>
+      </div>
+    );
+  }
+}
+
+export default DropDown;

client/src/components/index.js

@@ -4,3 +4,4 @@ export { default as Home } from "./Home";
 export { default as Accounts } from "./Accounts";
 export { default as ServerList } from "./ServerList";
 export { default as AddAccount } from "./AddAccount"
+export {default as DropDown } from "./accountDropDown"

lib/getStreamNames.js

@@ -0,0 +1,16 @@
+const sql = require('./mysql')
+
+function getStreamNames() {
+    let data = sql.query(`SELECT idstreams, streamName FROM BBLB_DNS.streams`)
+    // console.log(data)
+    if (data.length == 0) {
+        return 'StreamsFailed'
+    } else {
+        return data
+    }
+}
+
+module.exports = {
+    getStreamNames
+}
+

routes/getStreamNames.js

@@ -0,0 +1,16 @@
+var express = require('express');
+var router = express.Router();
+
+const { getStreamNames } = require('../lib/getStreamNames')
+
+/* POST postUser page. */
+router.get('/', async function (req, res, next) {
+    if (req.signedCookies.user === undefined) {
+        res.send('Cookie Not Set')
+    } else {
+    let data = await getStreamNames()
+    res.send(data)
+    }
+});
+
+module.exports = router;