dynamic ads

Author: Chouikane

src/features/ads/api/getAd.ts

@@ -1,24 +1,33 @@
 import { useQuery } from '@tanstack/react-query'
+import { axios } from 'src/lib/axios'
 import { ExtractFnReturnType, QueryConfig } from 'src/lib/react-query'
 import { Ad } from '../types'
-import { axios } from 'src/lib/axios'
 
-const getAd = async (keywords: string[]): Promise<Ad | null> => {
-  let url = new URL(window.location.href);
-  let ref  = url.searchParams.get("ref");
-  return axios.get('/engine/ads/', {params: { ref, keywords: keywords.join(",") }})
+
+
+
+const getAd = async (
+  keywords: string[],
+  aditionalAdQueries: { [key: string]: string } | undefined
+): Promise<Ad | null> => {
+  let params = { keywords: keywords.join(',') }
+  if (aditionalAdQueries) {
+    params = { ...params, ...aditionalAdQueries }
+  }
+  return axios.get('/engine/ads/', { params })
 }
 
 type QueryFnType = typeof getAd
 
 type UseGetAdOptions = {
-  keywords: string[];
+  keywords: string[]
   config?: QueryConfig<QueryFnType>
+  aditionalAdQueries: { [key: string]: string } | undefined
 }
-export const useGetAd = ({ keywords, config }: UseGetAdOptions) => {
+export const useGetAd = ({ keywords, config, aditionalAdQueries }: UseGetAdOptions) => {
   return useQuery<ExtractFnReturnType<QueryFnType>>({
     ...config,
     queryKey: ['ad'],
-    queryFn: () => getAd(keywords),
+    queryFn: () => getAd(keywords, aditionalAdQueries),
   })
 }

src/features/ads/components/BannerAd.tsx

@@ -1,19 +1,32 @@
-import './BannerAd.css'
-import { useGetAd } from '../api/getAd'
-import { useUserPreferences } from 'src/stores/preferences'
+import { useState } from 'react'
 import { AdPlaceholder } from 'src/components/placeholders'
+import { useUserPreferences } from 'src/stores/preferences'
+import { useGetAd } from '../api/getAd'
+import './BannerAd.css'
 
 export const BannerAd = () => {
   const { userSelectedTags } = useUserPreferences()
+
+  const [aditionalAdQueries, setAditionalAdQueries] = useState<
+    { [key: string]: string } | undefined
+  >()
   const {
     data: ad,
     isLoading,
     isError,
   } = useGetAd({
-    keywords: userSelectedTags.map(tag => tag.label.toLocaleLowerCase()),
+    keywords: userSelectedTags.map((tag) => tag.label.toLocaleLowerCase()),
+    aditionalAdQueries: aditionalAdQueries,
     config: {
       cacheTime: 0,
       staleTime: 0,
+      refetchInterval(data, query) {
+        if (data?.nextAd) {
+          setAditionalAdQueries(data.nextAd.queries)
+          return data.nextAd.interval
+        }
+        return false
+      },
     },
   })
 
@@ -59,9 +72,7 @@ export const BannerAd = () => {
           </a>
         </span>
       </div>
-      {ad.viewUrl && (
-        <img src={ad.viewUrl} key={ad.viewUrl} className="hidden" alt="" />
-      )}
+      {ad.viewUrl && <img src={ad.viewUrl} key={ad.viewUrl} className="hidden" alt="" />}
     </div>
   )
 }

src/features/ads/types/index.ts

@@ -4,12 +4,18 @@ type AdProvider = {
   link?: string,
 }
 
+type NextAdType = {
+  queries: { [key: string]: string }
+  interval: number
+}
+
 export type Ad = {
-  title?: string,
-  description: string,
-  imageUrl: string,
-  viewUrl?: string,
-  link: string,
-  backgroundColor?: string,
-  provider: AdProvider,
+  title?: string
+  description: string
+  imageUrl: string
+  viewUrl?: string
+  link: string
+  backgroundColor?: string
+  provider: AdProvider
+  nextAd?: NextAdType
 }