Domain Search Rewrite: Fetch available TLDs from the backend in the Filter component

packages/api-core/src/domain-suggestions/fetchers.ts

@@ -45,3 +45,23 @@ export async function fetchFreeDomainSuggestion( search: string ): Promise< Free
 
 	return suggestion;
 }
+
+export async function fetchAvailableTlds( search?: string, vendor?: string ): Promise< string[] > {
+	const defaultAvailableTldsQuery = {
+		vendor: 'variation2_front',
+	};
+
+	const tlds = await wpcom.req.get(
+		{
+			apiVersion: '1.1',
+			path: '/domains/suggestions/tlds',
+		},
+		{
+			...defaultAvailableTldsQuery,
+			search,
+			vendor,
+		}
+	);
+
+	return tlds;
+}

packages/api-queries/src/domains.ts

@@ -1,4 +1,5 @@
 import {
+	fetchAvailableTlds,
 	fetchDomainSuggestions,
 	fetchFreeDomainSuggestion,
 	type DomainSuggestionQuery,
@@ -27,3 +28,9 @@ export const freeSuggestionQuery = ( query: string ) =>
 		queryKey: [ 'free-suggestion', query ],
 		queryFn: () => fetchFreeDomainSuggestion( query ),
 	} );
+
+export const availableTldsQuery = ( query?: string, vendor?: string ) =>
+	queryOptions( {
+		queryKey: [ 'available-tlds', query, vendor ],
+		queryFn: () => fetchAvailableTlds( query, vendor ),
+	} );

packages/domain-search/src/components/search-bar/filter.tsx

@@ -1,3 +1,4 @@
+import { useQuery } from '@tanstack/react-query';
 import { Dropdown } from '@wordpress/components';
 import { useCallback, useMemo } from 'react';
 import { useDomainSearch } from '../../page/context';
@@ -10,13 +11,11 @@ const emptyFilter: FilterState = {
 };
 
 export const Filter = () => {
-	const { filter, setFilter } = useDomainSearch();
-
-	// TODO: Hardcoded for testing, should get those from the https://public-api.wordpress.com/rest/v1.1/domains/suggestions/tlds endpoint
-	const availableTlds = useMemo(
-		() => [ 'com', 'net', 'org', 'blog', 'dev', 'io', 'co', 'co.uk', 'com.br', 'de' ],
-		[]
-	);
+	const { filter, setFilter, query, queries } = useDomainSearch();
+	const { data: availableTlds = [] } = useQuery( {
+		...queries.availableTlds( query ),
+		enabled: true,
+	} );
 
 	const resetFilter = useCallback( () => {
 		setFilter( emptyFilter );

packages/domain-search/src/page/context.ts

@@ -1,4 +1,5 @@
 import {
+	availableTldsQuery,
 	domainAvailabilityQuery,
 	domainSuggestionsQuery,
 	freeSuggestionQuery,
@@ -21,6 +22,7 @@ export const DEFAULT_CONTEXT_VALUE: DomainSearchContextType = {
 		onMapDomainClick: noop,
 	},
 	queries: {
+		availableTlds: ( search?: string, vendor?: string ) => availableTldsQuery( vendor, search ),
 		domainSuggestions: ( query: string ) => domainSuggestionsQuery( query ),
 		domainAvailability: ( domainName: string ) => domainAvailabilityQuery( domainName ),
 		freeSuggestion: ( query: string ) => freeSuggestionQuery( query ),
@@ -116,6 +118,10 @@ export const useDomainSearchContextValue = (
 					...domainAvailabilityQuery( domainName ),
 					enabled: false,
 				} ),
+				availableTlds: ( vendor, search ) => ( {
+					...availableTldsQuery( vendor, search ),
+					enabled: false,
+				} ),
 			},
 			cart,
 			isFullCartOpen,

packages/domain-search/src/page/types.ts

@@ -1,4 +1,5 @@
 import {
+	availableTldsQuery,
 	domainSuggestionsQuery,
 	freeSuggestionQuery,
 	domainAvailabilityQuery,
@@ -72,6 +73,7 @@ export interface DomainSearchContextType
 	filter: FilterState;
 	setFilter: ( filter: FilterState ) => void;
 	queries: {
+		availableTlds: ( query?: string, vendor?: string ) => ReturnType< typeof availableTldsQuery >;
 		domainSuggestions: ( query: string ) => ReturnType< typeof domainSuggestionsQuery >;
 		domainAvailability: ( domainName: string ) => ReturnType< typeof domainAvailabilityQuery >;
 		freeSuggestion: ( query: string ) => ReturnType< typeof freeSuggestionQuery >;