add rss card icon

Author: Chouikane

src/features/cards/api/getRssFeed.tsx

@@ -4,11 +4,21 @@ import { axios } from 'src/lib/axios'
 import { ExtractFnReturnType, QueryConfig } from 'src/lib/react-query'
 import { Article } from 'src/types'
 
+type RssInfoType = {
+  title: string
+  link: string
+  icon?: string
+}
+
+export const getRssUrlFeed = async (rssUrl: string): Promise<RssInfoType> => {
+  return axios.get('/engine/rss_info/', { params: { url: rssUrl } })
+}
+
 const getArticles = async (feedUrl: string): Promise<Article[]> => {
   const res: string = await axios.get(`/engine/remote_feed?feedUrl=${feedUrl}`)
   try {
     const feed = htmlparser2.parseFeed(res)
-    return feed?.items.map((item) => {
+    return feed?.items?.map((item) => {
       return {
         id: item.id,
         title: item.title,
@@ -17,9 +27,7 @@ const getArticles = async (feedUrl: string): Promise<Article[]> => {
         source: 'customFeed',
       }
     }) as Article[]
-  } catch (err) {
-    console.log(666, err)
-  }
+  } catch (err) {}
   return []
 }
 

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

@@ -0,0 +1,8 @@
+import { BsRssFill } from 'react-icons/bs'
+
+const CardIcon = (props: { url?: string }) => {
+  const { url } = props
+  return url ? <img src={url} alt="" /> : <BsRssFill />
+}
+
+export default CardIcon

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

@@ -1,9 +1,9 @@
-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'
 import { useRssFeed } from '../../api/getRssFeed'
 import ArticleItem from './ArticleItem'
+import CardIcon from './CardIcon'
 
 export function CustomRssCard({ meta, withAds }: CardPropsType) {
   const { data = [], isLoading } = useRssFeed({ feedUrl: meta.feedUrl || '' })
@@ -21,7 +21,9 @@ export function CustomRssCard({ meta, withAds }: CardPropsType) {
   }
 
   return (
-    <Card card={{ ...meta, icon: <BsRssFill /> }} titleComponent={<HeaderTitle />}>
+    <Card
+      card={{ ...meta, icon: <CardIcon url={meta.icon as string} /> }}
+      titleComponent={<HeaderTitle />}>
       <FloatingFilter card={meta} filters={['language']} />
       <ListComponent items={data} isLoading={isLoading} renderItem={renderItem} withAds={withAds} />
     </Card>

src/features/rssFeed/api/getRssFeed.tsx

@@ -6,8 +6,8 @@ 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 { getRssUrlFeed } from 'src/features/cards/api/getRssFeed'
 import { Tag, useRemoteConfigStore } from 'src/features/remoteConfig'
-import { getRssUrlFeed } from 'src/features/rssFeed/api/getRssFeed'
 import {
   identifyUserCards,
   identifyUserLanguages,
@@ -152,27 +152,27 @@ export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalPr
     }
 
     // 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 value = info.title.toLowerCase()
+      const exists = userCustomCards.find((card) => card.link === info.link)
+      if (exists) {
+        throw Error('RSS Feed already exists', { cause: 'EXISTS' })
+      }
+
       let customCard: SupportedCardType = {
         feedUrl: rssUrl.replace('https:', 'http:'),
         label: info.title,
-        value: info.title.toLowerCase(),
-        analyticsTag: info.title.toLowerCase(),
+        value,
+        analyticsTag: value,
         link: info.link,
         type: 'rss',
-        // icon: <BsFillRssFill className="blockHeaderWhite" />,
+        icon: info.icon,
       }
-      // add card to userCustomCards and selected cards
       setUserCustomCards([...userCustomCards, customCard])
       const newCards = [
         ...cards,
@@ -183,8 +183,10 @@ export const SettingsModal = ({ showSettings, setShowSettings }: SettingsModalPr
       identifyUserCards(newCards.map((card) => card.name))
       trackRssSourceAdd(customCard.value)
       setRssUrl('')
-    } catch (err) {
-      setRssInputError('rssInputError occured. Please check and try again.')
+    } catch (err: any) {
+      setRssInputError(
+        err?.cause === 'EXISTS' ? err?.message : 'Error occured. Please check and try again.'
+      )
     } finally {
       setIsRssInputLoading(false)
     }

src/features/settings/components/SettingsModal.tsx

@@ -83,7 +83,7 @@ export type SupportedCardType = {
   type: 'rss' | 'supported'
   component?: React.FunctionComponent<CardPropsType>
   feedUrl?: string
-  icon?: React.ReactNode
+  icon?: React.ReactNode | string
 }
 
 export type CardPropsType = {