7 files changed, 139 insertions, 0 deletions
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 (
+      <>
+      <h1>Welcome To Watchdogs...</h1>
+      </>
+    );
+}
+
+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 (
+        <li className='Checkin' key={props.name}>
+            <div className="Img-flex">
+                <span><span className="Clickable-name" onClick= {(e) => console.log(props.name)}>{props.name}</span> has {props.value}</span>
+                <img className="Img-btn" hidden={isToggled} onClick={() => setIsToggled((toggle) => !toggle)} src="/round_expand_more_white_18dp.png" alt="image"/>
+                <img className="Img-btn" hidden={!isToggled} onClick={() => setIsToggled((toggle) => !toggle)} src="/round_expand_less_white_18dp.png" alt="image"/>
+            </div>
+            <div hidden={!isToggled}>
+              Testing field...
+            </div>
+        </li>);
+}
+
+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(
+            <Hub name={key} value={value}></Hub>
+          );
+        }
+        setHubItems(tempCheckinItems);
+    }
+
+    // React hook that queries the checkin database every 5 seconds.
+    useEffect(() => {
+        updateHubItems();
+    }, [props.data]);
+
+    return (
+      <div className="User-checkin">
+          <div className="Checkins">
+              <h2>Individual Suspicion</h2>
+              <ul className='Checkin-list'>{hubItems}</ul>
+          </div>
+      </div>
+    );
+}
+
+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 <canvas></canvas>;
+}
+
+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 (
+      <div className="mainGrid">
+          <Banner></Banner>
+          <HubList data={displayData}></HubList>
+          <HubMap></HubMap>
+      </div>
+    );
+}
+  
+export default SECAPIData;
+  
+\ No newline at end of file