working

client/package-lock.json

@@ -3685,6 +3685,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -11480,6 +11485,14 @@
         "scheduler": "^0.20.1"
       }
     },
+    "react-dropdown": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/react-dropdown/-/react-dropdown-1.9.2.tgz",
+      "integrity": "sha512-g4eufErTi5P5T5bGK+VmLl//qvAHy79jm6KKx8G2Tl3mG90bpigb+Aw85P+C2JUdAnIIQdv8kP/oHN314GvAfw==",
+      "requires": {
+        "classnames": "^2.2.3"
+      }
+    },
     "react-error-overlay": {
       "version": "6.0.9",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",

client/package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-dropdown": "^1.9.2",
     "react-scripts": "4.0.2",
     "web-vitals": "^1.0.1"
   },

client/src/checkAuth.js

@@ -0,0 +1,16 @@
+import axios from "axios";
+
+async function readCookie() {
+
+  try {
+    const res = await axios.get("/readCookie");
+    if (res.data === "No Cookie Set") {
+      document.location = "/";
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
+
+export default readCookie;
+

client/src/components/Accounts.jsx

@@ -1,25 +1,9 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import MTable from "./accountTable";
-import axios from "axios";
+import readCookie from "../checkAuth";
 
 function Accounts() {
-  const readCookie = async () => {
-    try {
-      const res = await axios.get("/readCookie");
-
-      if (res.data === "No Cookie Set") {
-        document.location = "/"
-        // this.props.history.push('/accounts');
-      }
-    } catch (e) {
-      // setScreen("auth");
-      console.log(e);
-    }
-  };
-
-  useEffect(() => {
-    readCookie();
-  }, []);
+  readCookie();
 
   return (
     <div style={{ padding: "30px" }}>

client/src/components/AddAccount.jsx

@@ -1,9 +1,14 @@
 import React, { Component } from "react";
 import axios from "axios";
-import DropDown from "./accountDropDown"
+import Dropdown from "react-dropdown";
+import "react-dropdown/style.css";
+import readCookie from "../checkAuth"
 
+let arr = [];
 class AddAccount extends Component {
   constructor() {
+    readCookie();
+
     super();
     this.state = {
       username: "",
@@ -12,13 +17,32 @@ class AddAccount extends Component {
     };
   }
 
-  
   componentDidMount() {
-    // fetch("/getStreams")
-    //   .then((res) => res.json())
-    //   .then((streams) => this.setState({ streams }));
+    this.fetchOptions();
   }
 
+  fetchOptions() {
+    fetch("/getStreamNames")
+      .then((res) => {
+        return res.json();
+      })
+      .then((json) => {
+        json.forEach((account) => {
+          arr.push(account.streamName);
+        });
+        this.setState({ options: arr });
+      });
+  }
+
+  _onSelect = (e) => {
+    /*
+      Because we named the inputs to match their
+      corresponding values in state, it's
+      super easy to update the state
+    */
+    this.setState({ stream: e.value });
+  };
+
   onChange = (e) => {
     /*
       Because we named the inputs to match their
@@ -44,7 +68,7 @@ class AddAccount extends Component {
       .then((res) => {
         console.log(res);
         console.log(res.data);
-        if (res.data.includes('Added successfully')) {
+        if (res.data.includes("Added successfully")) {
           document.location = "/accounts";
         } else {
           document.location = "/AddAccount";
@@ -53,8 +77,7 @@ class AddAccount extends Component {
   };
 
   render() {
-    
-    const { username, password, stream } = this.state;
+    const { username, password } = this.state;
 
     return (
       <section class="container">
@@ -83,16 +106,15 @@ class AddAccount extends Component {
                 </p>
                 <p>
                   Stream Name -
-                  <input
-                    type="text"
-                    name="stream"
-                    value={stream}
-                    onChange={this.onChange}
+                  <Dropdown
+                    options={arr}
+                    onChange={this._onSelect}
+                    value={arr[0]}
+                    placeholder="Select an option"
                   />
                 </p>
                 <br />
                 <button type="submit">Add Account</button>
-                <DropDown />
               </form>
             </p>
           </article>

client/src/components/accountDropDown.jsx

@@ -1,7 +1,9 @@
 import React from "react";
+import Dropdown from "react-dropdown";
+import "react-dropdown/style.css";
 
 var values;
-
+let arr = [];
 class DropDown extends React.Component {
   constructor() {
     super();
@@ -21,7 +23,7 @@ class DropDown extends React.Component {
       })
       .then((json) => {
         values = json;
-        let arr = [];
+
         values.forEach((element) => {
           arr.push(element.streamName);
         });
@@ -29,23 +31,38 @@ class DropDown extends React.Component {
       });
   }
 
-  state = { value: "Large" };
-
   handleChange = (event) => {
     this.setState({
-        value: event.target.value
+      value: event.target.value,
     });
-}
+  };
+
+  _onSelect = (e) => {
+    /*
+      Because we named the inputs to match their
+      corresponding values in state, it's
+      super easy to update the state
+    */
+    this.setState({ stream: e.value });
+  };
+
+  onChange = (e) => {
+    /*
+      Because we named the inputs to match their
+      corresponding values in state, it's
+      super easy to update the state
+    */
+    this.setState({ [e.target.name]: e.target.value });
+  };
 
   render() {
     return (
-      <div className="drop-down">
-        <select>
-          {this.state.options.map((option, key) => (
-            <option key={key}>{option}</option>
-          ))}
-        </select>
-      </div>
+      <Dropdown
+        options={arr}
+        onChange={this._onSelect}
+        value={arr[0]}
+        placeholder="Select an option"
+      />
     );
   }
 }