migrate the ads component to typescript

Author: medyo

src/components/CarbonAd.js

@@ -0,0 +1,31 @@
+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> => {
+  const userAgent = new URLSearchParams(navigator.userAgent).toString()
+
+  return axios.get('/monetization/', {
+    params: {
+      useragent: userAgent
+    }
+  }).then(response => {
+    if (response.data?.ads?.length) {
+      return response.data.ads[0];
+    }
+  });
+}
+
+type QueryFnType = typeof getAd;
+
+type UseGetAdOptions = {
+  config?: QueryConfig<QueryFnType>;
+};
+export const useGetAd = ({ config }: UseGetAdOptions = {}) => {
+  return useQuery<ExtractFnReturnType<QueryFnType>>({
+    ...config,
+    queryKey: ['ad'],
+    queryFn: () => getAd(),
+  });
+}

src/features/carbonAds/api/getAd.ts

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

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

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

src/features/carbonAds/components/CarbonAd.tsx

@@ -0,0 +1,9 @@
+export type Ad = {
+  statlink: string,
+  company: string,
+  companyTagline: string,
+  smallImage: string,
+  backgroundColor: string,
+  description: string,
+  ad_via_link: string
+}

src/features/carbonAds/index.ts

@@ -0,0 +1,6 @@
+import Axios from 'axios';
+import { getBaseApi } from 'src/utils/DataUtils'
+
+export const axios = Axios.create({
+  baseURL: getBaseApi(null)
+});

src/features/carbonAds/types/index.ts

@@ -0,0 +1,28 @@
+import { AxiosError } from 'axios';
+import { QueryClient, UseQueryOptions, UseMutationOptions, DefaultOptions } from '@tanstack/react-query';
+import { PromiseValue } from 'type-fest';
+
+const queryConfig: DefaultOptions = {
+  queries: {
+    useErrorBoundary: true,
+    refetchOnWindowFocus: false,
+    retry: false,
+  },
+};
+
+export const queryClient = new QueryClient({ defaultOptions: queryConfig });
+
+export type ExtractFnReturnType<FnType extends (...args: any) => any> = PromiseValue<
+  ReturnType<FnType>
+>;
+
+export type QueryConfig<QueryFnType extends (...args: any) => any> = Omit<
+  UseQueryOptions<ExtractFnReturnType<QueryFnType>>,
+  'queryKey' | 'queryFn'
+>;
+
+export type MutationConfig<MutationFnType extends (...args: any) => any> = UseMutationOptions<
+  ExtractFnReturnType<MutationFnType>,
+  AxiosError,
+  Parameters<MutationFnType>[0]
+>;

src/lib/axios.ts

@@ -0,0 +1,7 @@
+export const addHttpsProtocol = (url: string): string => {
+  url = decodeURIComponent(url)
+  if (!/^(?:f|ht)tps?:\/\//.test(url)) {
+    url = 'https:' + url
+  }
+  return url
+}