From 505870f7a9f6f0ad8130cee3995d68b10010c24d Mon Sep 17 00:00:00 2001 From: Michael Foiani Date: Fri, 16 Apr 2021 14:13:05 -0400 Subject: Movedaround the directories to follow react structure. --- frontend/src/App.js | 2 +- frontend/src/Button.js | 9 ---- frontend/src/Hub.js | 26 ---------- frontend/src/HubList.js | 43 ---------------- frontend/src/Main.css | 4 ++ frontend/src/SECAPIData.js | 93 ----------------------------------- frontend/src/components/Banner.css | 4 ++ frontend/src/components/Banner.js | 12 +++++ frontend/src/components/Hub.js | 26 ++++++++++ frontend/src/components/HubList.js | 43 ++++++++++++++++ frontend/src/components/HubMap.css | 3 ++ frontend/src/components/HubMap.js | 8 +++ frontend/src/components/SECAPIData.js | 43 ++++++++++++++++ frontend/src/templates/Template.js | 10 ++++ 14 files changed, 154 insertions(+), 172 deletions(-) delete mode 100644 frontend/src/Button.js delete mode 100644 frontend/src/Hub.js delete mode 100644 frontend/src/HubList.js create mode 100644 frontend/src/Main.css delete mode 100644 frontend/src/SECAPIData.js create mode 100644 frontend/src/components/Banner.css create mode 100644 frontend/src/components/Banner.js create mode 100644 frontend/src/components/Hub.js create mode 100644 frontend/src/components/HubList.js create mode 100644 frontend/src/components/HubMap.css create mode 100644 frontend/src/components/HubMap.js create mode 100644 frontend/src/components/SECAPIData.js create mode 100644 frontend/src/templates/Template.js (limited to 'frontend/src') diff --git a/frontend/src/App.js b/frontend/src/App.js index cf89bf0..4f9afc0 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,5 +1,5 @@ import './App.css'; -import SECAPIData from "./SECAPIData"; +import SECAPIData from "./components/SECAPIData"; function App() { diff --git a/frontend/src/Button.js b/frontend/src/Button.js deleted file mode 100644 index 9aba266..0000000 --- a/frontend/src/Button.js +++ /dev/null @@ -1,9 +0,0 @@ -import { AwesomeButton } from "react-awesome-button"; -import "react-awesome-button/dist/styles.css"; - - -function Button(props) { - return GET DATA; -} - -export default Button; \ No newline at end of file diff --git a/frontend/src/Hub.js b/frontend/src/Hub.js deleted file mode 100644 index 6dbcc57..0000000 --- a/frontend/src/Hub.js +++ /dev/null @@ -1,26 +0,0 @@ -// React import -import { useState } from "react"; - -/** - * Componenet for checkins. Has a toggle to show more info. - * @param {Object} props The props of the component. - * @returns {import('react').HtmlHTMLAttributes} A list element holding a checkin's info. - */ -function Hub(props) { - // State - toggled - const [isToggled, setIsToggled] = useState(false); - - return ( -
  • -
    - console.log(props.name)}>{props.name} has {props.value} - setIsToggled((toggle) => !toggle)} src="/round_expand_more_white_18dp.png" alt="image"/> - setIsToggled((toggle) => !toggle)} src="/round_expand_less_white_18dp.png" alt="image"/> -
    - -
  • ); -} - -export default Hub; \ No newline at end of file diff --git a/frontend/src/HubList.js b/frontend/src/HubList.js deleted file mode 100644 index 64dd131..0000000 --- a/frontend/src/HubList.js +++ /dev/null @@ -1,43 +0,0 @@ -// React and component imports -import { useEffect, useState } from "react"; -import Hub from './Hub'; - -/** - * Component that build the checkin list and displays checkin info. - * @returns {import('react').HtmlHTMLAttributes} A div with the checkins - * in a vertical layout. - */ -function HubList(props) { - const [hubItems, setHubItems] = useState([]); - - /** - * Loads new the checkins into the current cache/map of checkins. - */ - const updateHubItems = () => { - let tempCheckinItems = []; - const sorted = Object.entries(props.data).sort(([,a],[,b]) => b-a); - console.log(sorted); - for (const [key, value] of sorted) { - tempCheckinItems.push( - - ); - } - setHubItems(tempCheckinItems); - } - - // React hook that queries the checkin database every 5 seconds. - useEffect(() => { - updateHubItems(); - }, [props.data]); - - return ( -
    -
    -

    Individual Suspicion

    -
      {hubItems}
    -
    -
    - ); -} - -export default HubList; \ No newline at end of file diff --git a/frontend/src/Main.css b/frontend/src/Main.css new file mode 100644 index 0000000..c5ab948 --- /dev/null +++ b/frontend/src/Main.css @@ -0,0 +1,4 @@ +:root { + --main-bg-color: #121212; + --primary-surface-color: #1F1B24; +} \ No newline at end of file diff --git a/frontend/src/SECAPIData.js b/frontend/src/SECAPIData.js deleted file mode 100644 index a209ff2..0000000 --- a/frontend/src/SECAPIData.js +++ /dev/null @@ -1,93 +0,0 @@ -import React, {useState, useEffect} from 'react'; -import Button from './Button'; -import HubList from './HubList' - - - -function SECAPIData() { - - const [dataToBackend, setDataToBackend] = useState([]); - const [displayData, setDisplayData] = useState(""); - - const requestData = () => { - // End early in debug to avoid too many requests. - if (dataToBackend.length !== 0) { - sendToBackend(); - return; - } - - console.log("Makig request..."); - - let date = new Date() - let today = date.toISOString().slice(0, 10); - - let pastDate = new Date(); - pastDate.setDate(date.getDate() - 14); - let past = pastDate.toISOString().slice(0, 10); - - fetch("https://api.sec-api.io?token=4d6ff81353d665c975d443e30020879b1ea882bc96a00cd8774a95bddd838fe5", { - method: "POST", - body: JSON.stringify({ - "query": { "query_string": { "query": "formType:4 AND filedAt:{"+ past +" TO "+ today +"} AND formType:(NOT \"N-4\") AND formType:(NOT \"4/A\")" } }, - "from": "0", - "size": "1000", - "sort": [{ "filedAt": { "order": "desc" } }] - }), - headers: { - "Content-Type": "application/json" - }, - credentials: "same-origin" - }) - .then(res => res.json()) - .then(data => { - let list = []; - data.filings.forEach(filing => { - if (filing.ticker === "") { - // TODO: why are there repitions of urls. - list.push({ - timestamp: filing.filedAt, - url: filing.documentFormatFiles[1].documentUrl - }); - } - }) - setDataToBackend(list); - }) - .catch(error => { - console.log(error); - }); - } - - const sendToBackend = () => { - console.log(dataToBackend); - - fetch("http://localhost:4567/data", { - method: "POST", - body: JSON.stringify({ - "data" : dataToBackend - }), - headers: { - "Content-Type": "application/json", - }, - credentials: "same-origin" - }) - - .then(response => response.json().then(data => setDisplayData(data))) - .catch(function (error) { - console.log(error); - }); - } - - // This hook is autocalled once the setDataToBackend takes effect. - useEffect(() => sendToBackend(), [dataToBackend]); - - return ( -
    -

    SECAPIData

    - - -
    - ); -} - -export default SECAPIData; - \ No newline at end of file diff --git a/frontend/src/components/Banner.css b/frontend/src/components/Banner.css new file mode 100644 index 0000000..e5016b9 --- /dev/null +++ b/frontend/src/components/Banner.css @@ -0,0 +1,4 @@ +h1 { + background-color: var(--primary-surface-color); + min-width: 400px; +} \ No newline at end of file diff --git a/frontend/src/components/Banner.js b/frontend/src/components/Banner.js new file mode 100644 index 0000000..27eb5e9 --- /dev/null +++ b/frontend/src/components/Banner.js @@ -0,0 +1,12 @@ +import '../App.css'; +import './Banner.css'; + +function Banner() { + return ( + <> +

    Welcome To Watchdogs...

    + + ); +} + +export default Banner; \ No newline at end of file diff --git a/frontend/src/components/Hub.js b/frontend/src/components/Hub.js new file mode 100644 index 0000000..6dbcc57 --- /dev/null +++ b/frontend/src/components/Hub.js @@ -0,0 +1,26 @@ +// React import +import { useState } from "react"; + +/** + * Componenet for checkins. Has a toggle to show more info. + * @param {Object} props The props of the component. + * @returns {import('react').HtmlHTMLAttributes} A list element holding a checkin's info. + */ +function Hub(props) { + // State - toggled + const [isToggled, setIsToggled] = useState(false); + + return ( +
  • +
    + console.log(props.name)}>{props.name} has {props.value} + setIsToggled((toggle) => !toggle)} src="/round_expand_more_white_18dp.png" alt="image"/> + setIsToggled((toggle) => !toggle)} src="/round_expand_less_white_18dp.png" alt="image"/> +
    + +
  • ); +} + +export default Hub; \ No newline at end of file diff --git a/frontend/src/components/HubList.js b/frontend/src/components/HubList.js new file mode 100644 index 0000000..64dd131 --- /dev/null +++ b/frontend/src/components/HubList.js @@ -0,0 +1,43 @@ +// React and component imports +import { useEffect, useState } from "react"; +import Hub from './Hub'; + +/** + * Component that build the checkin list and displays checkin info. + * @returns {import('react').HtmlHTMLAttributes} A div with the checkins + * in a vertical layout. + */ +function HubList(props) { + const [hubItems, setHubItems] = useState([]); + + /** + * Loads new the checkins into the current cache/map of checkins. + */ + const updateHubItems = () => { + let tempCheckinItems = []; + const sorted = Object.entries(props.data).sort(([,a],[,b]) => b-a); + console.log(sorted); + for (const [key, value] of sorted) { + tempCheckinItems.push( + + ); + } + setHubItems(tempCheckinItems); + } + + // React hook that queries the checkin database every 5 seconds. + useEffect(() => { + updateHubItems(); + }, [props.data]); + + return ( +
    +
    +

    Individual Suspicion

    +
      {hubItems}
    +
    +
    + ); +} + +export default HubList; \ No newline at end of file diff --git a/frontend/src/components/HubMap.css b/frontend/src/components/HubMap.css new file mode 100644 index 0000000..c23f81d --- /dev/null +++ b/frontend/src/components/HubMap.css @@ -0,0 +1,3 @@ +canvas { + background-color: var(--main-bg-color); +} \ No newline at end of file diff --git a/frontend/src/components/HubMap.js b/frontend/src/components/HubMap.js new file mode 100644 index 0000000..1c4ae3d --- /dev/null +++ b/frontend/src/components/HubMap.js @@ -0,0 +1,8 @@ +import '../App.css'; +import './HubMap.css'; + +function HubMap(props) { + return ; +} + +export default HubMap; \ No newline at end of file diff --git a/frontend/src/components/SECAPIData.js b/frontend/src/components/SECAPIData.js new file mode 100644 index 0000000..b0ad82d --- /dev/null +++ b/frontend/src/components/SECAPIData.js @@ -0,0 +1,43 @@ +import React, {useState, useEffect} from 'react'; +import Button from './Button'; +import HubList from './HubList'; +import HubMap from './HubList'; +import './App.css'; +import Banner from './Banner'; + + + +function SECAPIData() { + const [displayData, setDisplayData] = useState({}); + + const sendToBackend = () => { + console.log(dataToBackend); + + fetch("http://localhost:4567/data", { + method: "POST", + body: JSON.stringify({ + "data" : dataToBackend + }), + headers: { + "Content-Type": "application/json", + }, + credentials: "same-origin" + }) + + .then(response => response.json().then(data => setDisplayData(data))) + .catch(error => console.log(error)); + } + + useEffect(() => sendToBackend(), []); + + return ( +
    + + + +
    + ); +} + +export default SECAPIData; + \ No newline at end of file diff --git a/frontend/src/templates/Template.js b/frontend/src/templates/Template.js new file mode 100644 index 0000000..c00e67e --- /dev/null +++ b/frontend/src/templates/Template.js @@ -0,0 +1,10 @@ +import '../App.css'; + +function Template(props) { + return ( + <> + + ); +} + +export default Template; \ No newline at end of file -- cgit v1.2.3-70-g09d2