Handle adblock properly

Author: velopert

package.json

@@ -90,6 +90,7 @@
     "jest-environment-jsdom-fourteen": "0.1.0",
     "jest-resolve": "24.9.0",
     "jest-watch-typeahead": "0.4.2",
+    "just-detect-adblock": "^1.1.0",
     "katex": "^0.11.1",
     "koa": "^2.11.0",
     "koa-better-http-proxy": "^0.2.4",

src/components/common/AdFeed.tsx

@@ -2,20 +2,17 @@ import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { mediaQuery } from '../../lib/styles/media';
 
+declare global {
+  interface Window {
+    adsbygoogle: { [key: string]: unknown }[];
+  }
+}
+
 function AdFeed() {
-  const [adBlocked, setAdBlocked] = useState(false);
   useEffect(() => {
-    if (((window as any)?.adsbygoogle || [])?.push) {
-      (window as any).adsbygoogle = ((window as any).adsbygoogle || []).push(
-        {},
-      );
-    } else {
-      setAdBlocked(true);
-    }
+    (window.adsbygoogle = window.adsbygoogle || []).push({});
   }, []);
 
-  if (adBlocked) return null;
-
   return (
     <Block>
       <ins

src/components/common/PostCardGrid.tsx

@@ -1,9 +1,10 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import styled from 'styled-components';
 import PostCard, { PostCardSkeleton } from './PostCard';
 import { PartialPost } from '../../lib/graphql/post';
 import { mediaQuery } from '../../lib/styles/media';
 import AdFeed from './AdFeed';
+import { detectAnyAdblocker } from 'just-detect-adblock';
 
 export type PostCardGridProps = {
   posts: PartialPost[];
@@ -12,14 +13,18 @@ export type PostCardGridProps = {
 };
 
 function PostCardGrid({ posts, loading, forHome }: PostCardGridProps) {
-  // const [adVisible, setAdVisible] = useState(true);
-  // useEffect(() => {
-  //   if (localStorage.getItem('SHOW_AD') === 'true') {
-  //     setAdVisible(true);
-  //   }
-  // }, []);
+  const [adBlocked, setAdBlocked] = useState(false);
+
+  useEffect(() => {
+    detectAnyAdblocker().then((detected: boolean) => {
+      if (detected) {
+        setAdBlocked(true);
+      }
+    });
+  }, []);
 
   const postsWithAds = useMemo(() => {
+    if (adBlocked) return posts;
     if (!forHome) return posts;
     if (posts.length === 0) return posts;
     const cloned: (PartialPost | undefined)[] = [...posts];
@@ -37,7 +42,7 @@ function PostCardGrid({ posts, loading, forHome }: PostCardGridProps) {
       cloned.splice(62, 0, undefined);
     }
     return cloned;
-  }, [posts, forHome]);
+  }, [posts, forHome, adBlocked]);
 
   return (
     <Block>

src/types/missingTypes.d.ts

@@ -12,3 +12,4 @@ declare module 'rehype-stringify';
 declare module 'rehype-raw';
 declare module 'unist-util-visit';
 declare module 'strip-markdown';
+declare module 'just-detect-adblock';

yarn.lock

@@ -7879,6 +7879,11 @@ jsx-ast-utils@^2.2.1:
     array-includes "^3.0.3"
     object.assign "^4.1.0"
 
+just-detect-adblock@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/just-detect-adblock/-/just-detect-adblock-1.1.0.tgz#01910678247394b8d8b146afc869055eda2edd2e"
+  integrity sha512-xtgnwBBZaLtKspGo6jDX/H0FDsHrn41mQVWhNHge7pZe6Nj2gU2izfC09O0rPU/i97iMcJFVjbecFiTAvmNhLQ==
+
 katex@^0.11.0, katex@^0.11.1:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/katex/-/katex-0.11.1.tgz#df30ca40c565c9df01a466a00d53e079e84ffaa2"