Fix/ads sticky

src/components/Elements/Card/Card.tsx

@@ -1,22 +1,55 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { isDesktop } from 'react-device-detect'
 import { SortableKnob } from 'react-easy-sort'
 import { BsBoxArrowInUpRight } from 'react-icons/bs'
 import { MdOutlineDragIndicator } from 'react-icons/md'
 import { ref } from 'src/config'
+import { AdvBanner } from 'src/features/adv'
+import { useRemoteConfigStore } from 'src/features/remoteConfig'
 import { useUserPreferences } from 'src/stores/preferences'
 import { SupportedCardType } from 'src/types'
 
 type CardProps = {
   children: React.ReactNode
   card: SupportedCardType
+  withAds?: boolean
   titleComponent?: React.ReactNode
   fullBlock?: boolean
 }
 
-export const Card = ({ card, titleComponent, children, fullBlock = false }: CardProps) => {
+export const Card = ({
+  card,
+  titleComponent,
+  withAds = false,
+  children,
+  fullBlock = false,
+}: CardProps) => {
   const { openLinksNewTab } = useUserPreferences()
   const { link, icon, label, badge } = card
+  const [canAdsLoad, setCanAdsLoad] = useState(true)
+  const { adsConfig } = useRemoteConfigStore()
+
+  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])
+
   const handleHeaderLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault()
     let url = `${link}?${ref}`
@@ -42,6 +75,8 @@ export const Card = ({ card, titleComponent, children, fullBlock = false }: Card
         {badge && <span className="blockHeaderBadge">{badge}</span>}
       </div>
 
+      {canAdsLoad && adsConfig.enabled && withAds && <AdvBanner />}
+
       <div className="blockContent scrollable">{children}</div>
     </div>
   )

src/components/List/ListComponent.tsx

@@ -1,8 +1,6 @@
-import React, { ReactNode, useEffect } from 'react'
+import React, { ReactNode } from 'react'
 import { Placeholder } from 'src/components/placeholders'
 import { MAX_ITEMS_PER_CARD } from 'src/config'
-import { AdvBanner } from 'src/features/adv'
-import { useRemoteConfigStore } from 'src/features/remoteConfig'
 import { BaseEntry } from 'src/types'
 
 type PlaceholdersProps = {
@@ -23,7 +21,6 @@ export type ListComponentPropsType<T extends BaseEntry> = {
   items: T[]
   isLoading: boolean
   renderItem: (item: T, index: number) => React.ReactNode
-  withAds: boolean
   placeholder?: React.ReactNode
   header?: React.ReactNode
   refresh?: boolean
@@ -37,34 +34,10 @@ export function ListComponent<T extends BaseEntry>(props: ListComponentPropsType
     isLoading,
     error,
     renderItem,
-    withAds,
     header,
     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>
@@ -81,10 +54,6 @@ export function ListComponent<T extends BaseEntry>(props: ListComponentPropsType
         content.unshift(header)
       }
 
-      if (canAdsLoad && adsConfig.enabled && withAds && index === adsConfig.rowPosition) {
-        content.unshift(<AdvBanner key={'hello-word'} />)
-      }
-
       return content
     })
   }

src/features/adv/components/AdvBanner.tsx

@@ -73,7 +73,10 @@ export const AdvBanner = () => {
           </a>
         </span>
       </div>
-      {ad.viewUrl && <img src={ad.viewUrl} key={ad.viewUrl} className="hidden" alt="" />}
+      {ad.viewUrl &&
+        ad.viewUrl
+          .split('||')
+          .map((viewUrl, i) => <img key={i} src={viewUrl} className="hidden" alt="" />)}
     </div>
   )
 }

src/features/adv/types/index.ts

@@ -1,7 +1,7 @@
 type AdProvider = {
-  name: string,
-  title: string,
-  link?: string,
+  name: string
+  title: string
+  link?: string
 }
 
 type NextAdType = {
@@ -18,4 +18,4 @@ export type Ad = {
   backgroundColor?: string
   provider: AdProvider
   nextAd?: NextAdType
-}
+}

src/features/cards/components/aiCard/AICard.tsx

@@ -32,7 +32,7 @@ export function AICard({ meta, withAds }: CardPropsType) {
   )
 
   return (
-    <Card card={meta}>
+    <Card card={meta} withAds={withAds}>
       <ListComponent
         items={articles}
         error={error}
@@ -65,7 +65,6 @@ export function AICard({ meta, withAds }: CardPropsType) {
         }
         isLoading={isLoading}
         renderItem={renderItem}
-        withAds={withAds}
       />
     </Card>
   )

src/features/cards/components/conferencesCard/ConferencesCard.tsx

@@ -1,11 +1,10 @@
 import { Card } from 'src/components/Elements'
 import { ListComponent } from 'src/components/List'
-import { useGetConferences } from '../../api/getConferences'
-import { Conference, CardPropsType } from 'src/types'
 import { useUserPreferences } from 'src/stores/preferences'
-import { getCardTagsValue } from 'src/utils/DataEnhancement'
+import { CardPropsType, Conference } from 'src/types'
+import { filterUniqueEntries, getCardTagsValue } from 'src/utils/DataEnhancement'
+import { useGetConferences } from '../../api/getConferences'
 import ConferenceItem from './ConferenceItem'
-import { filterUniqueEntries } from 'src/utils/DataEnhancement'
 
 export function ConferencesCard({ meta, withAds }: CardPropsType) {
   const { userSelectedTags } = useUserPreferences()
@@ -35,13 +34,8 @@ export function ConferencesCard({ meta, withAds }: CardPropsType) {
   )
 
   return (
-    <Card card={meta}>
-      <ListComponent
-        items={getData()}
-        isLoading={isLoading}
-        renderItem={renderItem}
-        withAds={withAds}
-      />
+    <Card card={meta} withAds={withAds}>
+      <ListComponent items={getData()} isLoading={isLoading} renderItem={renderItem} />
     </Card>
   )
 }

src/features/cards/components/devtoCard/DevtoCard.tsx

@@ -70,14 +70,9 @@ export function DevtoCard({ withAds, meta }: CardPropsType) {
   }
 
   return (
-    <Card card={meta} titleComponent={<HeaderTitle />}>
+    <Card card={meta} titleComponent={<HeaderTitle />} withAds={withAds}>
       <FloatingFilter card={meta} filters={['language']} />
-      <ListComponent
-        items={getData()}
-        isLoading={getIsLoading()}
-        renderItem={renderItem}
-        withAds={withAds}
-      />
+      <ListComponent items={getData()} isLoading={getIsLoading()} renderItem={renderItem} />
     </Card>
   )
 }

src/features/cards/components/freecodecampCard/FreecodecampCard.tsx

@@ -71,14 +71,9 @@ export function FreecodecampCard({ meta, withAds }: CardPropsType) {
   }
 
   return (
-    <Card card={meta} titleComponent={<HeaderTitle />}>
+    <Card card={meta} titleComponent={<HeaderTitle />} withAds={withAds}>
       <FloatingFilter card={meta} filters={['language']} />
-      <ListComponent
-        items={getData()}
-        isLoading={getIsLoading()}
-        renderItem={renderItem}
-        withAds={withAds}
-      />
+      <ListComponent items={getData()} isLoading={getIsLoading()} renderItem={renderItem} />
     </Card>
   )
 }

src/features/cards/components/githubCard/GithubCard.tsx

@@ -97,14 +97,13 @@ export function GithubCard({ meta, withAds }: CardPropsType) {
     }
   }
   return (
-    <Card fullBlock={true} card={meta} titleComponent={<HeaderTitle />}>
+    <Card fullBlock={true} card={meta} titleComponent={<HeaderTitle />} withAds={withAds}>
       <FloatingFilter card={meta} filters={['datesRange', 'language']} />
       <ListComponent
         items={getData()}
         error={getError()}
         isLoading={getIsLoading()}
         renderItem={renderItem}
-        withAds={withAds}
       />
     </Card>
   )

src/features/cards/components/hackernewsCard/HackernewsCard.tsx

@@ -1,7 +1,7 @@
 import { Card } from 'src/components/Elements'
 import { ListComponent } from 'src/components/List'
-import { useGetHackertNewsArticles } from '../../api/getHackerNewsArticles'
 import { Article, CardPropsType } from 'src/types'
+import { useGetHackertNewsArticles } from '../../api/getHackerNewsArticles'
 import ArticleItem from './ArticleItem'
 
 export function HackernewsCard({ meta, withAds }: CardPropsType) {
@@ -12,14 +12,8 @@ export function HackernewsCard({ meta, withAds }: CardPropsType) {
   )
 
   return (
-    <Card card={meta}>
-      <ListComponent
-        items={articles}
-        error={error}
-        isLoading={isLoading}
-        renderItem={renderItem}
-        withAds={withAds}
-      />
+    <Card card={meta} withAds={withAds}>
+      <ListComponent items={articles} error={error} isLoading={isLoading} renderItem={renderItem} />
     </Card>
   )
 }

src/features/cards/components/hashnodeCard/HashnodeCard.tsx

@@ -71,14 +71,9 @@ export function HashnodeCard({ withAds, meta }: CardPropsType) {
   }
 
   return (
-    <Card card={meta} titleComponent={<HeaderTitle />}>
+    <Card card={meta} titleComponent={<HeaderTitle />} withAds={withAds}>
       <FloatingFilter card={meta} filters={['language']} />
-      <ListComponent
-        items={getData()}
-        isLoading={getIsLoading()}
-        renderItem={renderItem}
-        withAds={withAds}
-      />
+      <ListComponent items={getData()} isLoading={getIsLoading()} renderItem={renderItem} />
     </Card>
   )
 }

src/features/cards/components/indiehackersCard/IndiehackersCard.tsx

@@ -1,7 +1,7 @@
 import { Card } from 'src/components/Elements'
 import { ListComponent } from 'src/components/List'
-import { useGetIndieHackersArticles } from '../../api/getIndieHackersArticles'
 import { Article, CardPropsType } from 'src/types'
+import { useGetIndieHackersArticles } from '../../api/getIndieHackersArticles'
 import { ArticleItem } from './ArticleItem'
 
 export function IndiehackersCard({ meta, withAds }: CardPropsType) {
@@ -12,14 +12,8 @@ export function IndiehackersCard({ meta, withAds }: CardPropsType) {
   )
 
   return (
-    <Card card={meta}>
-      <ListComponent
-        items={articles}
-        error={error}
-        isLoading={isLoading}
-        renderItem={renderItem}
-        withAds={withAds}
-      />
+    <Card card={meta} withAds={withAds}>
+      <ListComponent items={articles} error={error} isLoading={isLoading} renderItem={renderItem} />
     </Card>
   )
 }

src/features/cards/components/lobstersCard/LobstersCard.tsx

@@ -1,7 +1,7 @@
 import { Card } from 'src/components/Elements'
 import { ListComponent } from 'src/components/List'
-import { useGetLobstersArticles } from '../../api/getLobstersArticles'
 import { Article, CardPropsType } from 'src/types'
+import { useGetLobstersArticles } from '../../api/getLobstersArticles'
 import ArticleItem from './ArticleItem'
 
 export function LobstersCard({ withAds, meta }: CardPropsType) {
@@ -12,14 +12,8 @@ export function LobstersCard({ withAds, meta }: CardPropsType) {
   )
 
   return (
-    <Card card={meta}>
-      <ListComponent
-        items={articles}
-        error={error}
-        isLoading={isLoading}
-        renderItem={renderItem}
-        withAds={withAds}
-      />
+    <Card card={meta} withAds={withAds}>
+      <ListComponent items={articles} error={error} isLoading={isLoading} renderItem={renderItem} />
     </Card>
   )
 }

src/features/cards/components/mediumCard/MediumCard.tsx

@@ -69,14 +69,9 @@ export function MediumCard({ meta, withAds }: CardPropsType) {
   }
 
   return (
-    <Card card={meta} titleComponent={<HeaderTitle />}>
+    <Card card={meta} titleComponent={<HeaderTitle />} withAds={withAds}>
       <FloatingFilter card={meta} filters={['language']} />
-      <ListComponent
-        items={getData()}
-        isLoading={getIsLoading()}
-        renderItem={renderItem}
-        withAds={withAds}
-      />
+      <ListComponent items={getData()} isLoading={getIsLoading()} renderItem={renderItem} />
     </Card>
   )
 }

src/features/cards/components/producthuntCard/ProducthuntCard.tsx

@@ -1,8 +1,8 @@
 import { Card } from 'src/components/Elements'
 import { ListComponent } from 'src/components/List'
-import { useGeProductHuntProducts } from '../../api/getProductHuntProducts'
-import { Article, CardPropsType } from 'src/types'
 import { ProductHuntPlaceholder } from 'src/components/placeholders'
+import { Article, CardPropsType } from 'src/types'
+import { useGeProductHuntProducts } from '../../api/getProductHuntProducts'
 import ArticleItem from './ArticleItem'
 
 export function ProductHuntCard({ meta, withAds }: CardPropsType) {
@@ -22,13 +22,12 @@ export function ProductHuntCard({ meta, withAds }: CardPropsType) {
   )
 
   return (
-    <Card card={meta}>
+    <Card card={meta} withAds={withAds}>
       <ListComponent
         items={products}
         error={error}
         isLoading={isLoading}
         renderItem={renderItem}
-        withAds={withAds}
         placeholder={<ProductHuntPlaceholder />}
       />
     </Card>