Merge pull request #274 from medyo/add-ads-delay

Add ads delay

Author: medyo

src/features/adv/api/getAd.ts

@@ -3,15 +3,8 @@ import { axios } from 'src/lib/axios'
 import { ExtractFnReturnType, QueryConfig } from 'src/lib/react-query'
 import { Ad } from '../types'
 
-const getAd = async (
-  keywords: string[],
-  feed: boolean = false,
-  aditionalAdQueries: { [key: string]: string } | undefined
-): Promise<Ad | null> => {
+const getAd = async (keywords: string[], feed: boolean = false): Promise<Ad | null> => {
   let params = { keywords: keywords.join(','), feed: feed ? 'true' : 'false' }
-  if (aditionalAdQueries) {
-    params = { ...params, ...aditionalAdQueries }
-  }
   return axios.get('/engine/ads/', { params })
 }
 
@@ -21,12 +14,11 @@ type UseGetAdOptions = {
   keywords: string[]
   feed?: boolean
   config?: QueryConfig<QueryFnType>
-  aditionalAdQueries: { [key: string]: string } | undefined
 }
-export const useGetAd = ({ keywords, feed, config, aditionalAdQueries }: UseGetAdOptions) => {
+export const useGetAd = ({ keywords, feed, config }: UseGetAdOptions) => {
   return useQuery<ExtractFnReturnType<QueryFnType>>({
     ...config,
     queryKey: ['ad', keywords.join(',')],
-    queryFn: () => getAd(keywords, feed, aditionalAdQueries),
+    queryFn: () => getAd(keywords, feed),
   })
 }

src/features/adv/components/AdvBanner.tsx

@@ -1,7 +1,9 @@
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { AdPlaceholder } from 'src/components/placeholders'
+import { useRemoteConfigStore } from 'src/features/remoteConfig'
 import { useUserPreferences } from 'src/stores/preferences'
 import { useGetAd } from '../api/getAd'
+import { useDelayedFlag } from '../hooks/useDelayedFlag'
 import { Ad } from '../types'
 import './AdvBanner.css'
 
@@ -13,10 +15,9 @@ type AdvBannerProps = {
 
 export const AdvBanner = ({ feedDisplay = false, loadingState, onAdLoaded }: AdvBannerProps) => {
   const { userSelectedTags } = useUserPreferences()
+  const adsFetchDelayMs = useRemoteConfigStore((s) => s.adsFetchDelayMs)
+  const isReady = useDelayedFlag(adsFetchDelayMs)
 
-  const [aditionalAdQueries, setAditionalAdQueries] = useState<
-    { [key: string]: string } | undefined
-  >()
   const {
     isSuccess,
     data: ad,
@@ -25,18 +26,11 @@ export const AdvBanner = ({ feedDisplay = false, loadingState, onAdLoaded }: Adv
   } = useGetAd({
     keywords: userSelectedTags.map((tag) => tag.label.toLocaleLowerCase()),
     feed: true,
-    aditionalAdQueries: aditionalAdQueries,
     config: {
       cacheTime: 0,
       staleTime: 0,
+      enabled: isReady,
       useErrorBoundary: false,
-      refetchInterval(data) {
-        if (data?.nextAd) {
-          setAditionalAdQueries(data.nextAd.queries)
-          return data.nextAd.interval
-        }
-        return false
-      },
     },
   })
 

src/features/adv/hooks/useDelayedFlag.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState, useTransition } from 'react'
+
+export const useDelayedFlag = (ms: number | undefined) => {
+  const [ready, setReady] = useState(false)
+  const [, startTransition] = useTransition()
+  useEffect(() => {
+    if (ms === undefined || ms <= 0) {
+      setReady(true)
+      return
+    }
+    const t = setTimeout(() => startTransition(() => setReady(true)), ms)
+    return () => clearTimeout(t)
+  }, [ms])
+
+  return ready
+}

src/features/remoteConfig/api/getRemoteConfig.ts

@@ -15,7 +15,7 @@ type UseGetRemoteConfigOptions = {
 export const useGetRemoteConfig = ({ config }: UseGetRemoteConfigOptions = {}) => {
   return useQuery<ExtractFnReturnType<QueryFnType>>({
     ...config,
-    queryKey: ['remote-config', 'v2'],
+    queryKey: ['remote-config', 'v3'],
     queryFn: () => getRemoteConfig(),
   })
 }

src/features/remoteConfig/stores/remoteConfig.ts

@@ -3,8 +3,10 @@ import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 import { RemoteConfig, Tag } from '../types'
 
+const DEFAULT_ADS_FETCH_DELAY_MS = 1750
 type RemoteConfigStore = {
   tags: Tag[]
+  adsFetchDelayMs: number
   setRemoteConfig: (remoteConfig: RemoteConfig) => void
 }
 
@@ -17,7 +19,12 @@ export const useRemoteConfigStore = create(
           label: 'Javascript',
         },
       ],
-      setRemoteConfig: (remoteConfig: RemoteConfig) => set({ tags: remoteConfig.tags }),
+      adsFetchDelayMs: DEFAULT_ADS_FETCH_DELAY_MS,
+      setRemoteConfig: (remoteConfig: RemoteConfig) =>
+        set({
+          tags: remoteConfig.tags,
+          adsFetchDelayMs: remoteConfig.ads_fetch_delay_ms || DEFAULT_ADS_FETCH_DELAY_MS,
+        }),
     }),
     {
       name: 'remote_config_storage',

src/features/remoteConfig/types/index.ts

@@ -6,4 +6,5 @@ export type Tag = {
 
 export type RemoteConfig = {
   tags: Tag[]
+  ads_fetch_delay_ms?: number
 }