Skip to content

Commit 9c9518f

Browse files
medyomedyo
committed
feat: add className prop to FeedItem components and update usage across related components
1 parent 2fa11a1 commit 9c9518f

6 files changed

Lines changed: 129 additions & 114 deletions

File tree

‎src/features/feed/components/Feed.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,11 +74,17 @@ export const Feed = () => {
7474
return (
7575
<div ref={rootRef} className="feed scrollable" style={{ overflow: 'auto', maxHeight: '100%' }}>
7676
{(feed?.pages.flatMap((page) => page.data) || []).map((article, index) => {
77+
{
78+
/* TODO: fix analytics tag */
79+
}
7780
return (
78-
<div key={article.id} className="feedItem">
79-
{/* TODO: fix analytics tag */}
80-
<FeedItem item={article} key={article.id} index={index} analyticsTag={'test'} />
81-
</div>
81+
<FeedItem
82+
item={article}
83+
key={article.id}
84+
index={index}
85+
analyticsTag={'test'}
86+
className="feedItem"
87+
/>
8288
)
8389
})}
8490
{hasNextPage && (

‎src/features/feed/components/feedItems/ArticleFeedItem.tsx‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,37 +7,39 @@ import { format } from 'timeago.js'
77
import { FeedItemHeader } from '../FeedItemHeader'
88

99
export const ArticleFeedItem = (props: BaseItemPropsType<ArticleFeedItemData>) => {
10-
const { item, index, analyticsTag } = props
10+
const { item, index, analyticsTag, className } = props
1111
const { listingMode } = useUserPreferences()
1212

1313
return (
14-
<CardItemWithActions
15-
source={analyticsTag}
16-
index={index}
17-
item={item}
18-
key={index}
19-
cardItem={
20-
<>
21-
<FeedItemHeader item={item} />
22-
{listingMode === 'compact' && (
23-
<div className="rowDetails">
24-
<span className="rowItem capitalize">
25-
<GoDotFill className="rowItemIcon" /> {item.source}
26-
</span>
27-
</div>
28-
)}
29-
{listingMode === 'normal' && (
30-
<div className="rowDetails">
31-
<span className="rowItem capitalize">
32-
<GoDotFill className="rowItemIcon" /> {item.source}
33-
</span>
34-
<span className="rowItem" title={new Date(item.date).toUTCString()}>
35-
<MdAccessTime className="rowItemIcon" /> {format(new Date(item.date))}
36-
</span>
37-
</div>
38-
)}
39-
</>
40-
}
41-
/>
14+
<div className={className}>
15+
<CardItemWithActions
16+
source={analyticsTag}
17+
index={index}
18+
item={item}
19+
key={index}
20+
cardItem={
21+
<>
22+
<FeedItemHeader item={item} />
23+
{listingMode === 'compact' && (
24+
<div className="rowDetails">
25+
<span className="rowItem capitalize">
26+
<GoDotFill className="rowItemIcon" /> {item.source}
27+
</span>
28+
</div>
29+
)}
30+
{listingMode === 'normal' && (
31+
<div className="rowDetails">
32+
<span className="rowItem capitalize">
33+
<GoDotFill className="rowItemIcon" /> {item.source}
34+
</span>
35+
<span className="rowItem" title={new Date(item.date).toUTCString()}>
36+
<MdAccessTime className="rowItemIcon" /> {format(new Date(item.date))}
37+
</span>
38+
</div>
39+
)}
40+
</>
41+
}
42+
/>
43+
</div>
4244
)
4345
}

‎src/features/feed/components/feedItems/FeedItem.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,22 @@ import { ProductFeedItem } from './ProductFeedItem'
55
import { RepoFeedItem } from './RepoFeedItem'
66

77
export const FeedItem = (props: BaseItemPropsType<FeedItemData>) => {
8-
const { item, index, analyticsTag } = props
8+
const { item } = props
99

1010
if (item.type === 'github') {
11-
return <RepoFeedItem item={item} index={index} analyticsTag={analyticsTag} />
11+
return <RepoFeedItem {...props} item={item} />
1212
}
1313

1414
if (item.type === 'producthunt') {
15-
return <ProductFeedItem item={item} index={index} analyticsTag={analyticsTag} />
15+
return <ProductFeedItem {...props} item={item} />
1616
}
1717

1818
if (item.type === 'post') {
19-
return <ArticleFeedItem item={item} index={index} analyticsTag={analyticsTag} />
19+
return <ArticleFeedItem {...props} item={item} />
2020
}
2121

2222
if (item.type === 'ad') {
23-
return <AdvFeedItem />
23+
return <AdvFeedItem {...props} />
2424
}
2525

2626
return null

‎src/features/feed/components/feedItems/ProductFeedItem.tsx‎

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,40 +6,42 @@ import { BaseItemPropsType, ProductHuntFeedItemData } from 'src/types'
66
import { FeedItemHeader } from '../FeedItemHeader'
77

88
export const ProductFeedItem = (props: BaseItemPropsType<ProductHuntFeedItemData>) => {
9-
const { item, index, analyticsTag } = props
9+
const { item, index, analyticsTag, className } = props
1010
const { listingMode } = useUserPreferences()
1111

1212
return (
13-
<CardItemWithActions
14-
source={analyticsTag}
15-
index={index}
16-
item={item}
17-
key={index}
18-
cardItem={
19-
<>
20-
<FeedItemHeader item={item} />
21-
<div className="rowDetails">
22-
<span className="rowItem">{item.tagline}</span>
23-
</div>
24-
{listingMode === 'compact' && (
13+
<div className={className}>
14+
<CardItemWithActions
15+
source={analyticsTag}
16+
index={index}
17+
item={item}
18+
key={index}
19+
cardItem={
20+
<>
21+
<FeedItemHeader item={item} />
2522
<div className="rowDetails">
26-
<span className="rowItem verticalAligned">
27-
<SiProducthunt color="#D65736" /> Product Hunt
28-
</span>
23+
<span className="rowItem">{item.tagline}</span>
2924
</div>
30-
)}
31-
{listingMode === 'normal' && (
32-
<div className="rowDetails">
33-
<span className="rowItem verticalAligned">
34-
<SiProducthunt color="#D65736" /> Product Hunt
35-
</span>
36-
<span className="rowItem verticalAligned">
37-
<VscTriangleUp className="rowItemIcon" /> {item.votes_count || 0} upvotes
38-
</span>
39-
</div>
40-
)}
41-
</>
42-
}
43-
/>
25+
{listingMode === 'compact' && (
26+
<div className="rowDetails">
27+
<span className="rowItem verticalAligned">
28+
<SiProducthunt color="#D65736" /> Product Hunt
29+
</span>
30+
</div>
31+
)}
32+
{listingMode === 'normal' && (
33+
<div className="rowDetails">
34+
<span className="rowItem verticalAligned">
35+
<SiProducthunt color="#D65736" /> Product Hunt
36+
</span>
37+
<span className="rowItem verticalAligned">
38+
<VscTriangleUp className="rowItemIcon" /> {item.votes_count || 0} upvotes
39+
</span>
40+
</div>
41+
)}
42+
</>
43+
}
44+
/>
45+
</div>
4446
)
4547
}

‎src/features/feed/components/feedItems/RepoFeedItem.tsx‎

Lines changed: 50 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -10,58 +10,62 @@ function numberWithCommas(x: number | string) {
1010
}
1111

1212
export const RepoFeedItem = (props: BaseItemPropsType<GithubFeedItemData>) => {
13-
const { item, index, analyticsTag } = props
13+
const { item, index, analyticsTag, className } = props
1414
const { listingMode } = useUserPreferences()
1515

1616
return (
17-
<CardItemWithActions
18-
source={analyticsTag}
19-
index={index}
20-
item={item}
21-
key={index}
22-
cardItem={
23-
<>
24-
<FeedItemHeader
25-
item={item}
26-
fallbackImage={
27-
<div className="rowCover repo">
28-
<SiGithub size={40} />
29-
<p className="title">{item.title}</p>
30-
<p className="description">{item.description}</p>
31-
<div className="details">
32-
<p>
33-
<VscStarFull className="rowItemIcon" /> {numberWithCommas(item.stars || 0)}{' '}
34-
stars
35-
</p>
36-
<p>
37-
<VscRepoForked className="rowItemIcon" /> {numberWithCommas(item?.forks || 0)}{' '}
38-
forks
39-
</p>
17+
<div className={className}>
18+
<CardItemWithActions
19+
source={analyticsTag}
20+
index={index}
21+
item={item}
22+
key={index}
23+
cardItem={
24+
<>
25+
<FeedItemHeader
26+
item={item}
27+
fallbackImage={
28+
<div className="rowCover repo">
29+
<SiGithub size={40} />
30+
<p className="title">{item.title}</p>
31+
<p className="description">{item.description}</p>
32+
<div className="details">
33+
<p>
34+
<VscStarFull className="rowItemIcon" /> {numberWithCommas(item.stars || 0)}{' '}
35+
stars
36+
</p>
37+
<p>
38+
<VscRepoForked className="rowItemIcon" /> {numberWithCommas(item?.forks || 0)}{' '}
39+
forks
40+
</p>
41+
</div>
4042
</div>
41-
</div>
42-
}
43-
/>
43+
}
44+
/>
4445

45-
{listingMode === 'normal' && (
46-
<div className="rowDetails">
47-
<span className="rowItem verticalAligned">
48-
<SiGithub className="blockHeaderWhite" /> Github
49-
</span>
50-
{item.stars && (
46+
{listingMode === 'normal' && (
47+
<div className="rowDetails">
48+
<span className="rowItem verticalAligned">
49+
<SiGithub className="blockHeaderWhite" /> Github
50+
</span>
51+
{item.stars && (
52+
<span className="rowItem">
53+
<VscStarFull className="rowItemIcon" /> {numberWithCommas(item.stars || 0)}{' '}
54+
stars
55+
</span>
56+
)}
57+
<span className="rowItem">
58+
<VscRepoForked className="rowItemIcon" /> {numberWithCommas(item?.forks || 0)}{' '}
59+
forks
60+
</span>
5161
<span className="rowItem">
52-
<VscStarFull className="rowItemIcon" /> {numberWithCommas(item.stars || 0)} stars
62+
<ColoredLanguagesBadge languages={item.tags} />
5363
</span>
54-
)}
55-
<span className="rowItem">
56-
<VscRepoForked className="rowItemIcon" /> {numberWithCommas(item?.forks || 0)} forks
57-
</span>
58-
<span className="rowItem">
59-
<ColoredLanguagesBadge languages={item.tags} />
60-
</span>
61-
</div>
62-
)}
63-
</>
64-
}
65-
/>
64+
</div>
65+
)}
66+
</>
67+
}
68+
/>
69+
</div>
6670
)
6771
}

‎src/types/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,7 @@ export type BaseItemPropsType<
134134
> = {
135135
index: number
136136
item: T
137+
className?: string
137138
analyticsTag: string
138139
selectedTag?: SelectedTag
139140
}

0 commit comments

Comments
 (0)