aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGalen Guyer <galen@galenguyer.com>2022-04-13 22:31:07 -0400
committerGalen Guyer <galen@galenguyer.com>2022-04-13 22:31:07 -0400
commit60af17c095ae6f034dac96ce64bfb5cd76fe603a (patch)
tree0e6809ef7871c5f6e0587659d07dee2c7c983022
parent003e957a77ddf0f3207b86ef6b8a2bdc718405ef (diff)
use goatcounter the right way
Diffstat
-rw-r--r--index.html1
-rw-r--r--package.json1
-rw-r--r--pnpm-lock.yaml2
-rw-r--r--src/App.jsx169
-rw-r--r--src/components/GoatCounter.jsx26
-rw-r--r--src/main.jsx21
-rw-r--r--src/pages/Graph.jsx2
-rw-r--r--src/pages/Index.jsx2
8 files changed, 101 insertions, 123 deletions
diff --git a/index.html b/index.html
index c27a66b..4992f13 100644
--- a/index.html
+++ b/index.html
@@ -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>
);
};
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-24 18:32:16 +0000