feat: add HackernoonCard component and associated ArticleItem with icon

Author: medyo

src/assets/icon_hackernoon.jpeg

@@ -2,6 +2,7 @@ import { CgIndieHackers } from 'react-icons/cg'
 import { FaDev, FaFreeCodeCamp, FaMediumM, FaReddit } from 'react-icons/fa'
 import { HiSparkles, HiTicket } from 'react-icons/hi'
 import { SiGithub, SiProducthunt, SiYcombinator } from 'react-icons/si'
+import HackernoonIcon from 'src/assets/icon_hackernoon.jpeg'
 import HashNodeIcon from 'src/assets/icon_hashnode.png'
 import LobstersIcon from 'src/assets/icon_lobsters.png'
 import { AICard } from 'src/features/cards/components/aiCard'
@@ -18,6 +19,7 @@ const { IndiehackersCard } = lazyImport(() => import('src/features/cards'), 'Ind
 const { LobstersCard } = lazyImport(() => import('src/features/cards'), 'LobstersCard')
 const { ProductHuntCard } = lazyImport(() => import('src/features/cards'), 'ProductHuntCard')
 const { RedditCard } = lazyImport(() => import('src/features/cards'), 'RedditCard')
+const { HackernoonCard } = lazyImport(() => import('src/features/cards'), 'HackernoonCard')
 
 export const SUPPORTED_CARDS: SupportedCardType[] = [
   {
@@ -128,4 +130,13 @@ export const SUPPORTED_CARDS: SupportedCardType[] = [
     type: 'supported',
     link: 'https://hackertab.dev/',
   },
+  {
+    value: 'hackernoon',
+    analyticsTag: 'hackernoon',
+    label: 'Hackernoon',
+    component: HackernoonCard,
+    icon: <img alt="hackernoon" src={HackernoonIcon} />,
+    link: 'https://hackernoon.com/',
+    type: 'supported',
+  },
 ]

src/config/supportedCards.tsx

@@ -0,0 +1,47 @@
+import { MdAccessTime } from 'react-icons/md'
+import { CardItemWithActions, CardLink, ColoredLanguagesBadge } from 'src/components/Elements'
+import { Attributes } from 'src/lib/analytics'
+import { useUserPreferences } from 'src/stores/preferences'
+import { Article, BaseItemPropsType } from 'src/types'
+import { format } from 'timeago.js'
+
+const ArticleItem = (props: BaseItemPropsType<Article>) => {
+  const { item, selectedTag, analyticsTag } = props
+  const { listingMode } = useUserPreferences()
+  return (
+    <CardItemWithActions
+      source={analyticsTag}
+      item={item}
+      cardItem={
+        <>
+          <CardLink
+            link={item.url}
+            analyticsAttributes={{
+              [Attributes.TRIGERED_FROM]: 'card',
+              [Attributes.TITLE]: item.title,
+              [Attributes.LINK]: item.url,
+              [Attributes.SOURCE]: analyticsTag,
+              [Attributes.LANGUAGE]: selectedTag?.value,
+            }}>
+            <div className="subTitle">{item.title}</div>
+          </CardLink>
+          {listingMode === 'normal' && (
+            <>
+              <p className="rowDescription">
+                <span className="rowItem">
+                  <MdAccessTime className={'rowTitleIcon'} />
+                  {format(new Date(item.published_at))}
+                </span>
+              </p>
+              <p className="rowDetails">
+                <ColoredLanguagesBadge languages={item.tags.slice(0, 4)} />
+              </p>
+            </>
+          )}
+        </>
+      }
+    />
+  )
+}
+
+export default ArticleItem

src/features/cards/components/hackernoonCard/ArticleItem.tsx

@@ -0,0 +1,64 @@
+import { useCallback } from 'react'
+import { Card } from 'src/components/Elements'
+import { ListPostComponent } from 'src/components/List/ListPostComponent'
+import { Article, CardPropsType } from 'src/types'
+import { useGetSourceArticles } from '../../api/getSourceArticles'
+import { useLazyListLoad } from '../../hooks/useLazyListLoad'
+import { useSelectedTags } from '../../hooks/useSelectedTags'
+import { MemoizedCardHeader } from '../CardHeader'
+import { MemoizedCardSettings } from '../CardSettings'
+import ArticleItem from './ArticleItem'
+
+const GLOBAL_TAG = { label: 'Global', value: '' }
+
+export function HackernoonCard(props: CardPropsType) {
+  const { meta } = props
+  const { ref, isVisible } = useLazyListLoad()
+  const {
+    queryTags,
+    selectedTag,
+    cardSettings: { sortBy, language } = {},
+  } = useSelectedTags({
+    source: meta.value,
+    fallbackTag: GLOBAL_TAG,
+  })
+
+  const { data, isLoading } = useGetSourceArticles({
+    source: 'hackernoon',
+    tags: queryTags,
+    config: {
+      enabled: isVisible,
+    },
+  })
+
+  const renderItem = useCallback(
+    (item: Article) => <ArticleItem item={item} key={item.id} analyticsTag={meta.analyticsTag} />,
+    [meta.analyticsTag]
+  )
+
+  return (
+    <Card
+      ref={ref}
+      titleComponent={
+        <MemoizedCardHeader label={meta.label} fallbackTag={GLOBAL_TAG} selectedTag={selectedTag} />
+      }
+      settingsComponent={
+        <MemoizedCardSettings
+          url={meta.link}
+          id={meta.value}
+          globalTag={GLOBAL_TAG}
+          sortBy={sortBy}
+          language={language || GLOBAL_TAG.value}
+          showDateRangeFilter={false}
+        />
+      }
+      {...props}>
+      <ListPostComponent
+        sortBy={sortBy as keyof Article}
+        items={data}
+        isLoading={isLoading}
+        renderItem={renderItem}
+      />
+    </Card>
+  )
+}

src/features/cards/components/hackernoonCard/HackernoonCard.tsx

@@ -0,0 +1 @@
+export * from './HackernoonCard'

src/features/cards/components/hackernoonCard/index.ts

@@ -6,6 +6,7 @@ export * from './components/devtoCard'
 export * from './components/freecodecampCard'
 export * from './components/githubCard'
 export * from './components/hackernewsCard'
+export * from './components/hackernoonCard'
 export * from './components/hashnodeCard'
 export * from './components/indiehackersCard'
 export * from './components/lobstersCard'