From 399753e64d70eb7747c4ba07ce402c20267534ba Mon Sep 17 00:00:00 2001 From: Dylan Munson <65001528+CodeyGuyDylan@users.noreply.github.com> Date: Mon, 16 Sep 2024 10:18:25 -0600 Subject: [PATCH] Fix type issue with use simple mutation (#39381) * Update typing for mutations * changelog --- .../connected-product-card/index.tsx | 2 +- .../_inc/components/product-card/index.tsx | 6 +++--- .../product-card/use-pricing-data.ts | 4 ++-- .../products/use-install-standalone-plugin.ts | 16 +--------------- .../_inc/data/use-simple-mutation.ts | 18 ++++++++++++++++-- .../fix-type-issue-with-use-simple-mutation | 5 +++++ 6 files changed, 28 insertions(+), 23 deletions(-) create mode 100644 projects/packages/my-jetpack/changelog/fix-type-issue-with-use-simple-mutation 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 index f1ca6373df03b..9f1791abe993c 100644 --- 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 index fbf034bbe6d5f..9764d08cf673a 100644 --- 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 index 366d768fb1e79..09821dc61732d 100644 --- 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 index ad77a9053c7c4..f7d6702b6de1e 100644 --- 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 index 15d9229894c03..4ec584826f650 100644 --- 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} 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 new file mode 100644 index 0000000000000..09648aea69271 --- /dev/null +++ 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 + +