initial commit

Author: Chouikane

package.json

@@ -16,6 +16,7 @@
     "country-emoji": "^1.5.4",
     "dompurify": "^2.2.7",
     "eslint-plugin-react": "^7.28.0",
+    "htmlparser2": "^8.0.1",
     "jsonpath": "^1.1.1",
     "localforage": "^1.9.0",
     "normalize.css": "^8.0.1",
@@ -35,6 +36,7 @@
     "react-spring-bottom-sheet": "^3.4.1",
     "react-toggle": "^4.1.1",
     "react-tooltip": "^4.2.21",
+    "rss-to-json": "^2.1.1",
     "styled-components": "2",
     "timeago.js": "^4.0.2",
     "type-fest": "^1.2.0",

src/App.js

@@ -30,6 +30,7 @@ function App() {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [onboardingCompleted, firstSeenDate])
+  const [showRSSInput, setShowRSSInput] = useState(false)
 
   useEffect(() => {
     setupAnalytics()
@@ -55,6 +56,8 @@ function App() {
           showSideBar={showSideBar}
           showSettings={showSettings}
           setShowSettings={setShowSettings}
+          showRSSInput={showRSSInput}
+          setShowRSSInput={setShowRSSInput}
         />
         <ScrollCardsNavigator />
         <AppContentLayout setShowSettings={setShowSettings} />

src/components/Elements/Card/Card.tsx

@@ -2,11 +2,11 @@ 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'
+import { SupportedCardType } from 'src/types'
 
 type CardProps = {
   children: React.ReactNode
-  card: SupportedCard
+  card: SupportedCardType
   titleComponent?: React.ReactNode
   fullBlock?: boolean
 }

src/components/Elements/FloatingFilter/FloatingFilter.tsx

@@ -3,12 +3,13 @@ import { FiFilter } from 'react-icons/fi'
 import { BottomSheet } from 'react-spring-bottom-sheet'
 import 'react-spring-bottom-sheet/dist/style.css'
 import { ChipsSet } from 'src/components/Elements'
-import { dateRanges, GLOBAL_TAG, MY_LANGUAGES_TAG, SupportedCard } from 'src/config'
+import { dateRanges, GLOBAL_TAG, MY_LANGUAGES_TAG } from 'src/config'
 import { trackCardDateRangeSelect, trackCardLanguageSelect } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
+import { SupportedCardType } from 'src/types'
 
 type ListingFilterMobileProps = {
-  card: SupportedCard
+  card: SupportedCardType
   filters?: ('datesRange' | 'language')[]
 }
 

src/components/Layout/AppContentLayout.tsx

@@ -1,22 +1,26 @@
 import { useState } from 'react'
-import { BottomNavigation } from '../Elements'
 import { isDesktop } from 'react-device-detect'
 import { useUserPreferences } from 'src/stores/preferences'
-import { MobileCards } from './MobileCards'
+import { BottomNavigation } from '../Elements'
 import { DesktopCards } from './DesktopCards'
+import { MobileCards } from './MobileCards'
 
 export const AppContentLayout = ({
   setShowSettings,
 }: {
   setShowSettings: (value: boolean | ((prevVar: boolean) => boolean)) => void
 }) => {
-  const { cards } = useUserPreferences()
+  const { cards, userCustomCards } = useUserPreferences()
   const [selectedCard, setSelectedCard] = useState(cards[0])
 
   return (
     <>
       <main className="AppContent HorizontalScroll">
-        {isDesktop ? <DesktopCards cards={cards} /> : <MobileCards selectedCard={selectedCard} />}
+        {isDesktop ? (
+          <DesktopCards cards={cards} userCustomCards={userCustomCards} />
+        ) : (
+          <MobileCards selectedCard={selectedCard} />
+        )}
       </main>
 
       <BottomNavigation

src/components/Layout/DesktopCards.tsx

@@ -1,17 +1,25 @@
 import React from 'react'
 import { SUPPORTED_CARDS } from 'src/config'
-import { SelectedCard } from 'src/types'
+import { CustomRssCard } from 'src/features/cards'
+import { SelectedCard, SupportedCardType } from 'src/types'
 
-export const DesktopCards = ({ cards }: { cards: SelectedCard[] }) => {
+export const DesktopCards = ({
+  cards,
+  userCustomCards,
+}: {
+  cards: SelectedCard[]
+  userCustomCards: SupportedCardType[]
+}) => {
+  const AVAILABLE_CARDS = [...SUPPORTED_CARDS, ...userCustomCards]
   return (
     <>
       {cards.map((card, index) => {
-        const constantCard = SUPPORTED_CARDS.find((c) => c.value === card.name)
+        const constantCard = AVAILABLE_CARDS.find((c) => c.value === card.name)
         if (!constantCard) {
           return null
         }
 
-        return React.createElement(constantCard.component, {
+        return React.createElement(constantCard?.component || CustomRssCard, {
           key: card.name,
           meta: constantCard,
           withAds: index === 0,

src/components/Layout/Header.tsx

@@ -1,30 +1,33 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { BsFillGearFill } from 'react-icons/bs'
+import { useEffect, useRef, useState } from 'react'
+import { BsFillBookmarksFill, BsFillGearFill, BsMoon } from 'react-icons/bs'
 import { CgTab } from 'react-icons/cg'
-import { BsFillBookmarksFill } from 'react-icons/bs'
+import { IoMdSunny } from 'react-icons/io'
 import { ReactComponent as HackertabLogo } from 'src/assets/logo.svg'
+import { SearchBar } from 'src/components/Elements/SearchBar'
 import { UserTags } from 'src/components/Elements/UserTags'
-import { SettingsModal } from 'src/features/settings'
-import { BsMoon } from 'react-icons/bs'
-import { IoMdSunny } from 'react-icons/io'
 import { Changelog } from 'src/features/changelog'
-import { SearchBar } from 'src/components/Elements/SearchBar'
-import { useUserPreferences } from 'src/stores/preferences'
+import { RSSInputModal } from 'src/features/rssFeed'
+import { SettingsModal } from 'src/features/settings'
+import { identifyUserTheme, trackThemeSelect } from 'src/lib/analytics'
 import { useBookmarks } from 'src/stores/bookmarks'
-import { trackThemeSelect, identifyUserTheme } from 'src/lib/analytics'
+import { useUserPreferences } from 'src/stores/preferences'
 
 type HeaderProps = {
   showSideBar: boolean
   setShowSideBar: (show: boolean) => void
   showSettings: boolean
   setShowSettings: (show: boolean) => void
+  showRSSInput: boolean
+  setShowRSSInput: (show: boolean) => void
 }
 
 export const Header = ({
   showSideBar,
   setShowSideBar,
   showSettings,
   setShowSettings,
+  showRSSInput,
+  setShowRSSInput,
 }: HeaderProps) => {
   const [themeIcon, setThemeIcon] = useState(<BsMoon />)
   const isFirstRun = useRef(true)
@@ -75,9 +78,13 @@ export const Header = ({
     ) : null
   }
 
+  const onAddSourceClick = () => {
+    setShowRSSInput(true)
+  }
   return (
     <>
       <SettingsModal showSettings={showSettings} setShowSettings={setShowSettings} />
+      <RSSInputModal showRSSInput={showRSSInput} setShowRSSInput={setShowRSSInput} />
 
       <header className="AppHeader">
         <span className="AppName">
@@ -99,6 +106,9 @@ export const Header = ({
             <BsFillBookmarksFill />
             <BookmarksBadgeCount />
           </button>
+          <button className="extraBtn" onClick={onAddSourceClick}>
+            <BsFillGearFill />
+          </button>
         </div>
         <div className="break"></div>
         <UserTags onAddClicked={onSettingsClick} />

src/config/index.tsx

@@ -1,28 +1,23 @@
-import React from 'react'
-import { SiGithub } from 'react-icons/si'
-import { SiYcombinator } from 'react-icons/si'
-import { FaDev } from 'react-icons/fa'
-import { SiProducthunt } from 'react-icons/si'
-import { FaReddit, FaMediumM } from 'react-icons/fa'
+import { CgIndieHackers } from 'react-icons/cg'
+import { FaDev, FaFreeCodeCamp, FaMediumM, FaReddit } from 'react-icons/fa'
 import { HiTicket } from 'react-icons/hi'
+import { SiGithub, SiProducthunt, SiYcombinator } from 'react-icons/si'
 import HashNodeIcon from 'src/assets/icon_hashnode.png'
 import LobstersIcon from 'src/assets/icon_lobsters.png'
-import { FaFreeCodeCamp } from 'react-icons/fa'
-import { CgIndieHackers } from 'react-icons/cg'
 import {
-  HackernewsCard,
-  ProductHuntCard,
-  IndiehackersCard,
-  FreecodecampCard,
   ConferencesCard,
+  DevtoCard,
+  FreecodecampCard,
   GithubCard,
-  MediumCard,
+  HackernewsCard,
   HashnodeCard,
+  IndiehackersCard,
   LobstersCard,
-  DevtoCard,
-  RedditCard,
+  MediumCard,
+  ProductHuntCard,
+  RedditCard
 } from 'src/features/cards'
-import { CardPropsType } from 'src/types'
+import { SupportedCardType } from 'src/types'
 
 // Keys
 export const ANALYTICS_ENDPOINT = process.env.REACT_APP_AMPLITUDE_URL as string
@@ -71,23 +66,15 @@ export const SUPPORTED_SEARCH_ENGINES = [
     url: 'https://www.startpage.com/sp/search?query=',
   },
 ]
-
-export type SupportedCard = {
-  value: string
-  icon: React.ReactNode
-  analyticsTag: string
-  label: string
-  link: string
-  component: React.FunctionComponent<CardPropsType>
-}
-export const SUPPORTED_CARDS: SupportedCard[] = [
+export const SUPPORTED_CARDS: SupportedCardType[] = [
   {
     value: 'github',
     analyticsTag: 'github',
     label: 'Github repositories',
     component: GithubCard,
     icon: <SiGithub className="blockHeaderWhite" />,
     link: 'https://github.com/',
+    type: 'supported',
   },
   {
     value: 'hackernews',
@@ -96,6 +83,7 @@ export const SUPPORTED_CARDS: SupportedCard[] = [
     label: 'Hackernews',
     component: HackernewsCard,
     link: 'https://news.ycombinator.com/',
+    type: 'supported',
   },
   {
     value: 'conferences',
@@ -104,6 +92,7 @@ export const SUPPORTED_CARDS: SupportedCard[] = [
     label: 'Upcoming events',
     component: ConferencesCard,
     link: 'https://confs.tech/',
+    type: 'supported',
   },
   {
     value: 'devto',
@@ -112,6 +101,7 @@ export const SUPPORTED_CARDS: SupportedCard[] = [
     label: 'DevTo',
     component: DevtoCard,
     link: 'https://dev.to/',
+    type: 'supported',
   },
   {
     value: 'producthunt',
@@ -120,6 +110,7 @@ export const SUPPORTED_CARDS: SupportedCard[] = [
     label: 'Product Hunt',
     component: ProductHuntCard,
     link: 'https://producthunt.com/',
+    type: 'supported',
   },
   {
     value: 'reddit',
@@ -128,6 +119,7 @@ export const SUPPORTED_CARDS: SupportedCard[] = [
     label: 'Reddit',
     component: RedditCard,
     link: 'https://reddit.com/',
+    type: 'supported',
   },
   {
     value: 'lobsters',
@@ -136,6 +128,7 @@ export const SUPPORTED_CARDS: SupportedCard[] = [
     label: 'Lobsters',
     component: LobstersCard,
     link: 'https://lobste.rs/',
+    type: 'supported',
   },
   {
     value: 'hashnode',
@@ -144,6 +137,7 @@ export const SUPPORTED_CARDS: SupportedCard[] = [
     label: 'Hashnode',
     component: HashnodeCard,
     link: 'https://hashnode.com/',
+    type: 'supported',
   },
   {
     value: 'freecodecamp',
@@ -152,6 +146,7 @@ export const SUPPORTED_CARDS: SupportedCard[] = [
     label: 'FreeCodeCamp',
     component: FreecodecampCard,
     link: 'https://freecodecamp.com/news',
+    type: 'supported',
   },
   {
     value: 'indiehackers',
@@ -160,6 +155,7 @@ export const SUPPORTED_CARDS: SupportedCard[] = [
     label: 'IndieHackers',
     component: IndiehackersCard,
     link: 'https://indiehackers.com/',
+    type: 'supported',
   },
   {
     value: 'medium',
@@ -168,6 +164,7 @@ export const SUPPORTED_CARDS: SupportedCard[] = [
     label: 'Medium',
     component: MediumCard,
     link: 'https://medium.com/',
+    type: 'supported',
   },
 ]
 

src/features/MarketingBanner/components/MarketingBanner.tsx

@@ -1,19 +1,19 @@
 import DOMPurify from 'dompurify'
-import { useMarketingConfigStore } from '../stores/marketingBanner'
-import { useUserPreferences } from 'src/stores/preferences'
-import { getAppVersion } from 'src/utils/Os'
-import { isWebOrExtensionVersion, isProduction, getBrowserName } from 'src/utils/Environment'
-import { useMemo, useState, useEffect } from 'react'
-import { Campaign, MarketingConfig } from '../types'
-import { useGetMarketingConfig } from '../api/getMarketingConfig'
+import jsonPath from 'jsonpath'
+import { useEffect, useMemo, useState } from 'react'
+import { isMobile } from 'react-device-detect'
 import {
   trackMarketingCampaignClose,
-  trackMarketingCampaignView,
   trackMarketingCampaignOpen,
+  trackMarketingCampaignView,
 } from 'src/lib/analytics'
+import { useUserPreferences } from 'src/stores/preferences'
 import { diffBetweenTwoDatesInDays } from 'src/utils/DateUtils'
-import { isMobile } from 'react-device-detect'
-import jsonPath from 'jsonpath'
+import { getBrowserName, isProduction, isWebOrExtensionVersion } from 'src/utils/Environment'
+import { getAppVersion } from 'src/utils/Os'
+import { useGetMarketingConfig } from '../api/getMarketingConfig'
+import { useMarketingConfigStore } from '../stores/marketingBanner'
+import { Campaign, MarketingConfig } from '../types'
 
 export const MarketingBanner = () => {
   const { setCampaignClosed, closedCampaigns } = useMarketingConfigStore()
@@ -79,7 +79,6 @@ export const MarketingBanner = () => {
 
       return availableCampaigns
     } catch (e) {
-      console.log('getAvailableCampaigns', e)
       return []
     }
   }