full version 2 re-write

1 files changed, 142 insertions, 0 deletions

diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 0000000..af8f570
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,142 @@
+import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
+import { useState } from "react";
+import useFetch from "./useFetch";
+import Index from "./pages/Index";
+import { DateTime } from "luxon";
+import "./App.css";
+import Graph from "./pages/Graph";
+
+const App = () => {
+    const url = localStorage.getItem("url") ?? "https://ritcoviddashboard.com/api/v0/history";
+
+    const response = useFetch(url);
+
+    const [timeDifference, setTimeDifference] = useState(1);
+    const local = DateTime.local().zoneName;
+
+    let data = response.data ?? [];
+
+    const latest = response.loading ? null : data[data.length - 1];
+    const prior = response.loading ? null : data[data.length - (1 + timeDifference)];
+
+    const lastUpdate = response.loading ? null : DateTime.fromSQL(latest.last_updated).setZone(local);
+    const priorUpdate = response.loading ? null : DateTime.fromSQL(prior.last_updated).setZone(local);
+
+    return (
+        <BrowserRouter>
+            <div className="App">
+                <header>
+                    <Link to="/">
+                        <h1>RIT COVID Dashboard</h1>
+                    </Link>
+                    <Updated
+                        loading={response.loading}
+                        lastUpdate={lastUpdate}
+                        priorUpdate={priorUpdate}
+                        timeDifference={timeDifference}
+                    />
+                </header>
+                <Routes>
+                    <Route
+                        path="/totalstudents"
+                        element={
+                            <Graph
+                                name={"Total Student Cases"}
+                                response={response}
+                                dataKey={"total_students"}
+                                timeDifference={timeDifference}
+                            />
+                        }
+                    ></Route>
+                    <Route
+                        path="/totalstaff"
+                        element={
+                            <Graph
+                                name={"Total Staff Cases"}
+                                response={response}
+                                dataKey={"total_staff"}
+                                timeDifference={timeDifference}
+                            />
+                        }
+                    ></Route>
+                    <Route
+                        path="/newstudents"
+                        element={
+                            <Graph
+                                name={"New Student Cases"}
+                                response={response}
+                                dataKey={"new_students"}
+                                timeDifference={timeDifference}
+                            />
+                        }
+                    ></Route>
+                    <Route
+                        path="/newstaff"
+                        element={
+                            <Graph
+                                name={"New Staff Cases"}
+                                response={response}
+                                dataKey={"new_staff"}
+                                timeDifference={timeDifference}
+                            />
+                        }
+                    ></Route>
+                    <Route exact path="/" element={<Index response={response} timeDifference={timeDifference} />} />
+                </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>
+            </div>
+        </BrowserRouter>
+    );
+};
+
+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;