use goatcounter the right way

5 files changed, 100 insertions, 120 deletions

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>
     );
 };