Skip to content

Commit bfb9d34

Browse files
medyomedyo
authored
Merge pull request #193 from medyo/fix/ads-sticky
Fix/ads sticky
2 parents 5977a59 + 87191a4 commit bfb9d34

File tree

17 files changed

+78
-122
lines changed

17 files changed

+78
-122
lines changed

‎src/components/Elements/Card/Card.tsx‎

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,55 @@
1-
import React from 'react'
1+
import React, { useEffect, useState } from 'react'
22
import { isDesktop } from 'react-device-detect'
33
import { SortableKnob } from 'react-easy-sort'
44
import { BsBoxArrowInUpRight } from 'react-icons/bs'
55
import { MdOutlineDragIndicator } from 'react-icons/md'
66
import { ref } from 'src/config'
7+
import { AdvBanner } from 'src/features/adv'
8+
import { useRemoteConfigStore } from 'src/features/remoteConfig'
79
import { useUserPreferences } from 'src/stores/preferences'
810
import { SupportedCardType } from 'src/types'
911

1012
type CardProps = {
1113
children: React.ReactNode
1214
card: SupportedCardType
15+
withAds?: boolean
1316
titleComponent?: React.ReactNode
1417
fullBlock?: boolean
1518
}
1619

17-
export const Card = ({ card, titleComponent, children, fullBlock = false }: CardProps) => {
20+
export const Card = ({
21+
card,
22+
titleComponent,
23+
withAds = false,
24+
children,
25+
fullBlock = false,
26+
}: CardProps) => {
1827
const { openLinksNewTab } = useUserPreferences()
1928
const { link, icon, label, badge } = card
29+
const [canAdsLoad, setCanAdsLoad] = useState(true)
30+
const { adsConfig } = useRemoteConfigStore()
31+
32+
useEffect(() => {
33+
if (!adsConfig.enabled || !withAds) {
34+
return
35+
}
36+
37+
const handleClassChange = () => {
38+
if (document.documentElement.classList.contains('dndState')) {
39+
setCanAdsLoad(false)
40+
} else {
41+
setCanAdsLoad(true)
42+
}
43+
}
44+
45+
const observer = new MutationObserver(handleClassChange)
46+
observer.observe(document.documentElement, { attributes: true })
47+
48+
return () => {
49+
observer.disconnect()
50+
}
51+
}, [withAds, adsConfig.enabled])
52+
2053
const handleHeaderLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
2154
e.preventDefault()
2255
let url = `${link}?${ref}`
@@ -42,6 +75,8 @@ export const Card = ({ card, titleComponent, children, fullBlock = false }: Card
4275
{badge && <span className="blockHeaderBadge">{badge}</span>}
4376
</div>
4477

78+
{canAdsLoad && adsConfig.enabled && withAds && <AdvBanner />}
79+
4580
<div className="blockContent scrollable">{children}</div>
4681
</div>
4782
)

‎src/components/List/ListComponent.tsx‎

Lines changed: 1 addition & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
import React, { ReactNode, useEffect } from 'react'
1+
import React, { ReactNode } from 'react'
22
import { Placeholder } from 'src/components/placeholders'
33
import { MAX_ITEMS_PER_CARD } from 'src/config'
4-
import { AdvBanner } from 'src/features/adv'
5-
import { useRemoteConfigStore } from 'src/features/remoteConfig'
64
import { BaseEntry } from 'src/types'
75

86
type PlaceholdersProps = {
@@ -23,7 +21,6 @@ export type ListComponentPropsType<T extends BaseEntry> = {
2321
items: T[]
2422
isLoading: boolean
2523
renderItem: (item: T, index: number) => React.ReactNode
26-
withAds: boolean
2724
placeholder?: React.ReactNode
2825
header?: React.ReactNode
2926
refresh?: boolean
@@ -37,34 +34,10 @@ export function ListComponent<T extends BaseEntry>(props: ListComponentPropsType
3734
isLoading,
3835
error,
3936
renderItem,
40-
withAds,
4137
header,
4238
placeholder = <Placeholder />,
4339
limit = MAX_ITEMS_PER_CARD,
4440
} = props
45-
const { adsConfig } = useRemoteConfigStore()
46-
const [canAdsLoad, setCanAdsLoad] = React.useState(true)
47-
48-
useEffect(() => {
49-
if (!adsConfig.enabled || !withAds) {
50-
return
51-
}
52-
53-
const handleClassChange = () => {
54-
if (document.documentElement.classList.contains('dndState')) {
55-
setCanAdsLoad(false)
56-
} else {
57-
setCanAdsLoad(true)
58-
}
59-
}
60-
61-
const observer = new MutationObserver(handleClassChange)
62-
observer.observe(document.documentElement, { attributes: true })
63-
64-
return () => {
65-
observer.disconnect()
66-
}
67-
}, [withAds, adsConfig.enabled])
6841

6942
if (error) {
7043
return <p className="errorMsg">{error?.message || error}</p>
@@ -81,10 +54,6 @@ export function ListComponent<T extends BaseEntry>(props: ListComponentPropsType
8154
content.unshift(header)
8255
}
8356

84-
if (canAdsLoad && adsConfig.enabled && withAds && index === adsConfig.rowPosition) {
85-
content.unshift(<AdvBanner key={'hello-word'} />)
86-
}
87-
8857
return content
8958
})
9059
}

‎src/features/adv/components/AdvBanner.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,10 @@ export const AdvBanner = () => {
7373
</a>
7474
</span>
7575
</div>
76-
{ad.viewUrl && <img src={ad.viewUrl} key={ad.viewUrl} className="hidden" alt="" />}
76+
{ad.viewUrl &&
77+
ad.viewUrl
78+
.split('||')
79+
.map((viewUrl, i) => <img key={i} src={viewUrl} className="hidden" alt="" />)}
7780
</div>
7881
)
7982
}

‎src/features/adv/types/index.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
type AdProvider = {
2-
name: string,
3-
title: string,
4-
link?: string,
2+
name: string
3+
title: string
4+
link?: string
55
}
66

77
type NextAdType = {
@@ -18,4 +18,4 @@ export type Ad = {
1818
backgroundColor?: string
1919
provider: AdProvider
2020
nextAd?: NextAdType
21-
}
21+
}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export function AICard({ meta, withAds }: CardPropsType) {
3232
)
3333

3434
return (
35-
<Card card={meta}>
35+
<Card card={meta} withAds={withAds}>
3636
<ListComponent
3737
items={articles}
3838
error={error}
@@ -65,7 +65,6 @@ export function AICard({ meta, withAds }: CardPropsType) {
6565
}
6666
isLoading={isLoading}
6767
renderItem={renderItem}
68-
withAds={withAds}
6968
/>
7069
</Card>
7170
)

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

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import { Card } from 'src/components/Elements'
22
import { ListComponent } from 'src/components/List'
3-
import { useGetConferences } from '../../api/getConferences'
4-
import { Conference, CardPropsType } from 'src/types'
53
import { useUserPreferences } from 'src/stores/preferences'
6-
import { getCardTagsValue } from 'src/utils/DataEnhancement'
4+
import { CardPropsType, Conference } from 'src/types'
5+
import { filterUniqueEntries, getCardTagsValue } from 'src/utils/DataEnhancement'
6+
import { useGetConferences } from '../../api/getConferences'
77
import ConferenceItem from './ConferenceItem'
8-
import { filterUniqueEntries } from 'src/utils/DataEnhancement'
98

109
export function ConferencesCard({ meta, withAds }: CardPropsType) {
1110
const { userSelectedTags } = useUserPreferences()
@@ -35,13 +34,8 @@ export function ConferencesCard({ meta, withAds }: CardPropsType) {
3534
)
3635

3736
return (
38-
<Card card={meta}>
39-
<ListComponent
40-
items={getData()}
41-
isLoading={isLoading}
42-
renderItem={renderItem}
43-
withAds={withAds}
44-
/>
37+
<Card card={meta} withAds={withAds}>
38+
<ListComponent items={getData()} isLoading={isLoading} renderItem={renderItem} />
4539
</Card>
4640
)
4741
}

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -70,14 +70,9 @@ export function DevtoCard({ withAds, meta }: CardPropsType) {
7070
}
7171

7272
return (
73-
<Card card={meta} titleComponent={<HeaderTitle />}>
73+
<Card card={meta} titleComponent={<HeaderTitle />} withAds={withAds}>
7474
<FloatingFilter card={meta} filters={['language']} />
75-
<ListComponent
76-
items={getData()}
77-
isLoading={getIsLoading()}
78-
renderItem={renderItem}
79-
withAds={withAds}
80-
/>
75+
<ListComponent items={getData()} isLoading={getIsLoading()} renderItem={renderItem} />
8176
</Card>
8277
)
8378
}

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -71,14 +71,9 @@ export function FreecodecampCard({ meta, withAds }: CardPropsType) {
7171
}
7272

7373
return (
74-
<Card card={meta} titleComponent={<HeaderTitle />}>
74+
<Card card={meta} titleComponent={<HeaderTitle />} withAds={withAds}>
7575
<FloatingFilter card={meta} filters={['language']} />
76-
<ListComponent
77-
items={getData()}
78-
isLoading={getIsLoading()}
79-
renderItem={renderItem}
80-
withAds={withAds}
81-
/>
76+
<ListComponent items={getData()} isLoading={getIsLoading()} renderItem={renderItem} />
8277
</Card>
8378
)
8479
}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,14 +97,13 @@ export function GithubCard({ meta, withAds }: CardPropsType) {
9797
}
9898
}
9999
return (
100-
<Card fullBlock={true} card={meta} titleComponent={<HeaderTitle />}>
100+
<Card fullBlock={true} card={meta} titleComponent={<HeaderTitle />} withAds={withAds}>
101101
<FloatingFilter card={meta} filters={['datesRange', 'language']} />
102102
<ListComponent
103103
items={getData()}
104104
error={getError()}
105105
isLoading={getIsLoading()}
106106
renderItem={renderItem}
107-
withAds={withAds}
108107
/>
109108
</Card>
110109
)

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

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Card } from 'src/components/Elements'
22
import { ListComponent } from 'src/components/List'
3-
import { useGetHackertNewsArticles } from '../../api/getHackerNewsArticles'
43
import { Article, CardPropsType } from 'src/types'
4+
import { useGetHackertNewsArticles } from '../../api/getHackerNewsArticles'
55
import ArticleItem from './ArticleItem'
66

77
export function HackernewsCard({ meta, withAds }: CardPropsType) {
@@ -12,14 +12,8 @@ export function HackernewsCard({ meta, withAds }: CardPropsType) {
1212
)
1313

1414
return (
15-
<Card card={meta}>
16-
<ListComponent
17-
items={articles}
18-
error={error}
19-
isLoading={isLoading}
20-
renderItem={renderItem}
21-
withAds={withAds}
22-
/>
15+
<Card card={meta} withAds={withAds}>
16+
<ListComponent items={articles} error={error} isLoading={isLoading} renderItem={renderItem} />
2317
</Card>
2418
)
2519
}

0 commit comments

Comments
 (0)