Merge branch 'refactor/typescript-cards' of github.com:medyo/hackertab.dev into refactor/typescript-cards

Author: Chouikane

src/components/AppContentLayout.js

@@ -10,8 +10,7 @@ function MobileCards({ selectedCard }) {
     currentCard &&
     React.createElement(currentCard.component, {
       key: currentCard.value,
-      label: currentCard.label,
-      analyticsTag: currentCard.analyticsTag,
+      meta: currentCard,
       withAds: true,
     })
   )
@@ -22,9 +21,7 @@ function DesktopCards({ cards }) {
     const constantCard = SUPPORTED_CARDS.find((c) => c.value === card.name)
     return React.createElement(constantCard.component, {
       key: card.name,
-      label: constantCard.label,
-      icon: constantCard.icon,
-      analyticsTag: constantCard.analyticsTag,
+      meta: constantCard,
       withAds: index === 0,
     })
   })

src/components/Elements/Card/Card.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { BsBoxArrowInUpRight } from 'react-icons/bs'
+import { ref } from 'src/config'
+import { useUserPreferences } from 'src/stores/preferences'
+import { SupportedCard } from 'src/config'
+
+type CardProps = {
+  children: React.ReactNode
+  card: SupportedCard
+  titleComponent?: React.ReactNode
+  fullBlock?: boolean
+}
+export const Card = ({
+  card: { link, icon, label },
+  titleComponent,
+  children,
+  fullBlock = false,
+}: CardProps) => {
+  const { openLinksNewTab } = useUserPreferences()
+
+  const handleHeaderLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault()
+    let url = `${link}?${ref}`
+    window.open(url, openLinksNewTab ? '_blank' : '_self')
+  }
+
+  return (
+    <div className={'block' + (fullBlock ? ' fullBlock' : '')}>
+      <div className="blockHeader">
+        <span className="blockHeaderIcon">{icon}</span> {titleComponent || label}{' '}
+        {link && (
+          <a className="blockHeaderLink" href={link} onClick={handleHeaderLinkClick}>
+            <BsBoxArrowInUpRight />
+          </a>
+        )}
+      </div>
+      <div className="blockContent scrollable">{children}</div>
+    </div>
+  )
+}

src/components/Elements/Card/index.ts

@@ -0,0 +1 @@
+export * from "./Card"

src/components/List/ListComponent.tsx

@@ -2,8 +2,9 @@ import { ReactNode } from 'react'
 import { Placeholder } from 'src/components/placeholders'
 import { ListComponentPropsType } from './types'
 import { CarbonAd } from 'src/features/carbonAds'
+import { BaseEntry } from 'src/types'
 
-export function ListComponent(props: ListComponentPropsType) {
+export function ListComponent<T extends BaseEntry>(props: ListComponentPropsType<T>) {
   const { items, isLoading, error, renderItem, withAds, placeholder = <Placeholder /> } = props
 
   if (error) {
@@ -14,20 +15,20 @@ export function ListComponent(props: ListComponentPropsType) {
     if (!items) {
       return
     }
-    
+
     return items.map((item, index) => {
       let content: ReactNode[] = [renderItem(item, index)]
-       if (withAds && index === 0) {
-         content.unshift(<CarbonAd key={'carbonAd0'} />)
-       }
+      if (withAds && index === 0) {
+        content.unshift(<CarbonAd key={'carbonAd0'} />)
+      }
       return content
     })
   }
 
   function Placeholders() {
     return (
       <>
-        {[...Array(5)].map((x, i) => (
+        {[...Array(7)].map((x, i) => (
           <span key={i}>{placeholder}</span>
         ))}
       </>

src/components/List/types.ts

@@ -1,10 +1,10 @@
 import React from 'react'
-import { ArticleType, ConferenceType, RepoType } from 'src/types'
+import { BaseEntry } from 'src/types'
 
-export type ListComponentPropsType = {
-  items: ArticleType[] | ConferenceType[] | RepoType[],
+export type ListComponentPropsType<T extends BaseEntry> = {
+  items: T[],
   isLoading: boolean,
-  renderItem: (item: any, index: number) => React.ReactNode,
+  renderItem: (item: T, index: number) => React.ReactNode,
   withAds: boolean,
   placeholder?: React.ReactNode,
   refresh?: boolean,

src/components/ListComponent.js

@@ -70,90 +70,102 @@ export const SUPPORTED_SEARCH_ENGINES = [
   },
 ]
 
-type SupportedCard = {
+export type SupportedCard = {
   value: string
   icon: React.ReactNode
   analyticsTag: string
   label: string
+  link: string
   component: React.FunctionComponent<CardPropsType>
 }
 export const SUPPORTED_CARDS: SupportedCard[] = [
   {
     value: 'github',
-    analyticsTag: 'repos',
+    analyticsTag: 'github',
     label: 'Github repositories',
     component: GithubCard,
     icon: <SiGithub className="blockHeaderWhite" />,
+    link: 'https://github.com/',
   },
   {
     value: 'hackernews',
     icon: <SiYcombinator color="#FB6720" />,
     analyticsTag: 'hackernews',
     label: 'Hackernews',
     component: HackernewsCard,
+    link: 'https://news.ycombinator.com/',
   },
   {
     value: 'conferences',
     icon: <HiTicket color="#4EC8AF" />,
     analyticsTag: 'events',
     label: 'Upcoming events',
     component: ConferencesCard,
+    link: 'https://confs.tech/',
   },
   {
     value: 'devto',
     icon: <FaDev className="blockHeaderWhite" />,
     analyticsTag: 'devto',
     label: 'DevTo',
     component: DevtoCard,
+    link: 'https://dev.to/',
   },
   {
     value: 'producthunt',
     icon: <SiProducthunt color="#D65736" />,
     analyticsTag: 'producthunt',
     label: 'Product Hunt',
     component: ProductHuntCard,
+    link: 'https://producthunt.com/',
   },
   {
     value: 'reddit',
     icon: <FaReddit color="#FF4500" />,
     analyticsTag: 'reddit',
     label: 'Reddit',
     component: RedditCard,
+    link: 'https://reddit.com/',
   },
   {
     value: 'lobsters',
     icon: <img alt="lobsters" src={LobstersIcon} />,
     analyticsTag: 'lobsters',
     label: 'Lobsters',
     component: LobstersCard,
+    link: 'https://lobste.rs/',
   },
   {
     value: 'hashnode',
     icon: <img alt="hn" src={HashNodeIcon} />,
     analyticsTag: 'hashnode',
     label: 'Hashnode',
     component: HashnodeCard,
+    link: 'https://hashnode.com/',
   },
   {
     value: 'freecodecamp',
     icon: <FaFreeCodeCamp className="blockHeaderWhite" />,
     analyticsTag: 'freecodecamp',
     label: 'FreeCodeCamp',
     component: FreecodecampCard,
+    link: 'https://freecodecamp.com/news',
   },
   {
     value: 'indiehackers',
     icon: <CgIndieHackers className="blockHeaderWhite" />,
     analyticsTag: 'indiehackers',
     label: 'IndieHackers',
     component: IndiehackersCard,
+    link: 'https://indiehackers.com/',
   },
   {
     value: 'medium',
     icon: <FaMediumM />,
     analyticsTag: 'medium',
     label: 'Medium',
     component: MediumCard,
+    link: 'https://medium.com/',
   },
 ]
 

src/config/index.tsx

@@ -1,14 +1,12 @@
-import CardComponent from 'src/components/CardComponent'
+import { Card } from 'src/components/Elements/Card'
 import { ListComponent } from 'src/components/List'
 import { useGetConferences } from '../api/getConferences'
 import { ConferenceType, CardPropsType } from 'src/types'
 import { useUserPreferences } from 'src/stores/preferences'
 import { getCardTagsValue } from 'src/utils/DataEnhancement'
 import ConferenceItem from './ConferenceItem'
 
-
-export function ConferencesCard(props: CardPropsType) {
-  const { label, icon, withAds } = props
+export function ConferencesCard({ meta, withAds }: CardPropsType) {
   const { userSelectedTags, listingMode } = useUserPreferences()
 
   const results = useGetConferences({ tags: getCardTagsValue(userSelectedTags, 'devtoValues') })
@@ -25,25 +23,17 @@ export function ConferencesCard(props: CardPropsType) {
   }
 
   const renderItem = (item: ConferenceType, index: number) => (
-    <ConferenceItem
-      item={item}
-      key={`cf-${index}`}
-      index={index}
-      listingMode={listingMode}
-    />
+    <ConferenceItem item={item} key={`cf-${index}`} index={index} listingMode={listingMode} />
   )
 
   return (
-    <CardComponent
-      icon={<span className="blockHeaderIcon">{icon}</span>}
-      link="https://confs.tech/"
-      title={label}>
+    <Card card={meta}>
       <ListComponent
         items={getData()}
         isLoading={isLoading}
         renderItem={renderItem}
         withAds={withAds}
       />
-    </CardComponent>
+    </Card>
   )
 }

src/features/conferencesCard/components/ConferencesCard.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import CardComponent from 'src/components/CardComponent'
+import { Card } from 'src/components/Elements/Card'
 import { ListComponent } from 'src/components/List'
 import { useGetArticles } from '../api/getArticles'
 import { ArticleType, CardPropsType } from 'src/types'
@@ -13,16 +13,15 @@ import SelectableCard from 'src/components/SelectableCard'
 
 const DT_MENU_LANGUAGE_ID = 'DT_MENU_LANGUAGE_ID'
 
-export function DevtoCard(props: CardPropsType) {
-  const { label, icon, withAds } = props
+export function DevtoCard({ withAds, meta }: CardPropsType) {
   const { userSelectedTags, cardsSettings, setCardSettings, listingMode } = useUserPreferences()
   const [selectedTag, setSelectedTag] = useState<Tag>()
 
   useEffect(() => {
     if (selectedTag) {
-      setCardSettings(label.toLowerCase(), { language: selectedTag.label })
+      setCardSettings(meta.label.toLowerCase(), { language: selectedTag.label })
     }
-  }, [selectedTag])
+  }, [selectedTag, meta, setCardSettings])
 
   const getQueryTags = () => {
     if (!selectedTag) {
@@ -61,15 +60,15 @@ export function DevtoCard(props: CardPropsType) {
   const HeaderTitle = () => {
     return (
       <div style={{ display: 'inline-block', margin: 0, padding: 0 }}>
-        <span> DevTo </span>
+        <span> {meta.label} </span>
         <SelectableCard
           isLanguage={true}
           tagId={DT_MENU_LANGUAGE_ID}
           selectedTag={selectedTag}
           setSelectedTag={setSelectedTag}
           fallbackTag={GLOBAL_TAG}
           cardSettings={cardsSettings?.devto?.language}
-          trackEvent={(tag: Tag) => trackCardLanguageSelect('Devto', tag.value)}
+          trackEvent={(tag: Tag) => trackCardLanguageSelect(meta.analyticsTag, tag.value)}
           data={userSelectedTags.map((tag) => ({
             label: tag.label,
             value: tag.value,
@@ -80,16 +79,13 @@ export function DevtoCard(props: CardPropsType) {
   }
 
   return (
-    <CardComponent
-      icon={<span className="blockHeaderIcon">{icon}</span>}
-      link="https://dev.to/"
-      title={<HeaderTitle />}>
+    <Card card={meta} titleComponent={<HeaderTitle />}>
       <ListComponent
         items={getData()}
         isLoading={getIsLoading()}
         renderItem={renderItem}
         withAds={withAds}
       />
-    </CardComponent>
+    </Card>
   )
 }