feat: improve Ackee tracking (#11)

* build(deps): add use-ackee hook package

* chore: create a context provider for Ackee

The provider allows users to change the 'detailed' settings.

* chore: add a select menu to choose which info to share with Ackee

* chore: add a tooltip for askee settings

* chore: replace default select styles with custom styles

* chore: register user choice in localstorage

* chore: replace Matomo with Ackee in legal notice

1 files changed, 57 insertions, 0 deletions

diff --git a/src/utils/providers/ackee.tsx b/src/utils/providers/ackee.tsx
new file mode 100644
index 0000000..c103668
--- /dev/null
+++ b/src/utils/providers/ackee.tsx
@@ -0,0 +1,57 @@
+import { useRouter } from 'next/router';
+import { createContext, FC, useContext, useState } from 'react';
+import useAckee from 'use-ackee';
+
+export type AckeeProps = {
+  domain: string;
+  siteId: string;
+  detailed?: boolean;
+  setDetailed: (isDetailed: boolean) => void;
+};
+
+export type AckeeProviderProps = {
+  domain: string;
+  siteId: string;
+  ignoreLocalhost?: boolean;
+  ignoreOwnVisits?: boolean;
+};
+
+export const AckeeContext = createContext<AckeeProps>({
+  domain: '',
+  siteId: '',
+  setDetailed: (_) => {
+    // Do nothing.
+  },
+});
+
+export const useAckeeTracker = () => useContext(AckeeContext);
+
+export const AckeeProvider: FC<AckeeProviderProps> = ({
+  domain,
+  siteId,
+  children,
+  ignoreLocalhost = true,
+  ignoreOwnVisits = true,
+}) => {
+  const [detailed, setDetailed] = useState<boolean>(false);
+  const { asPath } = useRouter();
+
+  useAckee(
+    asPath,
+    { server: domain, domainId: siteId },
+    { detailed, ignoreLocalhost, ignoreOwnVisits }
+  );
+
+  return (
+    <AckeeContext.Provider
+      value={{
+        domain,
+        siteId,
+        detailed,
+        setDetailed,
+      }}
+    >
+      {children}
+    </AckeeContext.Provider>
+  );
+};