From 60af17c095ae6f034dac96ce64bfb5cd76fe603a Mon Sep 17 00:00:00 2001 From: Galen Guyer Date: Wed, 13 Apr 2022 22:31:07 -0400 Subject: use goatcounter the right way --- index.html | 1 + package.json | 1 - pnpm-lock.yaml | 2 - src/App.jsx | 169 +++++++++++++++++++++-------------------- src/components/GoatCounter.jsx | 26 ------- src/main.jsx | 21 ++--- src/pages/Graph.jsx | 2 - src/pages/Index.jsx | 2 - 8 files changed, 101 insertions(+), 123 deletions(-) delete mode 100644 src/components/GoatCounter.jsx diff --git a/index.html b/index.html index c27a66b..4992f13 100644 --- a/index.html +++ b/index.html @@ -16,5 +16,6 @@

+ 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 ( - -

- -

RIT COVID Dashboard

- - -

- - - } - > - - } - > - - } - > - - } - > - } /> - - -

- +

+ +

RIT COVID Dashboard

+ + +

+ + + } + > + + } + > + + } + > + + } + > + } /> + + + +

); }; 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( - - - -) +ReactDOM.createRoot(document.getElementById("root")).render( + + + + + +); 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) => { - ); }; 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) => { /> - ); }; -- cgit v1.2.3