fix ads display

Author: medyo

src/components/Layout/DNDLayout/DNDLayout.css

@@ -9,7 +9,9 @@
   transform: translate(0, 10px);
   filter: blur(1px);
 }
-
+.dndState .blockContent {
+  scroll-snap-type: none;
+}
 .DNDContent {
   min-height: 100%;
   display: flex;

src/components/Layout/DesktopCards.tsx

@@ -2,6 +2,7 @@ import { useLayoutEffect, useRef } from 'react'
 import SortableList, { SortableItem } from 'react-easy-sort'
 import { SUPPORTED_CARDS } from 'src/config'
 import { CustomRssCard } from 'src/features/cards'
+import { useRemoteConfigStore } from 'src/features/remoteConfig'
 import { trackPageDrag } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 import { SelectedCard, SupportedCardType } from 'src/types'
@@ -16,6 +17,7 @@ export const DesktopCards = ({
   const AVAILABLE_CARDS = [...SUPPORTED_CARDS, ...userCustomCards]
   const { updateCardOrder } = useUserPreferences()
   const scrollHolderRef = useRef<HTMLElement | null>(null)
+  const { adsConfig } = useRemoteConfigStore()
 
   const onSortEnd = (oldIndex: number, newIndex: number) => {
     updateCardOrder(oldIndex, newIndex)
@@ -50,7 +52,11 @@ export const DesktopCards = ({
           return (
             <SortableItem key={card.name}>
               <div>
-                <Component key={card.name} meta={constantCard} withAds={index === 0} />
+                <Component
+                  key={card.name}
+                  meta={constantCard}
+                  withAds={index === adsConfig.columnPosition}
+                />
               </div>
             </SortableItem>
           )

src/components/List/ListComponent.tsx

@@ -1,7 +1,8 @@
-import React, { ReactNode } from 'react'
+import React, { ReactNode, useEffect } from 'react'
 import { Placeholder } from 'src/components/placeholders'
 import { MAX_ITEMS_PER_CARD } from 'src/config'
 import { BannerAd } from 'src/features/ads'
+import { useRemoteConfigStore } from 'src/features/remoteConfig'
 import { BaseEntry } from 'src/types'
 
 type PlaceholdersProps = {
@@ -39,6 +40,29 @@ export function ListComponent<T extends BaseEntry>(props: ListComponentPropsType
     placeholder = <Placeholder />,
     limit = MAX_ITEMS_PER_CARD,
   } = props
+  const { adsConfig } = useRemoteConfigStore()
+  const [canAdsLoad, setCanAdsLoad] = React.useState(true)
+
+  useEffect(() => {
+    if (!adsConfig.enabled || !withAds) {
+      return
+    }
+
+    const handleClassChange = () => {
+      if (document.documentElement.classList.contains('dndState')) {
+        setCanAdsLoad(false)
+      } else {
+        setCanAdsLoad(true)
+      }
+    }
+
+    const observer = new MutationObserver(handleClassChange)
+    observer.observe(document.documentElement, { attributes: true })
+
+    return () => {
+      observer.disconnect()
+    }
+  }, [withAds, adsConfig.enabled])
 
   if (error) {
     return <p className="errorMsg">{error?.message || error}</p>
@@ -51,7 +75,7 @@ export function ListComponent<T extends BaseEntry>(props: ListComponentPropsType
 
     return items.slice(0, limit).map((item, index) => {
       let content: ReactNode[] = [renderItem(item, index)]
-      if (withAds && index === 0) {
+      if (canAdsLoad && adsConfig.enabled && withAds && index === adsConfig.rowPosition) {
         content.unshift(<BannerAd key={'banner-ad'} />)
       }
       return content

src/features/remoteConfig/stores/remoteConfig.ts

@@ -1,42 +1,57 @@
-import { create } from 'zustand';
+import { create } from 'zustand'
 
-import { persist } from 'zustand/middleware';
-import { RemoteConfig, Tag } from "../types";
+import { persist } from 'zustand/middleware'
+import { RemoteConfig, Tag } from '../types'
 
 type RemoteConfigStore = {
-  supportedTags: Tag[];
-  marketingBannerConfig?: any;
-  setRemoteConfig: (remoteConfig: RemoteConfig) => void;
-};
+  supportedTags: Tag[]
+  marketingBannerConfig?: any
+  adsConfig: {
+    rowPosition: number
+    columnPosition: number
+    enabled: boolean
+  }
+  setRemoteConfig: (remoteConfig: RemoteConfig) => void
+}
 
-export const useRemoteConfigStore = create(persist<RemoteConfigStore>((set) => ({
-  marketingBannerConfig: undefined,
-  supportedTags: [
-    {
-      value: 'javascript',
-      label: 'Javascript',
-      githubValues: ['javascript'],
-      confsValues: ['javascript'],
-      devtoValues: ['javascript'],
-      hashnodeValues: ['javascript'],
-      mediumValues: ['javascript'],
-      redditValues: ['javascript'],
-      freecodecampValues: ['javascript']
-    },
-  ],
-  setRemoteConfig: (remoteConfig: RemoteConfig) =>
-    set(() => {
-      const { marketingBannerConfig, ...otherConfigs } = remoteConfig
-      return { ...otherConfigs }
+export const useRemoteConfigStore = create(
+  persist<RemoteConfigStore>(
+    (set) => ({
+      marketingBannerConfig: undefined,
+      adsConfig: {
+        rowPosition: 0,
+        columnPosition: 0,
+        enabled: false,
+      },
+      supportedTags: [
+        {
+          value: 'javascript',
+          label: 'Javascript',
+          githubValues: ['javascript'],
+          confsValues: ['javascript'],
+          devtoValues: ['javascript'],
+          hashnodeValues: ['javascript'],
+          mediumValues: ['javascript'],
+          redditValues: ['javascript'],
+          freecodecampValues: ['javascript'],
+        },
+      ],
+      setRemoteConfig: (remoteConfig: RemoteConfig) =>
+        set(() => {
+          const { marketingBannerConfig, ...otherConfigs } = remoteConfig
+          return { ...otherConfigs }
+        }),
     }),
-}), {
-  name: 'remote_config_storage',
-  version: 1,
-  migrate(persistedState, version) {
-    const newState = persistedState as RemoteConfigStore;
-    if (version === 0) {
-      delete newState.marketingBannerConfig
+    {
+      name: 'remote_config_storage',
+      version: 1,
+      migrate(persistedState, version) {
+        const newState = persistedState as RemoteConfigStore
+        if (version === 0) {
+          delete newState.marketingBannerConfig
+        }
+        return newState
+      },
     }
-    return newState;
-  },
-}));
+  )
+)

src/features/remoteConfig/types/index.ts

@@ -21,6 +21,11 @@ export type TagValuesFieldType =
 
 export type RemoteConfig = {
   supportedTags: Tag[]
-  refresh_rate: number | false,
+  refresh_rate: number | false
   marketingBannerConfig?: any
+  adsConfig: {
+    rowPosition: number
+    columnPosition: number
+    enabled: boolean
+  }
 }