add missing keywords query param

Author: medyo

src/features/ads/api/getAd.ts

@@ -3,21 +3,22 @@ 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 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 }})
+  return axios.get('/engine/ads/', {params: { ref, keywords: keywords.join(",") }})
 }
 
 type QueryFnType = typeof getAd
 
 type UseGetAdOptions = {
+  keywords: string[];
   config?: QueryConfig<QueryFnType>
 }
-export const useGetAd = ({ config }: UseGetAdOptions = {}) => {
+export const useGetAd = ({ keywords, config }: UseGetAdOptions) => {
   return useQuery<ExtractFnReturnType<QueryFnType>>({
     ...config,
     queryKey: ['ad'],
-    queryFn: () => getAd(),
+    queryFn: () => getAd(keywords),
   })
 }

src/features/ads/components/BannerAd.tsx

@@ -1,13 +1,16 @@
 import './BannerAd.css'
 import { useGetAd } from '../api/getAd'
+import { useUserPreferences } from 'src/stores/preferences'
 import { AdPlaceholder } from 'src/components/placeholders'
 
 export const BannerAd = () => {
+  const { userSelectedTags } = useUserPreferences()
   const {
     data: ad,
     isLoading,
     isError,
   } = useGetAd({
+    keywords: userSelectedTags.map(tag => tag.label.toLocaleLowerCase()),
     config: {
       cacheTime: 0,
       staleTime: 0,
@@ -57,7 +60,7 @@ export const BannerAd = () => {
         </span>
       </div>
       {ad.viewUrl && (
-        <img src={ad.viewUrl} key={ad.viewUrl} className="hidden" alt="Pixel" />
+        <img src={ad.viewUrl} key={ad.viewUrl} className="hidden" alt="" />
       )}
     </div>
   )