add goatcounter as page element to hopefully catch routing

4 files changed, 32 insertions, 2 deletions

diff --git a/src/App.js b/src/App.js
index 68d7f08..e01dbdf 100644
--- a/src/App.js
+++ b/src/App.js
@@ -63,7 +63,7 @@ function App() {
 
                 <button
                     onClick={() => setTimeDifference(timeDifference == 1 ? 5 : 1)}
-                    class="bg-transparent text-sm hover:bg-orange-400 text-gray-600 hover:text-white py-1 my-1 px-2 border border-orange-300 hover:border-transparent rounded transition ease-in-out duration-300"
+                    className="bg-transparent text-sm hover:bg-orange-400 text-gray-600 hover:text-white py-1 my-1 px-2 border border-orange-300 hover:border-transparent rounded transition ease-in-out duration-300"
                 >
                     Use one {timeDifference == 1 ? "week" : "day"} ago
                 </button>
@@ -159,7 +159,7 @@ function App() {
                     By Galen Guyer. Source available on{" "}
                     <a className="text-blue-700" href="https://github.com/galenguyer/rit-covid-dashboard">
                         GitHub
-                    </a>
+                    </a> (<a href="https://github.com/galenguyer/rit-covid-dashboard/issues">Report Issue</a>)
                 </p>
             </div>
         </BrowserRouter>
diff --git a/src/GoatCounter.js b/src/GoatCounter.js
new file mode 100644
index 0000000..15ec5ef
--- /dev/null
+++ b/src/GoatCounter.js
@@ -0,0 +1,26 @@
+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
\ No newline at end of file
diff --git a/src/History.js b/src/History.js
index df5398b..2e710de 100644
--- a/src/History.js
+++ b/src/History.js
@@ -12,6 +12,7 @@ import {
     ResponsiveContainer,
     Label,
 } from "recharts";
+import GoatCounter from './GoatCounter';
 
 const History = (props) => {
     const offset = DateTime.fromSQL(props.data[0].date, { zone: "UTC" }).setZone(DateTime.local().zoneName).toSeconds();
@@ -45,6 +46,7 @@ const History = (props) => {
                 <YAxis dataKey="value" type="number"></YAxis>
                 <Tooltip content={CustomTooltip} />
             </LineChart>
+            <GoatCounter />
         </>
     );
 };
diff --git a/src/MainPage.js b/src/MainPage.js
index ade335e..7c316c4 100644
--- a/src/MainPage.js
+++ b/src/MainPage.js
@@ -1,5 +1,6 @@
 import React from "react";
 import Card from "./Card";
+import GoatCounter from "./GoatCounter";
 
 const MainPage = (props) => {
     const latest = props.latest;
@@ -102,6 +103,7 @@ const MainPage = (props) => {
                     />
                 </div>
             </div>
+            <GoatCounter />
         </>
     );
 };