removing carbon ads accordingly when screen oreintation changes (json-schema-org#477)

* removing carbon ads when screen oreintation changes

* Update

* Update

* Update

Author: divyaxdv

components/CarbonsAds.tsx

@@ -1,17 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { useRouter } from 'next/router';
 
-declare global {
-  interface Window {
-    _carbonads: {
-      refresh: () => void;
-      reload: (where: string, force_serve: boolean) => void;
-      remove: (el: HTMLElement) => void;
-      srv: () => void;
-    };
-  }
-}
-
 type Props = {
   className?: string;
   variant?: 'sidebar';
@@ -22,41 +11,28 @@ function CarbonAds({ className, variant = 'sidebar' }: Props) {
   const router = useRouter();
 
   useEffect(() => {
-    const mobileMediaQuery = window.matchMedia('(max-width: 1023px)');
-    if (!mobileMediaQuery.matches) {
-      const hasCarbonAds = document.querySelector('#carbonads');
-      // Check if another ad is present to refresh
-      if (hasCarbonAds) {
-        window._carbonads.refresh();
-        return;
-      } else {
-        // Check if the script is present (ad is not yet present) so that duplicate requests are not made to carbon ads
-        const hasCarbonAdsScript = document.querySelector('#_carbonads_js');
-        if (!hasCarbonAdsScript) {
-          const carbonAdsScript = document.createElement('script');
-          carbonAdsScript.id = '_carbonads_js';
-          carbonAdsScript.type = 'text/javascript';
-          carbonAdsScript.async = true;
-          document
-            .querySelector('#carbonads-container')
-            ?.appendChild(carbonAdsScript);
-          carbonAdsScript.src = `//cdn.carbonads.com/carbon.js?serve=CE7I627Y&placement=json-schemaorg&rnd=${Math.random()}`;
-        }
-      }
+    const hasCarbonAdsScript = document.querySelector('#_carbonads_js');
+    if (!hasCarbonAdsScript) {
+      const carbonAdsScript = document.createElement('script');
+      carbonAdsScript.id = '_carbonads_js';
+      carbonAdsScript.type = 'text/javascript';
+      carbonAdsScript.async = true;
+      document
+        .querySelector('#carbonads-container')
+        ?.appendChild(carbonAdsScript);
+      carbonAdsScript.src = `//cdn.carbonads.com/carbon.js?serve=CE7I627Y&placement=json-schemaorg&rnd=${Math.random()}`;
+    }
 
-      const existingStyleSheet = document.querySelector('#_carbonads_css');
-      if (existingStyleSheet) {
-        existingStyleSheet.innerHTML = CarbonAds.stylesheet[variant];
-      } else {
-        const carbonAdsStyleSheet = document.createElement('style');
-        carbonAdsStyleSheet.id = '_carbonads_css';
-        carbonAdsStyleSheet.innerHTML = CarbonAds.stylesheet[variant];
-        document
-          .querySelector('#carbonads-container')
-          ?.appendChild(carbonAdsStyleSheet);
-      }
+    const existingStyleSheet = document.querySelector('#_carbonads_css');
+    if (existingStyleSheet) {
+      existingStyleSheet.innerHTML = CarbonAds.stylesheet[variant];
     } else {
-      (carbonRef.current as HTMLElement).style.display = 'none';
+      const carbonAdsStyleSheet = document.createElement('style');
+      carbonAdsStyleSheet.id = '_carbonads_css';
+      carbonAdsStyleSheet.innerHTML = CarbonAds.stylesheet[variant];
+      document
+        .querySelector('#carbonads-container')
+        ?.appendChild(carbonAdsStyleSheet);
     }
   }, [router.asPath]);
 
@@ -115,6 +91,12 @@ CarbonAds.stylesheet = {
       margin-top: 4px;
       color: rgb(100 116 139);
     }
+
+    @media (max-width: 1023px) {
+      #carbonads-container {
+        display: none;
+      }
+    }
   `,
 };