From 745d5e0ba9c5603840e99b39667edacd23e53c93 Mon Sep 17 00:00:00 2001
From: Alexander Schoch <schochal@student.ethz.ch>
Date: Fri, 15 Sep 2023 00:21:38 +0200
Subject: [PATCH] add anti-no-adblocker banner

---
 components/header.jsx          |  5 +++++
 components/noAdblockBanner.jsx | 33 +++++++++++++++++++++++++++++++++
 package-lock.json              | 10 ++++++++++
 package.json                   |  1 +
 public/locales/de/common.json  |  4 +++-
 public/locales/en/common.json  |  4 +++-
 6 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 components/noAdblockBanner.jsx

diff --git a/components/header.jsx b/components/header.jsx
index 9a92477..53b1f0d 100644
--- a/components/header.jsx
+++ b/components/header.jsx
@@ -1,5 +1,6 @@
 import { useRouter } from "next/router";
 import Image from "next/image";
+import dynamic from "next/dynamic";
 
 import {
   ActionIcon,
@@ -13,6 +14,9 @@ import { Icon, ICONS } from "vseth-canine-ui";
 
 import parse from "html-react-parser";
 
+const NoAdblockBanner = dynamic(() => import("../components/noAdblockBanner"), {
+  ssr: false,
+});
 import { getAccentColor } from "../utilities/colors";
 
 import content from "../content/texts.json";
@@ -31,6 +35,7 @@ export default function Header() {
         justifyContent: "space-evenly",
       }}
     >
+      <NoAdblockBanner />
       <Grid style={{ display: "flex", alignItems: "center" }}>
         <Grid.Col xs={12} md={6}>
           <div>
diff --git a/components/noAdblockBanner.jsx b/components/noAdblockBanner.jsx
new file mode 100644
index 0000000..f932592
--- /dev/null
+++ b/components/noAdblockBanner.jsx
@@ -0,0 +1,33 @@
+import { useState, useEffect } from "react";
+
+import { Alert } from "@mantine/core";
+
+import { useTranslation } from "next-i18next";
+
+import parse from "html-react-parser";
+
+import { isAdblocking } from "adblock-hunter";
+
+export default function NoAdblockBanner() {
+  const { t } = useTranslation("common");
+
+  const [hasAdblock, setHasAdblock] = useState(true);
+
+  console.log(hasAdblock);
+
+  useEffect(() => {
+    isAdblocking().then((isAdblocking) => {
+      setHasAdblock(isAdblocking);
+    });
+  }, []);
+
+  return (
+    <>
+      {!hasAdblock && (
+        <Alert title={t("noAdblockTitle")} color="red">
+          {parse(t("noAdblockText"))}
+        </Alert>
+      )}
+    </>
+  );
+}
diff --git a/package-lock.json b/package-lock.json
index 6d6a0f8..4d6c58e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@apollo/client": "^3.8.1",
         "@mantine/form": "^6.0.20",
         "@mantine/notifications": "^5.10.5",
+        "adblock-hunter": "^1.0.1",
         "axios": "^1.5.0",
         "eslint": "8.48.0",
         "eslint-config-next": "13.4.19",
@@ -4866,6 +4867,15 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/adblock-hunter": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/adblock-hunter/-/adblock-hunter-1.0.1.tgz",
+      "integrity": "sha512-BEhm3l2rYGs6WCZB+T7D+Je5rqp7WKOAqN8UMOmQZJSqR93IcU1aHaJ4vn6RMwLiRmc4fVkKc+clisPGcOQurA==",
+      "funding": {
+        "type": "individual",
+        "url": "https://ko-fi.com/andriir"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
diff --git a/package.json b/package.json
index 20f6fcc..26b2a29 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@apollo/client": "^3.8.1",
     "@mantine/form": "^6.0.20",
     "@mantine/notifications": "^5.10.5",
+    "adblock-hunter": "^1.0.1",
     "axios": "^1.5.0",
     "eslint": "8.48.0",
     "eslint-config-next": "13.4.19",
diff --git a/public/locales/de/common.json b/public/locales/de/common.json
index 5417870..9cfbe26 100644
--- a/public/locales/de/common.json
+++ b/public/locales/de/common.json
@@ -21,5 +21,7 @@
   "mailFailureText": "Etwas ist beim Versand des Formulars schiefgelaufen.",
   "addEvent": "Event Hinzufügen",
   "editEvent": "Event Bearbeiten",
-  "ENotEmpty": "Dieses Feld bitte ausfüllen"
+  "ENotEmpty": "Dieses Feld bitte ausfüllen",
+  "noAdblockTitle": "Kein Adblocker Installiert!",
+  "noAdblockText": "Du hast deinen Adblocker ausgeschaltet oder keinen installiert! Installiere jetzt einen für <a target='_blank' href='https://addons.mozilla.org/de/firefox/addon/ublock-origin/'>Firefox</a> oder <a target='_blank' href='https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm?hl=de'>Chrome</a>. Weil <a href='#philosophy'>Datenschutz</a> ein Menschenrecht ist."
 }
\ No newline at end of file
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 0376c5a..7b4427f 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -21,5 +21,7 @@
   "mailFailureText": "Something went wrong when sending the form",
   "addEvent": "Add Event",
   "editEvent": "Edit Event",
-  "ENotEmpty": "Please fill out this field"
+  "ENotEmpty": "Please fill out this field",
+  "noAdblockTitle": "No Adblocker Installed",
+  "noAdblockText": "You have turned off or did not install an Adblocker! Install it now for <a target='_blank' href='https://addons.mozilla.org/de/firefox/addon/ublock-origin/'>Firefox</a> or <a target='_blank' href='https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm?hl=de'>Chrome</a>. Because <a href='#philosophy'>privacy</a> is a human right."
 }
\ No newline at end of file
-- 
GitLab