diff options
-rw-r--r-- | package.json | 1 | ||||
-rw-r--r-- | pnpm-lock.yaml | 24 | ||||
-rw-r--r-- | src/App.css | 8 | ||||
-rw-r--r-- | src/App.jsx | 140 | ||||
-rw-r--r-- | src/components/Card.css | 45 | ||||
-rw-r--r-- | src/components/Card.jsx | 25 | ||||
-rw-r--r-- | src/index.css | 18 | ||||
-rw-r--r-- | src/logo.svg | 7 | ||||
-rw-r--r-- | src/pages/Graph.css | 33 | ||||
-rw-r--r-- | src/pages/Graph.jsx | 107 | ||||
-rw-r--r-- | src/pages/Index.css | 24 | ||||
-rw-r--r-- | src/pages/Index.jsx | 106 | ||||
-rw-r--r-- | src/useFetch.js | 17 |
13 files changed, 77 insertions, 478 deletions
diff --git a/package.json b/package.json index 567b9f0..0465a49 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "private": true, "version": "0.0.0", "scripts": { + "start": "vite", "dev": "vite", "build": "vite build", "preview": "vite preview" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 55a3c44..972f223 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,4 +1,4 @@ -lockfileVersion: 5.3 +lockfileVersion: 5.4 specifiers: '@types/react': ^18.0.0 @@ -17,8 +17,8 @@ dependencies: prop-types: 15.8.1 react: 18.0.0 react-dom: 18.0.0_react@18.0.0 - react-router-dom: 6.3.0_react-dom@18.0.0+react@18.0.0 - recharts: 2.1.9_bdb4aea89f170aaa1ddb585ff4b9f19e + react-router-dom: 6.3.0_zpnidt7m3osuk7shl3s4oenomq + recharts: 2.1.9_xw2k5ke7c4fkuho3lbp7joprty devDependencies: '@types/react': 18.0.4 @@ -197,6 +197,8 @@ packages: resolution: {integrity: sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg==} engines: {node: '>=6.0.0'} hasBin: true + dependencies: + '@babel/types': 7.17.0 dev: true /@babel/plugin-syntax-jsx/7.16.7_@babel+core@7.17.9: @@ -926,7 +928,7 @@ packages: engines: {node: '>=0.10.0'} dev: true - /react-resize-detector/6.7.8_react-dom@18.0.0+react@18.0.0: + /react-resize-detector/6.7.8_zpnidt7m3osuk7shl3s4oenomq: resolution: {integrity: sha512-0FaEcUBAbn+pq3PT5a9hHRebUfuS1SRLGLpIw8LydU7zX429I6XJgKerKAMPsJH0qWAl6o5bVKNqFJqr6tGPYw==} peerDependencies: react: ^16.0.0 || ^17.0.0 @@ -939,7 +941,7 @@ packages: resize-observer-polyfill: 1.5.1 dev: false - /react-router-dom/6.3.0_react-dom@18.0.0+react@18.0.0: + /react-router-dom/6.3.0_zpnidt7m3osuk7shl3s4oenomq: resolution: {integrity: sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==} peerDependencies: react: '>=16.8' @@ -960,7 +962,7 @@ packages: react: 18.0.0 dev: false - /react-smooth/2.0.0_bdb4aea89f170aaa1ddb585ff4b9f19e: + /react-smooth/2.0.0_xw2k5ke7c4fkuho3lbp7joprty: resolution: {integrity: sha512-wK4dBBR6P21otowgMT9toZk+GngMplGS1O5gk+2WSiHEXIrQgDvhR5IIlT74Vtu//qpTcipkgo21dD7a7AUNxw==} peerDependencies: prop-types: ^15.6.0 @@ -972,10 +974,10 @@ packages: raf: 3.4.1 react: 18.0.0 react-dom: 18.0.0_react@18.0.0 - react-transition-group: 2.9.0_react-dom@18.0.0+react@18.0.0 + react-transition-group: 2.9.0_zpnidt7m3osuk7shl3s4oenomq dev: false - /react-transition-group/2.9.0_react-dom@18.0.0+react@18.0.0: + /react-transition-group/2.9.0_zpnidt7m3osuk7shl3s4oenomq: resolution: {integrity: sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==} peerDependencies: react: '>=15.0.0' @@ -1002,7 +1004,7 @@ packages: decimal.js-light: 2.5.1 dev: false - /recharts/2.1.9_bdb4aea89f170aaa1ddb585ff4b9f19e: + /recharts/2.1.9_xw2k5ke7c4fkuho3lbp7joprty: resolution: {integrity: sha512-VozH5uznUvGqD7n224FGj7cmMAenlS0HPCs+7r2HeeHiQK6un6z0CTZfWVAB860xbcr4m+BN/EGMPZmYWd34Rg==} engines: {node: '>=12'} peerDependencies: @@ -1021,8 +1023,8 @@ packages: react: 18.0.0 react-dom: 18.0.0_react@18.0.0 react-is: 16.13.1 - react-resize-detector: 6.7.8_react-dom@18.0.0+react@18.0.0 - react-smooth: 2.0.0_bdb4aea89f170aaa1ddb585ff4b9f19e + react-resize-detector: 6.7.8_zpnidt7m3osuk7shl3s4oenomq + react-smooth: 2.0.0_xw2k5ke7c4fkuho3lbp7joprty recharts-scale: 0.4.5 reduce-css-calc: 2.1.8 transitivePeerDependencies: diff --git a/src/App.css b/src/App.css index f4846a6..f964ebb 100644 --- a/src/App.css +++ b/src/App.css @@ -13,14 +13,6 @@ font-size: 2.4em; margin: 18px 0px 8px 0px; } -.Updated .Latest { - font-size: 1.3em; - margin: 0px; -} -.Updated .Prior { - margin: 6px; - color: #666; -} .App a { text-decoration: none; diff --git a/src/App.jsx b/src/App.jsx index 5afcb03..ff72a91 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,112 +1,16 @@ -import { useLocation, Routes, Route, Link } from "react-router-dom"; -import { useState, lazy, Suspense } from "react"; -import useFetch from "./useFetch"; -import { DateTime } from "luxon"; +import { Link } from "react-router-dom"; import "./App.css"; -const Index = lazy(() => import("./pages/Index")); -const Graph = lazy(() => import("./pages/Graph")); -import { useEffect } from "react"; +import Index from "./pages/Index"; const App = () => { - const url = localStorage.getItem("url") ?? "https://ritcoviddashboard.com/api/v0/history"; - - 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); - 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 ( <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={ - <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 - exact - path="/" - element={ - <Suspense fallback={null}> - <Index response={response} timeDifference={timeDifference} /> - </Suspense> - } - /> - </Routes> + <Index /> <footer> <p> By Galen Guyer. Source available on{" "} @@ -119,48 +23,10 @@ const App = () => { </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; diff --git a/src/components/Card.css b/src/components/Card.css deleted file mode 100644 index 273e106..0000000 --- a/src/components/Card.css +++ /dev/null @@ -1,45 +0,0 @@ -.cardLink { - text-decoration: none; - color: black; - margin: 12px 24px; - flex-basis: 100%; - max-width: 200px; -} - -.Card { - text-decoration: none; - color: #000; - border: 2px solid #fbd38d; - border-radius: 12px; - padding: 0px 40px; -} - -@media screen and (max-width: 600px) { - .Card { - padding: 0px 16px; - margin: 10px 0px; - } -} - -.Latest { - font-size: 1.8em; -} - -.Diff { - color: #666; -} - -.Card:hover { - background-color: #ffc869; - color: #fff; -} -.Card:hover .Diff { - color: #fff; -} - -.animate { - -moz-transition: color,background-color 0.3s; - -webkit-transition: color,background-color 0.3s; - -ms-transition: color,background-color 0.3s; - transition: color,background-color 0.3s; -} diff --git a/src/components/Card.jsx b/src/components/Card.jsx deleted file mode 100644 index 95bd583..0000000 --- a/src/components/Card.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from "react"; -import { Link } from "react-router-dom"; -import "./Card.css"; - -const Card = (props) => { - let diff = props.diff.toString(); - if (diff.charAt(0) != "-") { - diff = "+" + diff; - } - - return ( - <Link className="cardLink" to={props.link}> - <div className="Card animate"> - <p> - <span className="Latest">{props.latest}</span> <span className="Diff animate">({diff})</span> - </p> - <h3> - {props.name} - </h3> - </div> - </Link> - ); -}; - -export default Card; diff --git a/src/index.css b/src/index.css index c4c1ceb..a7ae2da 100644 --- a/src/index.css +++ b/src/index.css @@ -1,17 +1,15 @@ body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", + "Droid Sans", "Helvetica Neue", sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } * { - font-weight: 400; -}
\ No newline at end of file + font-weight: 400; +} diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 6b60c10..0000000 --- a/src/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"> - <g fill="#61DAFB"> - <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/> - <circle cx="420.9" cy="296.5" r="45.7"/> - <path d="M520.5 78.1z"/> - </g> -</svg> diff --git a/src/pages/Graph.css b/src/pages/Graph.css deleted file mode 100644 index 8cb98ee..0000000 --- a/src/pages/Graph.css +++ /dev/null @@ -1,33 +0,0 @@ -.Title { - font-size: 2em; - margin-top: 24px; -} - -.ToTheMoon { - -webkit-animation-duration: 0.5s; - animation-duration: 0.5s; - -webkit-animation-delay: 1.5s; - animation-delay: 1.5s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-name: fadeIn; - animation-name: fadeIn; -} - -@-webkit-keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - -@keyframes fadeIn { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} diff --git a/src/pages/Graph.jsx b/src/pages/Graph.jsx deleted file mode 100644 index 0d18fab..0000000 --- a/src/pages/Graph.jsx +++ /dev/null @@ -1,107 +0,0 @@ -import { DateTime } from "luxon"; -import { - BarChart, - Bar, - LineChart, - Line, - CartesianGrid, - XAxis, - YAxis, - Tooltip, - ReferenceLine, - ReferenceDot, - ResponsiveContainer, - Label, -} from "recharts"; -import "./Graph.css"; - -const Graph = (props) => { - const { name, response, dataKey, timeDifference } = props; - const { data, loading, error } = response; - - if (loading) { - return <div></div>; - } - - const eventStyle = { fill: "#767676" }; - - const parsed = data.map((d) => { - return { - date: DateTime.fromSQL(d["last_updated"], { zone: "UTC" }).setZone(DateTime.local().zoneName).toSeconds(), - value: d[dataKey], - }; - }); - - const latest = parsed[parsed.length - 1]; - const prior = parsed[parsed.length - 2] - const toTheMoon = latest.value > prior.value + 1; - - return ( - <div> - <div className="Title">{name}</div> - <LineChart - style={{ marginLeft: "auto", marginRight: "auto" }} - width={window.innerWidth > 600 ? 750 : window.innerWidth * 0.9} - height={500} - margin={{ top: 15, right: 30, left: 0, bottom: 5 }} - data={parsed} - > - <Line type="monotone" dataKey="value" stroke="#CD8508" dot={false} /> - <ReferenceLine - x={1644594525} - label={{ value: "Visitor Policy adjusted", angle: -90, style: eventStyle, position: "left" }} - /> - <ReferenceLine - x={1647550274} - label={{ value: "Mask Mandate dropped", angle: -90, style: eventStyle, position: "left" }} - /> - {} - <CartesianGrid strokeDasharray="3 3" /> - {toTheMoon ? ( - <ReferenceDot - x={latest["date"]} - y={latest["value"]} - r={0} - label={<Label className="ToTheMoon">🚀</Label>} - /> - ) : null} - <XAxis - dataKey="date" - type="number" - tickCount={14} - domain={["dataMin", "dataMax"]} - tick={<CustomizedAxisTick />} - height={90} - /> - <YAxis dataKey="value" type="number"></YAxis> - <Tooltip content={CustomTooltip} /> - </LineChart> - </div> - ); -}; - -const CustomizedAxisTick = ({ x, y, payload }) => { - return ( - <g transform={`translate(${x},${y})`}> - <text className="Graph-Label" x={0} y={0} dy={16} textAnchor="end" fill="#666" transform="rotate(-40)"> - {DateTime.fromSeconds(payload.value).toLocaleString()} - </text> - </g> - ); -}; - -const CustomTooltip = ({ active, payload, label }) => { - if (active) { - return ( - <div className="custom-tooltip bg-white border-orange-300 border-2 rounded-lg p-2"> - <p className="label"> - {DateTime.fromSeconds(label).toLocaleString({ weekday: "long", month: "long", day: "2-digit" })} - </p> - <p className="desc">{payload[0].value}</p> - </div> - ); - } - return null; -}; - -export default Graph; diff --git a/src/pages/Index.css b/src/pages/Index.css index c134449..128a71b 100644 --- a/src/pages/Index.css +++ b/src/pages/Index.css @@ -2,27 +2,3 @@ margin-top: 24px; font-size: 1.4em; } - -@media screen and (max-width: 600px) { - .Message { - display: none; - } -} - -.Section .Title { - text-align: center; - font-size: 1.6em; - flex-basis: 100%; - margin-top: 48px; -} - -@media screen and (max-width: 600px) { - .Section .Title { - margin-top: 12px; - } -} - -.Cards { - display: flex; - justify-content: center; -} diff --git a/src/pages/Index.jsx b/src/pages/Index.jsx index 7f196e0..5e4c788 100644 --- a/src/pages/Index.jsx +++ b/src/pages/Index.jsx @@ -1,62 +1,60 @@ -import Card from "../components/Card"; import "./Index.css"; -const Index = (props) => { - const response = props.response; - if (response.loading) { - return <div>Loading...</div>; - } - - const data = response.data; +const Index = () => { + return ( + <div className="Message"> + <h2>2022-2023 Dashboard</h2> + <p> + RIT is not providing a COVID dashboard for the 2022-2023 semester. As such, I have no source for any + data to update this dashboard. + </p> + <p> + At the beginning of the semester, <a href="https://rit.edu/ready">rit.edu/ready</a> claimed that a new + dashboard would be published, as visible in{" "} + <a className="BlueLink" href="https://web.archive.org/web/20220802081911/https://www.rit.edu/ready/"> + this snapshot taken August 2nd on archive.org + </a> + . However, that was removed sometime between August 15th and August 31st, as seen in{" "} + <a className="BlueLink" href="https://web.archive.org/web/20220831160558/https://www.rit.edu/ready/"> + this snapshot taken August 31st. + </a>{" "} + The updated site did claim "The level of COVID RNA found in this week’s wastewater samples is slightly + higher than last spring". + </p> - const latest = data[data.length - 1]; - const prior = data[data.length - (1 + props.timeDifference)]; + <p> + There is a{" "} + <a class="BlueLink" href="https://pawprints.rit.edu/?p=3546"> + PawPrints petition to restore the COVID dashboard + </a>{" "} + so students can see the current level of risk. If you're concerned about RIT's handling of the pandemic, + you should sign this! Unless RIT gives us the dashboard back, we have no visiblity into how many cases + there are on campus. + </p> - return ( - <div> - <div> - <div className="Message"> - This dashboard has been refreshed for the new semester. Historical data from the 2020-2021 school - year is available at <a href="//2020.ritcoviddashboard.com">2020.ritcoviddashboard.com</a>. Data - from the Fall 2021 semester is available at{" "} - <a href="//2021.ritcoviddashboard.com">2021.ritcoviddashboard.com</a>. - </div> - </div> - <div className="Section" id="total"> - <div className="Title">Total Positive Cases Since January 10 (First Day of Classes)</div> - <div className="Cards"> - <Card - name="Students" - link="/totalstudents" - latest={latest["total_students"]} - diff={latest["total_students"] - prior["total_students"]} - /> - <Card - name="Staff" - link="/totalstaff" - latest={latest["total_staff"]} - diff={latest["total_staff"] - prior["total_staff"]} - /> - </div> - </div> + <hr /> - <div className="Section" id="new"> - <div className="Title">New Positive Cases From Past 14 Days</div> - <div className="Cards"> - <Card - name="Students" - link="/newstudents" - latest={latest["new_students"]} - diff={latest["new_students"] - prior["new_students"]} - /> - <Card - name="Staff" - link="/newstaff" - latest={latest["new_staff"]} - diff={latest["new_staff"] - prior["new_staff"]} - /> - </div> - </div> + <h3>Prior Dashboards</h3> + <p> + The dashboards from the last two years are still online. I'll be keeping them up indefinitely so + everyone can see RIT's handling of the pandemic. + </p> + <p> + The dashboard for the 2020-2021 school year is available at{" "} + <a className="BlueLink" href="https://2020.ritcoviddashboard.com/"> + 2020.ritcoviddashboard.com + </a> + </p> + <p> + The dashboard for the 2021-2022 school year is available at{" "} + <a className="BlueLink" href="https://2021.ritcoviddashboard.com/"> + 2021.ritcoviddashboard.com + </a> + </p> + <p> + If you would like the raw data I've collected, or have any questions, concerns, or comments, please + reach out to me at <a href="mailto:gkg1648@rit.edu">gkg1648@rit.edu</a> + </p> </div> ); }; diff --git a/src/useFetch.js b/src/useFetch.js deleted file mode 100644 index d098e2f..0000000 --- a/src/useFetch.js +++ /dev/null @@ -1,17 +0,0 @@ -import { useEffect, useState } from "react"; - -export default function useFetch(url, options) { - const [data, setData] = useState(null); - const [loading, setLoading] = useState(true); - const [error, setError] = useState(null); - - useEffect(() => { - fetch(url, options) - .then((resp) => resp.json()) - .then((resp) => setData(resp)) - .catch((err) => setError(err)) - .finally(() => setLoading(false)); - }, []); - - return { data, loading, error }; -} |