add new endpoint

Author: Chouikane

src/features/carbonAds/api/getAd.ts

@@ -1,37 +1,25 @@
-import { useQuery } from '@tanstack/react-query';
-import { ExtractFnReturnType, QueryConfig } from 'src/lib/react-query';
-import { Ad } from "../types";
-import { axios } from 'src/lib/axios';
-
-type Response = {
-  ads: Ad[]
-}
+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> => {
-  const userAgent = new URLSearchParams(navigator.userAgent).toString()
 
-  return axios.get<Ad | null>('/monetization/', {
-    params: {
-      useragent: userAgent
-    }
-  }).then(response => {
-    const data = response as unknown as Response;
-    if (!!data.ads.length) {
-      return data.ads[0];
-    } 
-    return null;
-  });
+  return axios.get<Ad | null>('/engine/ads/').then((response) => {
+    const data = response as unknown as Ad
+    return data
+  })
 }
 
-type QueryFnType = typeof getAd;
+type QueryFnType = typeof getAd
 
 type UseGetAdOptions = {
-  config?: QueryConfig<QueryFnType>;
-};
+  config?: QueryConfig<QueryFnType>
+}
 export const useGetAd = ({ config }: UseGetAdOptions = {}) => {
   return useQuery<ExtractFnReturnType<QueryFnType>>({
     ...config,
     queryKey: ['ad'],
     queryFn: () => getAd(),
-  });
-}
+  })
+}

src/features/carbonAds/components/CarbonAd.tsx

@@ -1,7 +1,7 @@
 import './CarbonAd.css'
-import { addHttpsProtocol } from 'src/utils/UrlUtils'
 import { useGetAd } from '../api/getAd'
 import { useRemoteConfigStore } from 'src/features/remoteConfig'
+
 export const CarbonAd = () => {
   const { refresh_rate } = useRemoteConfigStore()
   const { data: ad } = useGetAd({
@@ -10,7 +10,7 @@ export const CarbonAd = () => {
     },
   })
 
-  if (!ad || !ad.statlink) {
+  if (!ad || !ad.link) {
     return null
   }
 
@@ -21,22 +21,22 @@ export const CarbonAd = () => {
           <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">
@@ -45,11 +45,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/carbonAds/types/index.ts

@@ -1,9 +1,14 @@
+type AdProvider = {
+  name: string,
+  title: string,
+  link?: string,
+}
+
 export type Ad = {
-  statlink?: string,
-  company: string,
-  companyTagline: string,
-  smallImage: string,
-  backgroundColor: string,
+  title?: string,
   description: string,
-  ad_via_link: string
+  imageUrl: string,
+  link: string,
+  backgroundColor?: string,
+  provider: AdProvider,
 }