feat: add ArticleFeedItem and ProductFeedItem components to enhance feed item rendering

Author: medyo

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

@@ -0,0 +1,43 @@
+import { GoDotFill } from 'react-icons/go'
+import { MdAccessTime } from 'react-icons/md'
+import { CardItemWithActions } from 'src/components/Elements'
+import { useUserPreferences } from 'src/stores/preferences'
+import { ArticleFeedItemData, BaseItemPropsType } from 'src/types'
+import { format } from 'timeago.js'
+import { FeedItemHeader } from '../FeedItemHeader'
+
+export const ArticleFeedItem = (props: BaseItemPropsType<ArticleFeedItemData>) => {
+  const { item, index, analyticsTag } = props
+  const { listingMode } = useUserPreferences()
+
+  return (
+    <CardItemWithActions
+      source={analyticsTag}
+      index={index}
+      item={item}
+      key={index}
+      cardItem={
+        <>
+          <FeedItemHeader item={item} />
+          {listingMode === 'compact' && (
+            <div className="rowDetails">
+              <span className="rowItem capitalize">
+                <GoDotFill className="rowItemIcon" /> {item.source}
+              </span>
+            </div>
+          )}
+          {listingMode === 'normal' && (
+            <div className="rowDetails">
+              <span className="rowItem capitalize">
+                <GoDotFill className="rowItemIcon" /> {item.source}
+              </span>
+              <span className="rowItem" title={new Date(item.date).toUTCString()}>
+                <MdAccessTime className="rowItemIcon" /> {format(new Date(item.date))}
+              </span>
+            </div>
+          )}
+        </>
+      }
+    />
+  )
+}

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

@@ -0,0 +1,22 @@
+import { BaseItemPropsType, FeedItemData } from 'src/types'
+import { ArticleFeedItem } from './ArticleFeedItem'
+import { ProductFeedItem } from './ProductFeedItem'
+import { RepoFeedItem } from './RepoFeedItem'
+
+export const FeedItem = (props: BaseItemPropsType<FeedItemData>) => {
+  const { item, index, analyticsTag } = props
+
+  if (item.type === 'repo') {
+    return <RepoFeedItem item={item} index={index} analyticsTag={analyticsTag} />
+  }
+
+  if (item.type === 'producthunt') {
+    return <ProductFeedItem item={item} index={index} analyticsTag={analyticsTag} />
+  }
+
+  if (item.type === 'post') {
+    return <ArticleFeedItem item={item} index={index} analyticsTag={analyticsTag} />
+  }
+
+  return null
+}

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

@@ -0,0 +1,41 @@
+import { GoDotFill } from 'react-icons/go'
+import { CardItemWithActions } from 'src/components/Elements'
+import { useUserPreferences } from 'src/stores/preferences'
+import { BaseItemPropsType, ProductHuntFeedItemData } from 'src/types'
+import { FeedItemHeader } from '../FeedItemHeader'
+
+export const ProductFeedItem = (props: BaseItemPropsType<ProductHuntFeedItemData>) => {
+  const { item, index, analyticsTag } = props
+  const { listingMode } = useUserPreferences()
+
+  return (
+    <CardItemWithActions
+      source={analyticsTag}
+      index={index}
+      item={item}
+      key={index}
+      cardItem={
+        <>
+          <FeedItemHeader item={item} />
+          <div className="rowDetails">
+            <span className="rowItem">{item.tagline}</span>
+          </div>
+          {listingMode === 'compact' && (
+            <div className="rowDetails">
+              <span className="rowItem capitalize">
+                <GoDotFill className="rowItemIcon" /> Product Hunt
+              </span>
+            </div>
+          )}
+          {listingMode === 'normal' && (
+            <div className="rowDetails">
+              <span className="rowItem capitalize">
+                <GoDotFill className="rowItemIcon" /> Product Hunt
+              </span>
+            </div>
+          )}
+        </>
+      }
+    />
+  )
+}

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

@@ -2,14 +2,14 @@ import { SiGithub } from 'react-icons/si'
 import { VscRepoForked, VscStarFull } from 'react-icons/vsc'
 import { CardItemWithActions, ColoredLanguagesBadge } from 'src/components/Elements'
 import { useUserPreferences } from 'src/stores/preferences'
-import { BaseItemPropsType, FeedItem as FeedItemType } from 'src/types'
+import { BaseItemPropsType, GithubFeedItemData } from 'src/types'
 import { FeedItemHeader } from '../FeedItemHeader'
 
 function numberWithCommas(x: number | string) {
   return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 }
 
-export const RepoFeedItem = (props: BaseItemPropsType<FeedItemType>) => {
+export const RepoFeedItem = (props: BaseItemPropsType<GithubFeedItemData>) => {
   const { item, index, analyticsTag } = props
   const { listingMode } = useUserPreferences()
 

src/types/index.ts

@@ -50,17 +50,37 @@ export type Article = BaseEntry & {
   flair_text_color?: string
 }
 
-export type FeedItem = BaseEntry & {
+export type FeedItem = {
+  title: string
+  id: string
+  url: string
   date: Date
   image: string
-  type: 'post' | 'github'
+  tags: Array<string>
+}
+
+export type ArticleFeedItemData = FeedItem & {
+  type: 'post'
   source: string
-  stars?: number
-  forks?: number
+}
+
+export type ProductHuntFeedItemData = FeedItem & {
+  type: 'producthunt'
+  tagline: string
+  votes: number
+  comments: number
+}
+
+export type GithubFeedItemData = FeedItem & {
+  type: 'repo'
+  stars: number
+  forks: number
+  programmingLanguage: string
   description?: string
-  tags: Array<string>
 }
 
+export type FeedItemData = ArticleFeedItemData | GithubFeedItemData | ProductHuntFeedItemData
+
 export type Repository = BaseEntry & {
   programmingLanguage: string
   stars: number