Added the new frontend. Still needs querying and lots of testing.

2 files changed, 79 insertions, 0 deletions

diff --git a/frontend/src/DateInput.js b/frontend/src/DateInput.js
new file mode 100644
index 0000000..b5962f0
--- /dev/null
+++ b/frontend/src/DateInput.js
@@ -0,0 +1,35 @@
+// React import
+import { useEffect, useState, useRef } 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 DateInput(props) {
+  const startInput = useRef();
+  const endInput = useRef();
+
+  const toValue = date => date.toISOString().slice(0, 10);
+
+  useEffect(() => setInitDates(), []);
+
+  const setInitDates = () => {
+    startInput.current.value = toValue(new Date());
+
+    // Two weeks away -> from stack overflow,
+    const fortnightAway = toValue(new Date(Date.now() - 12096e5));
+    endInput.current.value = fortnightAway;
+  }
+
+  return (
+    <>
+      <label for="start">Start date:</label>
+      <input type="date" id="start" ref={startInput} onChange={(e) => props.setStart(e.target.value)}/>
+      <label for="end">End date:</label>
+      <input type="date" id="end" ref={endInput} onChange={(e) => props.setEnd(e.target.value)}/>
+    </>
+  );
+}
+
+export default DateInput;
\ No newline at end of file
diff --git a/frontend/src/SECAPIData.js b/frontend/src/SECAPIData.js
new file mode 100644
index 0000000..8d0611f
--- /dev/null
+++ b/frontend/src/SECAPIData.js
@@ -0,0 +1,44 @@
+import React, {useState, useEffect} from 'react';
+import Button from './Button';
+import HubList from './HubList';
+import DateInput from './DateInput';
+
+
+
+function SECAPIData() {
+    const [displayData, setDisplayData] = useState({});
+    const [startDate, setStartDate] = useState("");
+    const [endDate, setEndDate] = useState("");
+
+    const toEpochMilli = date => Date.parse(date);
+
+    const getLinks = () => {
+        fetch("http://localhost:4567/data", {
+            method: "POST",
+            body: JSON.stringify(
+                { 
+                    "start" : toEpochMilli(startDate), 
+                    "end" : toEpochMilli(endDate)
+                }),
+              headers: {
+                "Content-Type": "application/json",
+              },
+              credentials: "same-origin"
+        })
+        .then(res  => res.json())
+        .then(data => setDisplayData(data))
+        .catch(err => console.log(err));
+    }
+  
+    return (
+      <div>
+          <h1>SECAPIData</h1>
+          <DateInput setStart={setStartDate} setEnd={setEndDate}></DateInput>
+          <Button onPress={getLinks}></Button>
+          <HubList data={displayData}></HubList>
+      </div>
+    );
+}
+  
+export default SECAPIData;
+  
\ No newline at end of file