Merge pull request #117 from medyo/fix/ads

Fix/ads

Author: Chouikane

src/components/List/ListComponent.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react'
 import { Placeholder } from 'src/components/placeholders'
 import { MAX_ITEMS_PER_CARD } from 'src/config'
-import { CarbonAd } from 'src/features/carbonAds'
+import { BannerAd } from 'src/features/ads'
 import { BaseEntry } from 'src/types'
 
 type PlaceholdersProps = {
@@ -52,7 +52,7 @@ export function ListComponent<T extends BaseEntry>(props: ListComponentPropsType
     return items.slice(0, limit).map((item, index) => {
       let content: ReactNode[] = [renderItem(item, index)]
       if (withAds && index === 0) {
-        content.unshift(<CarbonAd key={'carbonAd0'} />)
+        content.unshift(<BannerAd key={'BannerAd0'} />)
       }
       return content
     })

src/features/ads/api/getAd.ts

@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query'
+import { ExtractFnReturnType, QueryConfig } from 'src/lib/react-query'
+import { Ad } from '../types'
+import { axios } from 'src/lib/axios'
+
+const getAd = async (): Promise<Ad | null> => {
+  return axios.get('/engine/ads/')
+}
+
+type QueryFnType = typeof getAd
+
+type UseGetAdOptions = {
+  config?: QueryConfig<QueryFnType>
+}
+export const useGetAd = ({ config }: UseGetAdOptions = {}) => {
+  return useQuery<ExtractFnReturnType<QueryFnType>>({
+    ...config,
+    queryKey: ['ad'],
+    queryFn: () => getAd(),
+  })
+}

…atures/carbonAds/components/CarbonAd.css src/features/ads/components/BannerAd.csssrc/features/carbonAds/components/CarbonAd.css renamed to src/features/ads/components/BannerAd.css src/features/carbonAds/components/CarbonAd.css renamed to src/features/ads/components/BannerAd.css

@@ -1,49 +1,49 @@
-#carbonads * {
+#bannerads * {
     margin: initial;
     padding: initial;
   }
-  #carbonads {
+  #bannerads {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
       Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
       sans-serif;
   }
-  #carbonads {
+  #bannerads {
     display: flex;
     max-width: 330px;
     z-index: 100;
     margin: 0 auto
   }
-  #carbonads a {
+  #bannerads a {
     color: inherit;
     text-decoration: none;
   }
-  #carbonads a:hover {
+  #bannerads a:hover {
     color: inherit;
   }
-  #carbonads span {
+  #bannerads span {
     position: relative;
     display: block;
     overflow: hidden;
   }
-  #carbonads .carbon-wrap {
+  #bannerads .carbon-wrap {
     display: flex;
   }
-  #carbonads .carbon-img {
+  #bannerads .carbon-img {
     display: block;
     margin: 0;
     line-height: 1;
   }
-  #carbonads .carbon-img img {
+  #bannerads .carbon-img img {
     display: block;
   }
-  #carbonads .carbon-text {
+  #bannerads .carbon-text {
     font-size: 13px;
     padding: 10px;
     margin-bottom: 16px;
     line-height: 1.5;
     text-align: left;
   }
-  #carbonads .carbon-poweredby {
+  #bannerads .carbon-poweredby {
     display: block;
     padding: 6px 8px;
     background: inherit;

…atures/carbonAds/components/CarbonAd.tsx src/features/ads/components/BannerAd.tsxsrc/features/carbonAds/components/CarbonAd.tsx renamed to src/features/ads/components/BannerAd.tsx src/features/carbonAds/components/CarbonAd.tsx renamed to src/features/ads/components/BannerAd.tsx

@@ -1,38 +1,36 @@
-import './CarbonAd.css'
-import { addHttpsProtocol } from 'src/utils/UrlUtils'
+import './BannerAd.css'
 import { useGetAd } from '../api/getAd'
 
+export const BannerAd = () => {
+  const { data: ad, isError } = useGetAd()
 
-export const CarbonAd = () => {
-  const { data: ad } = useGetAd()
-
-  if (!ad || !ad.statlink) {
+  if (isError || !ad) {
     return null
   }
 
   return (
     <div className="carbon-ad-wrapper blockRow">
       {ad && (
-        <div id="carbonads">
+        <div id="bannerads">
           <span>
             <span className="carbon-wrap">
               <a
-                href={addHttpsProtocol(ad.statlink)}
+                href={ad.link}
                 className="carbon-img"
                 target="_blank"
                 rel="noopener sponsored noreferrer"
-                title={ad.company + ' ' + ad.companyTagline}>
+                title={ad.title}>
                 <img
-                  src={ad.smallImage}
-                  alt={ad.company}
+                  src={ad.imageUrl}
+                  alt={ad.title}
                   height="100"
                   width="130"
-                  style={{ background: ad.backgroundColor, border: 0 }}
+                  style={{ border: 0 }}
                 />
               </a>
 
               <a
-                href={addHttpsProtocol(ad.statlink)}
+                href={ad.link}
                 className="carbon-text"
                 target="_blank"
                 rel="noopener sponsored noreferrer">
@@ -41,11 +39,11 @@ export const CarbonAd = () => {
             </span>
 
             <a
-              href={ad.ad_via_link}
+              href={ad.provider.link}
               className="carbon-poweredby"
               target="_blank"
               rel="noopener sponsored noreferrer">
-              ads via Carbon
+              {ad.provider.title}
             </a>
           </span>
         </div>

src/features/ads/index.ts

@@ -0,0 +1 @@
+export * from "./components/BannerAd";

src/features/ads/types/index.ts

@@ -0,0 +1,14 @@
+type AdProvider = {
+  name: string,
+  title: string,
+  link?: string,
+}
+
+export type Ad = {
+  title?: string,
+  description: string,
+  imageUrl: string,
+  link: string,
+  backgroundColor?: string,
+  provider: AdProvider,
+}