diff --git a/components/StatsModal.tsx b/components/StatsModal.tsx index e7e2987..efe9aad 100644 --- a/components/StatsModal.tsx +++ b/components/StatsModal.tsx @@ -1,5 +1,12 @@ import useSWR from "swr"; -import { useEffect, useState } from "react"; +import { + LegacyRef, + MutableRefObject, + useCallback, + useEffect, + useRef, + useState, +} from "react"; import { useTheme } from "next-themes"; import Modal from "./Modal"; @@ -25,6 +32,12 @@ interface Props { remainingTime?: ReturnType; } +declare global { + interface Window { + adsbygoogle: { loaded: boolean; push: (v: unknown) => void }; + } +} + const GRAPH_WIDTH_MIN_RATIO = 10; export default function StatsModal(props: Props) { @@ -213,6 +226,28 @@ export default function StatsModal(props: Props) { const { fail: _, ...distribution } = stats.distribution; const maxDistribution = Math.max(...Object.values(distribution)); + const [isAdUnitRendered, setIsAdUnitRendered] = useState(false); + const adUnitRef = useRef(null); + useEffect(() => { + if (!isOpen || !isAdUnitRendered) return; + + const adUnit = adUnitRef.current; + adUnit.innerHTML = ` + `; + // @ts-ignore + window.adsbygoogle = (window.adsbygoogle || []).push({}); + }, [isOpen, isAdUnitRendered]); + + const adUnitRefCallback: LegacyRef = (element) => { + adUnitRef.current = element; + setIsAdUnitRendered(!!element); + }; + return ( Statistik @@ -273,14 +308,7 @@ export default function StatsModal(props: Props) { ); })} - +
{showShare && ( <>