diff options
| author | Galen Guyer <galen@galenguyer.com> | 2022-04-13 22:31:07 -0400 |
|---|---|---|
| committer | Galen Guyer <galen@galenguyer.com> | 2022-04-13 22:31:07 -0400 |
| commit | 60af17c095ae6f034dac96ce64bfb5cd76fe603a (patch) | |
| tree | 0e6809ef7871c5f6e0587659d07dee2c7c983022 | |
| parent | 003e957a77ddf0f3207b86ef6b8a2bdc718405ef (diff) | |
use goatcounter the right way
| -rw-r--r-- | index.html | 1 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | pnpm-lock.yaml | 2 | ||||
| -rw-r--r-- | src/App.jsx | 169 | ||||
| -rw-r--r-- | src/components/GoatCounter.jsx | 26 | ||||
| -rw-r--r-- | src/main.jsx | 21 | ||||
| -rw-r--r-- | src/pages/Graph.jsx | 2 | ||||
| -rw-r--r-- | src/pages/Index.jsx | 2 |
8 files changed, 101 insertions, 123 deletions
@@ -16,5 +16,6 @@ <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> + <script data-goatcounter="https://rcd.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script> </body> </html> diff --git a/package.json b/package.json index cd591e8..567b9f0 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,6 @@ "prop-types": "^15.6.0", "react": "^18.0.0", "react-dom": "^18.0.0", - "react-router": "^6.3.0", "react-router-dom": "^6.3.0", "recharts": "^2.1.9" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ede0f74..55a3c44 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,7 +8,6 @@ specifiers: prop-types: ^15.6.0 react: ^18.0.0 react-dom: ^18.0.0 - react-router: ^6.3.0 react-router-dom: ^6.3.0 recharts: ^2.1.9 vite: ^2.9.2 @@ -18,7 +17,6 @@ dependencies: prop-types: 15.8.1 react: 18.0.0 react-dom: 18.0.0_react@18.0.0 - react-router: 6.3.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 diff --git a/src/App.jsx b/src/App.jsx index af8f570..42c3f36 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,14 +1,22 @@ -import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; +import { useLocation, 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"; +import { useEffect } from "react"; 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); @@ -23,86 +31,85 @@ const App = () => { 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> + <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> + <script data-goatcounter="https://rcd.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script> + </div> ); }; diff --git a/src/components/GoatCounter.jsx b/src/components/GoatCounter.jsx deleted file mode 100644 index 07a768a..0000000 --- a/src/components/GoatCounter.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from "react"; - -class GoatCounter extends React.Component { - componentDidMount() { - window.counter = "https://rcd.goatcounter.com/count"; - const script = window.document.createElement("script"); - script.async = 1; - script.src = "https://gc.zgo.at/count.js"; - script.id = "goatcounter"; - script.setAttribute("data-goatcounter", "https://rcd.goatcounter.com/count"); - (window.document.head || window.document.body).appendChild(script); - } - - componentWillUnmount() { - const script = window.document.getElementById("goatcounter"); - if (script) { - script.parentNode.removeChild(script); - } - } - - render() { - return null; - } -} - -export default GoatCounter; diff --git a/src/main.jsx b/src/main.jsx index 9af0bb6..8601f97 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,10 +1,13 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App' -import './index.css' +import React from "react"; +import { BrowserRouter } from "react-router-dom"; +import ReactDOM from "react-dom/client"; +import App from "./App"; +import "./index.css"; -ReactDOM.createRoot(document.getElementById('root')).render( - <React.StrictMode> - <App /> - </React.StrictMode> -) +ReactDOM.createRoot(document.getElementById("root")).render( + <React.StrictMode> + <BrowserRouter> + <App /> + </BrowserRouter> + </React.StrictMode> +); diff --git a/src/pages/Graph.jsx b/src/pages/Graph.jsx index 6f19304..eb0475f 100644 --- a/src/pages/Graph.jsx +++ b/src/pages/Graph.jsx @@ -13,7 +13,6 @@ import { ResponsiveContainer, Label, } from "recharts"; -import GoatCounter from "../components/GoatCounter"; import "./Graph.css"; const Graph = (props) => { @@ -76,7 +75,6 @@ const Graph = (props) => { <YAxis dataKey="value" type="number"></YAxis> <Tooltip content={CustomTooltip} /> </LineChart> - <GoatCounter /> </div> ); }; diff --git a/src/pages/Index.jsx b/src/pages/Index.jsx index 3beb6fd..7f196e0 100644 --- a/src/pages/Index.jsx +++ b/src/pages/Index.jsx @@ -1,5 +1,4 @@ import Card from "../components/Card"; -import GoatCounter from "../components/GoatCounter"; import "./Index.css"; const Index = (props) => { @@ -58,7 +57,6 @@ const Index = (props) => { /> </div> </div> - <GoatCounter /> </div> ); }; |