add rss from settings modal

Author: Chouikane

src/components/Layout/MobileCards.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import { SUPPORTED_CARDS } from 'src/config'
+import { CustomRssCard } from 'src/features/cards'
 import { SelectedCard } from 'src/types'
 
 export const MobileCards = ({ selectedCard }: { selectedCard: SelectedCard }) => {
   const currentCard = SUPPORTED_CARDS.find((c) => c.value === selectedCard.name)
   return currentCard
-    ? React.createElement(currentCard.component, {
+    ? React.createElement(currentCard?.component || CustomRssCard, {
         key: currentCard.value,
         meta: currentCard,
         withAds: true,

src/features/cards/components/customRssCard/CustomRssCard.tsx

@@ -1,3 +1,4 @@
+import { BsRssFill } from 'react-icons/bs'
 import { Card, FloatingFilter } from 'src/components/Elements'
 import { ListComponent } from 'src/components/List'
 import { Article, CardPropsType } from 'src/types'
@@ -20,7 +21,7 @@ export function CustomRssCard({ meta, withAds }: CardPropsType) {
   }
 
   return (
-    <Card card={meta} titleComponent={<HeaderTitle />}>
+    <Card card={{ ...meta, icon: <BsRssFill /> }} titleComponent={<HeaderTitle />}>
       <FloatingFilter card={meta} filters={['language']} />
       <ListComponent items={data} isLoading={isLoading} renderItem={renderItem} withAds={withAds} />
     </Card>

src/features/settings/components/SettingsModal.tsx

@@ -2,10 +2,12 @@ import React, { useState } from 'react'
 import { VscClose } from 'react-icons/vsc'
 import ReactModal from 'react-modal'
 import Select, { ActionMeta, MultiValue, SingleValue } from 'react-select'
+import BeatLoader from 'react-spinners/BeatLoader'
 import Toggle from 'react-toggle'
 import 'react-toggle/style.css'
 import { SUPPORTED_CARDS, SUPPORTED_SEARCH_ENGINES, supportLink } from 'src/config'
 import { Tag, useRemoteConfigStore } from 'src/features/remoteConfig'
+import { getRssUrlFeed } from 'src/features/rssFeed/api/getRssFeed'
 import {
   identifyUserCards,
   identifyUserLanguages,
@@ -16,14 +18,17 @@ import {
   trackLanguageAdd,
   trackLanguageRemove,
   trackListingModeSelect,
+  trackRssSourceAdd,
+  trackRssSourceRemove,
   trackSearchEngineSelect,
   trackSourceAdd,
   trackSourceRemove,
   trackTabTarget,
   trackThemeSelect,
 } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
-import { SearchEngineType, SelectedCard } from 'src/types'
+import { SearchEngineType, SelectedCard, SupportedCardType } from 'src/types'
+import { isValidURL } from 'src/utils/UrlUtils'
 import './settings.css'
 
 type SettingsModalProps = {
@@ -53,9 +58,14 @@ export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalPr
     setCards,
     setTags,
     userCustomCards,
+    setUserCustomCards,
   } = useUserPreferences()
   const [selectedCards, setSelectedCards] = useState(cards)
 
+  const [rssUrl, setRssUrl] = useState('')
+  const [rssInputError, setRssInputError] = useState('')
+  const [isRssInputLoading, setIsRssInputLoading] = useState(false)
+
   const AVAILABLE_CARDS = [...SUPPORTED_CARDS, ...userCustomCards]
 
   const handleCloseModal = () => {
@@ -135,6 +145,64 @@ export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalPr
     identifyUserTheme(newTheme)
   }
 
+  const onRssAddClick = async () => {
+    if (!isValidURL(rssUrl)) {
+      setRssInputError('Invalid RSS Feed URL. Please check and try again.')
+      return
+    }
+
+    // check if card exists
+    const exists = userCustomCards.find((card) => card.feedUrl === rssUrl)
+    if (exists) {
+      setRssInputError('RSS Feed already exists')
+      return
+    }
+
+    setIsRssInputLoading(true)
+
+    // get rssUrl Info
+    try {
+      const info = await getRssUrlFeed(rssUrl)
+      let customCard: SupportedCardType = {
+        feedUrl: rssUrl.replace('https:', 'http:'),
+        label: info.title,
+        value: info.title.toLowerCase(),
+        analyticsTag: info.title.toLowerCase(),
+        link: info.link,
+        type: 'rss',
+        // icon: <BsFillRssFill className="blockHeaderWhite" />,
+      }
+      // add card to userCustomCards and selected cards
+      setUserCustomCards([...userCustomCards, customCard])
+      const newCards = [
+        ...cards,
+        { id: cards.length, name: customCard.value, type: customCard.type },
+      ]
+      setCards(newCards)
+      setSelectedCards(newCards)
+      identifyUserCards(newCards.map((card) => card.name))
+      trackRssSourceAdd(customCard.value)
+      setRssUrl('')
+    } catch (err) {
+      setRssInputError('rssInputError occured. Please check and try again.')
+    } finally {
+      setIsRssInputLoading(false)
+    }
+  }
+
+  const onRssSelectChange = (newCards: MultiValue<OptionType>, metas: ActionMeta<OptionType>) => {
+    if (metas.action === 'remove-value') {
+      setUserCustomCards(newCards as SupportedCardType[])
+      let newSelectedCards = cards.filter(
+        (c) => c.type !== 'rss' || c.name !== metas.removedValue.value
+      )
+      setSelectedCards(newSelectedCards)
+      setCards(newSelectedCards)
+      identifyUserCards(newSelectedCards.map((card) => card.name))
+      trackRssSourceRemove(metas.removedValue.value)
+    }
+  }
+
   return (
     <ReactModal
       isOpen={showSettings}
@@ -204,6 +272,40 @@ export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalPr
           </div>
         </div>
 
+        <div className="settingRow">
+          <p className="settingTitle">Add Custom Source</p>
+          <div className="settingContent">
+            <Select
+              menuIsOpen={false}
+              options={[]}
+              value={userCustomCards}
+              onChange={onRssSelectChange}
+              isMulti={true}
+              isClearable={false}
+              isSearchable={false}
+              classNamePrefix={'hackertab'}
+              className={'rss-sources'}
+            />
+            <div className="rssUrlControl">
+              <input
+                className="rssUrlInput"
+                value={rssUrl}
+                onChange={(e) => setRssUrl(e.target.value)}
+              />
+              {isRssInputLoading ? (
+                <BeatLoader color={'#A9B2BD'} loading={isRssInputLoading} size={6} />
+              ) : (
+                <button onClick={onRssAddClick}>ADD</button>
+              )}
+            </div>
+            {rssInputError && (
+              <div className="settingHint">
+                <p>{rssInputError}</p>
+              </div>
+            )}
+          </div>
+        </div>
+
         <div className="settingRow">
           <p className="settingTitle">Dark Mode</p>
           <div className="settingContent">

src/features/settings/components/settings.css

@@ -129,6 +129,23 @@ Select styles
   border-radius: 20px !important;
   color: var(--tag-secondary-color) !important;
 }
+.rss-sources .hackertab__indicators {
+  display: none;
+}
+
+.rssUrlControl {
+  margin: 6px 0;
+  color: var(--primary-text-color);
+}
+
+.rssUrlInput {
+  width: 66%;
+  margin-right: 4px;
+  padding: 4px;
+  background-color: var(--card-background-color) !important;
+  border-color: var(--tag-border-color) !important;
+  color: var(--primary-text-color)
+}
 
 @media (max-width: 768px) {
   .Modal {

src/lib/analytics.ts

@@ -19,6 +19,7 @@ enum Objects {
   CHANGE_LOG = 'Change Log',
   MARKETING_CAMPAIGN = 'Marketing Campaign',
   ONBOARDING = 'Onboarding',
+  CUSTOM_SOURCE = 'Custom Source',
 }
 
 enum Verbs {
@@ -301,6 +302,26 @@ export const identifyUserOccupation = (occupation: string) => {
   identifyUserProperty(Attributes.OCCUPATION, occupation)
 }
 
+// Custom RSS Sources
+
+export const trackRssSourceRemove = (source: string) => {
+  trackEvent({
+    object: Objects.CUSTOM_SOURCE,
+    verb: Verbs.REMOVE,
+    attributes: { [Attributes.SOURCE]: source },
+  })
+}
+
+export const trackRssSourceAdd = (source: string) => {
+  trackEvent({
+    object: Objects.CUSTOM_SOURCE,
+    verb: Verbs.ADD,
+    attributes: { [Attributes.SOURCE]: source },
+  })
+}
+
+
+
 // Private functions
 type trackEventProps = {
   object: Exclude<Objects, null | undefined>