refactor: simplify AdvFeedItem component by removing unused hooks and restructuring ad loading logic

Author: medyo

src/features/adv/types/index.ts

@@ -18,4 +18,10 @@ export type Ad = {
   backgroundColor?: string
   provider: AdProvider
   nextAd?: NextAdType
+
+  largeImage?: string
+  logo?: string
+  companyTagline?: string
+  callToAction?: string
+  company?: string
 }

src/features/feed/components/feedItems/AdvFeedItem.tsx

@@ -1,67 +1,39 @@
-import { GoDotFill } from 'react-icons/go'
-import { useGetAd } from 'src/features/adv'
-import { useUserPreferences } from 'src/stores/preferences'
+import clsx from 'clsx'
+import { useState } from 'react'
+import { RiAdvertisementFill } from 'react-icons/ri'
+import { Ad, AdvBanner } from 'src/features/adv'
+import { AdFeedItemData, BaseItemPropsType } from 'src/types'
 
-export const AdvFeedItem = () => {
-  const { userSelectedTags } = useUserPreferences()
-
-  const {
-    data: ad,
-    isLoading,
-    isError,
-  } = useGetAd({
-    keywords: userSelectedTags.map((tag) => tag.label.toLocaleLowerCase()),
-    aditionalAdQueries: undefined,
-    config: {
-      cacheTime: 0,
-      staleTime: 0,
-      useErrorBoundary: false,
-    },
-  })
-
-  if (isLoading) {
-    return (
-      <div className="placeholder">
-        <div className="image"></div>
-        <div className="line"></div>
-        <div className="smallLine"></div>
-      </div>
-    )
-  }
-
-  if (isError || !ad) {
-    return null
-  }
+export const AdvFeedItem = ({ className }: BaseItemPropsType<AdFeedItemData>) => {
+  const [adMeta, setAdMeta] = useState<Ad | null>()
 
   return (
-    <div className="blockRow">
-      <div className="rowTitle">
-        <a className="rowLink titleWithCover" href={ad.link}>
-          <div className="rowCover">
-            <img
-              src={ad.imageUrl}
-              alt={ad.title}
-              className=""
-              style={{ border: 0 }}
-              width={260}
-              height={200}
-            />
+    <div className={clsx('blockRow advFeed', className)}>
+      <AdvBanner
+        hideAttribution={true}
+        onAdLoaded={setAdMeta}
+        loadingState={
+          <div className="placeholder">
+            <div className="image"></div>
+            <div className="line"></div>
+            <div className="smallLine"></div>
           </div>
-
-          <span className="subTitle">{ad.description}</span>
-        </a>
-      </div>
-      <div className="rowDetails">
-        <span className="rowItem">
-          <a href={ad.provider.link} target="_blank" rel="noopener sponsored noreferrer">
-            <GoDotFill className="rowItemIcon" /> {ad.provider.title}
-          </a>
-        </span>
-      </div>
-      {ad.viewUrl &&
-        ad.viewUrl
-          .split('||')
-          .map((viewUrl, i) => <img key={i} src={viewUrl} className="hidden" alt="" />)}
+        }
+      />
+      {adMeta && (
+        <>
+          <div className="rowTitle">
+            <span className="subTitle">
+              {[adMeta.company, adMeta.companyTagline].filter(Boolean).join(' - ')}
+            </span>
+          </div>
+          <div className="rowDetails">
+            <span className="rowItem verticalAligned">
+              <RiAdvertisementFill color="orange" size={16} /> Powered by {adMeta.provider.title}
+            </span>
+          </div>
+        </>
+      )}
     </div>
   )
 }