From 7e4aaf925c8ee7e7ea51420e71985893b4ef3999 Mon Sep 17 00:00:00 2001 From: "karl.hudgell" Date: Sat, 27 Feb 2021 10:56:38 +0000 Subject: [PATCH] working --- client/package-lock.json | 13 ++++++ client/package.json | 1 + client/src/checkAuth.js | 16 +++++++ client/src/components/Accounts.jsx | 22 ++------- client/src/components/AddAccount.jsx | 54 ++++++++++++++++------- client/src/components/accountDropDown.jsx | 43 ++++++++++++------ 6 files changed, 101 insertions(+), 48 deletions(-) create mode 100644 client/src/checkAuth.js diff --git a/client/package-lock.json b/client/package-lock.json index 8e28449..3e4811a 100644 --- a/client/package-lock.json +++ b/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", diff --git a/client/package.json b/client/package.json index 33eea71..7896256 100644 --- a/client/package.json +++ b/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" }, diff --git a/client/src/checkAuth.js b/client/src/checkAuth.js new file mode 100644 index 0000000..a360954 --- /dev/null +++ b/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; + diff --git a/client/src/components/Accounts.jsx b/client/src/components/Accounts.jsx index 0e74f62..7b7cfc8 100644 --- a/client/src/components/Accounts.jsx +++ b/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 (
diff --git a/client/src/components/AddAccount.jsx b/client/src/components/AddAccount.jsx index 7331787..9d010bb 100644 --- a/client/src/components/AddAccount.jsx +++ b/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 (
@@ -73,7 +96,7 @@ class AddAccount extends Component { />

- Password - + Password -

- Stream Name - -


-

diff --git a/client/src/components/accountDropDown.jsx b/client/src/components/accountDropDown.jsx index 3043d2e..25ce558 100644 --- a/client/src/components/accountDropDown.jsx +++ b/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 ( -
- -
+ ); } }