From 935ef7d2f76cca7bc1f9840dc357de85f93a1ec2 Mon Sep 17 00:00:00 2001
From: Galen Guyer <galen@galenguyer.com>
Date: Mon, 11 Jul 2022 17:10:23 -0400
Subject: Update for new dashboard frontend

---
 src/App.jsx | 205 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 205 insertions(+)
 create mode 100644 src/App.jsx

(limited to 'src/App.jsx')

diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 0000000..7f1f9c3
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,205 @@
+import { useLocation, Routes, Route, Link } from "react-router-dom";
+import { useState, lazy, Suspense } from "react";
+import useFetch from "./useFetch";
+import { DateTime } from "luxon";
+import "./App.css";
+const Index = lazy(() => import("./pages/Index"));
+const Graph = lazy(() => import("./pages/Graph"));
+import { useEffect } from "react";
+
+const App = () => {
+    const url = localStorage.getItem("url") ?? "/data.json";
+
+    let routerLocation = useLocation();
+    useEffect(() => {
+        !window.goatcounter ??
+            window.goatcounter.count({
+                path: location.pathname + location.search + location.hash,
+            });
+    }, [routerLocation]);
+
+    const response = useFetch(url);
+
+    const [timeDifference, setTimeDifference] = useState(1);
+
+    return (
+        <div className="App">
+            <header>
+                <Link to="/">
+                    <h1>2020-2021 RIT COVID Dashboard</h1>
+                </Link>
+            </header>
+            <Routes>
+                <Route
+                    path="/totalstudents"
+                    element={
+                        <Suspense fallback={null}>
+                            <Graph
+                                name={"Total Student Cases"}
+                                response={response}
+                                dataKey={"total_students"}
+                                timeDifference={timeDifference}
+                            />
+                        </Suspense>
+                    }
+                ></Route>
+                <Route
+                    path="/totalstaff"
+                    element={
+                        <Suspense fallback={null}>
+                            <Graph
+                                name={"Total Staff Cases"}
+                                response={response}
+                                dataKey={"total_staff"}
+                                timeDifference={timeDifference}
+                            />
+                        </Suspense>
+                    }
+                ></Route>
+                <Route
+                    path="/newstudents"
+                    element={
+                        <Suspense fallback={null}>
+                            <Graph
+                                name={"New Student Cases"}
+                                response={response}
+                                dataKey={"new_students"}
+                                timeDifference={timeDifference}
+                            />
+                        </Suspense>
+                    }
+                ></Route>
+                <Route
+                    path="/newstaff"
+                    element={
+                        <Suspense fallback={null}>
+                            <Graph
+                                name={"New Staff Cases"}
+                                response={response}
+                                dataKey={"new_staff"}
+                                timeDifference={timeDifference}
+                            />
+                        </Suspense>
+                    }
+                ></Route>
+                <Route
+                    path="/quarantineoncampus"
+                    element={
+                        <Suspense fallback={null}>
+                            <Graph name={"Quarantine On Campus"} response={response} dataKey={"quarantine_on_campus"} />
+                        </Suspense>
+                    }
+                ></Route>
+                <Route
+                    path="/quarantineoffcampus"
+                    element={
+                        <Suspense fallback={null}>
+                            <Graph
+                                name={"Quarantine Off Campus"}
+                                response={response}
+                                dataKey={"quarantine_off_campus"}
+                            />
+                        </Suspense>
+                    }
+                ></Route>
+
+                <Route
+                    path="/isolationoncampus"
+                    element={
+                        <Suspense fallback={null}>
+                            <Graph name={"Isolation On Campus"} response={response} dataKey={"isolation_on_campus"} />
+                        </Suspense>
+                    }
+                ></Route>
+                <Route
+                    path="/isolationoffcampus"
+                    element={
+                        <Suspense fallback={null}>
+                            <Graph name={"Isolation Off Campus"} response={response} dataKey={"isolation_off_campus"} />
+                        </Suspense>
+                    }
+                ></Route>
+                <Route
+                    path="/tests"
+                    element={
+                        <Suspense fallback={null}>
+                            <Graph name={"Tests Administered"} response={response} dataKey={"tests_administered"} />
+                        </Suspense>
+                    }
+                ></Route>
+                <Route
+                    path="/beds"
+                    element={
+                        <Suspense fallback={null}>
+                            <Graph name={"Quarantine/Isolation Bed Availability On-campus"} response={response} dataKey={"beds_available"} />
+                        </Suspense>
+                    }
+                ></Route>
+
+                <Route
+                    exact
+                    path="/"
+                    element={
+                        <Suspense fallback={null}>
+                            <Index response={response} timeDifference={timeDifference} />
+                        </Suspense>
+                    }
+                />
+            </Routes>
+            <footer>
+                <p>
+                    By Galen Guyer. Source available on{" "}
+                    <a className="BlueLink" href="https://github.com/galenguyer/rit-covid-dashboard">
+                        GitHub
+                    </a>{" "}
+                    (
+                    <a className="BlueLink" href="https://github.com/galenguyer/rit-covid-dashboard/issues">
+                        Report Issue
+                    </a>
+                    )
+                </p>
+                <p>
+                    <a className="BlueLink" href="https://galenguyer.com/projects/ritcoviddashboard">
+                        API Documentation
+                    </a>
+                </p>
+            </footer>
+            <script data-goatcounter="https://rcd.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
+        </div>
+    );
+};
+
+const Updated = (props) => {
+    const { loading, lastUpdate, priorUpdate, timeDifference } = props;
+    if (loading) {
+        return <div></div>;
+    }
+
+    return (
+        <div className="Updated">
+            <div className="Latest">
+                Last Updated:{" "}
+                {lastUpdate.toLocaleString({
+                    weekday: "long",
+                    month: "long",
+                    day: "2-digit",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                })}
+            </div>
+            <div className="Prior">
+                Prior Update:{" "}
+                {priorUpdate.toLocaleString({
+                    weekday: "long",
+                    month: "long",
+                    day: "2-digit",
+                    hour: "2-digit",
+                    minute: "2-digit",
+                })}{" "}
+                ({timeDifference == 1 ? "one weekday ago" : timeDifference == 5 ? "one week ago" : "two weeks ago"})
+            </div>
+        </div>
+    );
+};
+
+export default App;
-- 
cgit v1.2.3