Fix type issue with use simple mutation (#39381)

* Update typing for mutations * changelog
Automattic · Sep 16, 2024 · 399753e · 399753e
1 parent 07d354a
commit 399753e
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 23 deletions.
diff --git a/projects/packages/my-jetpack/_inc/components/connected-product-card/index.tsx b/projects/packages/my-jetpack/_inc/components/connected-product-card/index.tsx
@@ -78,7 +78,7 @@ const ConnectedProductCard: FC< ConnectedProductCardProps > = ( {
 			return;
 		}
 
-		activate( {} );
+		activate();
 	}, [
 		activate,
 		isRegistered,

diff --git a/projects/packages/my-jetpack/_inc/components/product-card/index.tsx b/projects/packages/my-jetpack/_inc/components/product-card/index.tsx
@@ -12,7 +12,7 @@ import SecondaryButton from './secondary-button';
 import Status from './status';
 import styles from './style.module.scss';
 import type { AdditionalAction, SecondaryAction } from './types';
-import type { InstallCallback } from '../../data/products/use-install-standalone-plugin';
+import type { MutateCallback } from '../../data/use-simple-mutation';
 import type { FC, MouseEventHandler, ReactNode } from 'react';
 
 export type ProductCardProps = {
@@ -31,7 +31,7 @@ export type ProductCardProps = {
 	upgradeInInterstitial?: boolean;
 	primaryActionOverride?: Record< string, AdditionalAction >;
 	secondaryAction?: SecondaryAction;
-	onInstallStandalone?: InstallCallback;
+	onInstallStandalone?: MutateCallback;
 	onActivateStandalone?: () => void;
 	status: ProductStatus;
 	onMouseEnter?: MouseEventHandler< HTMLButtonElement >;
@@ -139,7 +139,7 @@ const ProductCard: FC< ProductCardProps > = props => {
 		recordEvent( 'jetpack_myjetpack_product_card_install_standalone_plugin_click', {
 			product: slug,
 		} );
-		onInstallStandalone( {} );
+		onInstallStandalone();
 	}, [ slug, onInstallStandalone, recordEvent ] );
 
 	/**

diff --git a/projects/packages/my-jetpack/_inc/components/product-card/use-pricing-data.ts b/projects/packages/my-jetpack/_inc/components/product-card/use-pricing-data.ts
@@ -109,14 +109,14 @@ const usePricingData = ( slug: string ) => {
 		if ( wpcomFreeProductSlug ) {
 			runFreeCheckout();
 		} else {
-			activate( {} );
+			activate();
 		}
 	}, [ activate, runFreeCheckout, wpcomFreeProductSlug ] );
 
 	const handleCheckout = useCallback( () => {
 		recordEvent( 'jetpack_myjetpack_evaluation_recommendations_checkout_click', { slug } );
 		if ( slug === 'crm' ) {
-			activate( {} );
+			activate();
 			window.open( 'https://jetpackcrm.com/pricing/', '_blank' );
 			return;
 		}

diff --git a/projects/packages/my-jetpack/_inc/data/products/use-install-standalone-plugin.ts b/projects/packages/my-jetpack/_inc/data/products/use-install-standalone-plugin.ts
@@ -3,22 +3,8 @@ import { REST_API_SITE_PRODUCTS_ENDPOINT } from '../constants';
 import { QUERY_INSTALL_PRODUCT_KEY } from '../constants';
 import useSimpleMutation from '../use-simple-mutation';
 import useProduct from './use-product';
-import type { APIFetchOptionsWithQueryParams } from '../use-simple-mutation';
-import type { UseMutateFunction } from '@tanstack/react-query';
 
-export type InstallCallback = UseMutateFunction<
-	void,
-	Error,
-	APIFetchOptionsWithQueryParams,
-	unknown
->;
-
-type UseInstallStandalonePluginFunction = ( productId: string ) => {
-	install: InstallCallback;
-	isPending: boolean;
-};
-
-const useInstallStandalonePlugin: UseInstallStandalonePluginFunction = productId => {
+const useInstallStandalonePlugin = ( productId: string ) => {
 	const { detail, refetch } = useProduct( productId );
 
 	const { mutate: install, isPending } = useSimpleMutation( {

diff --git a/projects/packages/my-jetpack/_inc/data/use-simple-mutation.ts b/projects/packages/my-jetpack/_inc/data/use-simple-mutation.ts
@@ -2,13 +2,26 @@ import { useMutation } from '@tanstack/react-query';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 import { useFetchingErrorNotice } from './notices/use-fetching-error-notice';
-import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
+import type {
+	UseMutationOptions,
+	UseMutateFunction,
+	// This variable is being used as a type declaration
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	UseMutationResult,
+} from '@tanstack/react-query';
 import type { APIFetchOptions } from '@wordpress/api-fetch';
 
 export type APIFetchOptionsWithQueryParams = APIFetchOptions & {
 	queryParams?: Record< string, string | Array< string > | object >;
 };
 
+export type MutateCallback = UseMutateFunction<
+	void,
+	Error,
+	APIFetchOptionsWithQueryParams | void,
+	unknown
+>;
+
 /**
  * Executes a mutation with the specified parameters and options. This hook is designed
  * for performing data modification operations (e.g., POST, PUT, DELETE requests) and handling
@@ -23,6 +36,7 @@ export type APIFetchOptionsWithQueryParams = APIFetchOptions & {
  * @param {string}                                [params.errorMessage] - Optional. A custom error message that can be displayed if the mutation fails.
  * @return {UseMutationResult<T>} The result object from the useMutation hook, containing data and state information about the mutation (e.g., isPending, isError).
  */
+
 type QueryParams< T, E, V > = {
 	name: string;
 	query: APIFetchOptions;
@@ -39,7 +53,7 @@ const useSimpleMutation = <
 	options,
 	errorMessage,
 }: QueryParams< T, E, V > ) => {
-	const mutationResult = useMutation< T, E, V >( {
+	const mutationResult = useMutation< T, E, V | void >( {
 		mutationKey: [ name ],
 		mutationFn: ( variables?: V ) => {
 			const finalQuery = Object.assign( {}, query ); // copy object

diff --git a/projects/packages/my-jetpack/changelog/fix-type-issue-with-use-simple-mutation b/projects/packages/my-jetpack/changelog/fix-type-issue-with-use-simple-mutation
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Just a typing update
+
+