feat: enhance Feed component to include ad items and update FeedItemData type

Author: medyo

src/features/feed/components/Feed.tsx

@@ -3,8 +3,8 @@ import { PropagateLoader } from 'react-spinners'
 import { useGetFeed } from 'src/features/cards'
 import { trackFeedScroll } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
+import { FeedItemData } from 'src/types'
 import './feed.css'
-import { AdvFeedItem } from './feedItems/AdvFeedItem'
 import { FeedItem } from './feedItems/FeedItem'
 
 export const Feed = () => {
@@ -20,9 +20,31 @@ export const Feed = () => {
     fetchNextPage,
   } = useGetFeed({
     tags: userSelectedTags.map((tag) => tag.label.toLocaleLowerCase()),
+    config: {
+      select: (data) => {
+        return {
+          ...data,
+          pages: data.pages.map((page, pageIndex) => {
+            const items = page.data
+            const result: FeedItemData[] = []
+            items.forEach((item, index) => {
+              result.push(item)
+              if (pageIndex == 0 && index === 2) {
+                result.push({ type: 'ad', id: `ad-${pageIndex}-${index}` })
+              }
+            })
+
+            return {
+              ...page,
+              data: result,
+            }
+          }),
+        }
+      },
+    },
   })
 
-  const [infiniteRef, {rootRef}] = useInfiniteScroll({
+  const [infiniteRef, { rootRef }] = useInfiniteScroll({
     loading: isLoading,
     hasNextPage: Boolean(hasNextPage),
     onLoadMore: () => {
@@ -51,10 +73,6 @@ export const Feed = () => {
 
   return (
     <div ref={rootRef} className="feed scrollable" style={{ overflow: 'auto', maxHeight: '100%' }}>
-      
-      <div key={`adv`} className="feedItem">
-        <AdvFeedItem />
-      </div>
       {(feed?.pages.flatMap((page) => page.data) || []).map((article, index) => {
         return (
           <div key={article.id} className="feedItem">

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

@@ -1,4 +1,5 @@
 import { BaseItemPropsType, FeedItemData } from 'src/types'
+import { AdvFeedItem } from './AdvFeedItem'
 import { ArticleFeedItem } from './ArticleFeedItem'
 import { ProductFeedItem } from './ProductFeedItem'
 import { RepoFeedItem } from './RepoFeedItem'
@@ -18,5 +19,9 @@ export const FeedItem = (props: BaseItemPropsType<FeedItemData>) => {
     return <ArticleFeedItem item={item} index={index} analyticsTag={analyticsTag} />
   }
 
+  if (item.type === 'ad') {
+    return <AdvFeedItem />
+  }
+
   return null
 }

src/types/index.ts

@@ -79,7 +79,16 @@ export type GithubFeedItemData = FeedItem & {
   description?: string
 }
 
-export type FeedItemData = ArticleFeedItemData | GithubFeedItemData | ProductHuntFeedItemData
+export type AdFeedItemData = {
+  id: string
+  type: 'ad'
+}
+
+export type FeedItemData =
+  | ArticleFeedItemData
+  | GithubFeedItemData
+  | ProductHuntFeedItemData
+  | AdFeedItemData
 
 export type Repository = BaseEntry & {
   programmingLanguage: string
@@ -118,7 +127,11 @@ export type CardPropsType = {
   withAds: boolean
 }
 
-export type BaseItemPropsType<T extends BaseEntry> = {
+export type BaseItemPropsType<
+  T extends {
+    id: string
+  }
+> = {
   index: number
   item: T
   analyticsTag: string