@automattic/data-stores 3.0.0 → 3.1.0-rc.1

package/src/reader/mutations/use-site-subscribe-mutation.ts

@@ -0,0 +1,181 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { buildQueryKey, callApi, getSubscriptionMutationParams, isValidId } from '../helpers';
+import { useIsLoggedIn } from '../hooks';
+import { SiteSubscriptionsPages } from '../types';
+import type { SiteSubscriptionDetails } from '../types';
+
+type SubscribeParams = {
+	blog_id?: number | string;
+	feed_id?: number | string;
+	url?: string;
+	doNotInvalidateSiteSubscriptions?: boolean;
+	onSuccess?: () => void;
+	onError?: () => void;
+	subscriptionId?: number;
+	resubscribed?: boolean;
+};
+
+type SubscribeResponse = {
+	info?: string;
+	success?: boolean;
+	subscribed?: boolean;
+	subscription?: {
+		blog_ID: string;
+		delivery_frequency: string;
+		status: string;
+		ts: string;
+	};
+};
+
+const buildSubscriptionDetailsByBlogIdQueryKey = (
+	blogId: string,
+	isLoggedIn: boolean,
+	userId?: number
+) => {
+	return buildQueryKey( [ 'read', 'site-subscription-details', blogId ], isLoggedIn, userId );
+};
+
+const useSiteSubscribeMutation = () => {
+	const { isLoggedIn, id: userId } = useIsLoggedIn();
+	const queryClient = useQueryClient();
+	const siteSubscriptionsCacheKey = buildQueryKey(
+		[ 'read', 'site-subscriptions' ],
+		isLoggedIn,
+		userId
+	);
+	const subscriptionsCountCacheKey = buildQueryKey(
+		[ 'read', 'subscriptions-count' ],
+		isLoggedIn,
+		userId
+	);
+
+	return useMutation( {
+		mutationFn: async ( params: SubscribeParams ) => {
+			const { path, apiVersion, body } = getSubscriptionMutationParams(
+				'new',
+				isLoggedIn,
+				params.blog_id,
+				params.url
+			);
+
+			const response = await callApi< SubscribeResponse >( {
+				path,
+				method: 'POST',
+				isLoggedIn,
+				apiVersion,
+				body,
+			} );
+			if ( ! response.subscribed ) {
+				throw new Error(
+					// reminder: translate this string when we add it to the UI
+					'Something went wrong while subscribing.'
+				);
+			}
+
+			return response;
+		},
+		onMutate: async ( params ) => {
+			const isValidBlogId = isValidId( params.blog_id );
+			let previousSiteSubscriptionDetailsByBlogId: SiteSubscriptionDetails | undefined;
+
+			if ( isValidBlogId ) {
+				const siteSubscriptionDetailsCacheKey = buildSubscriptionDetailsByBlogIdQueryKey(
+					String( params.blog_id ),
+					isLoggedIn,
+					userId
+				);
+				await queryClient.cancelQueries( { queryKey: siteSubscriptionDetailsCacheKey } );
+
+				previousSiteSubscriptionDetailsByBlogId =
+					queryClient.getQueryData< SiteSubscriptionDetails >( siteSubscriptionDetailsCacheKey );
+
+				if ( previousSiteSubscriptionDetailsByBlogId ) {
+					queryClient.setQueryData( siteSubscriptionDetailsCacheKey, {
+						...previousSiteSubscriptionDetailsByBlogId,
+						subscriber_count: previousSiteSubscriptionDetailsByBlogId.subscriber_count + 1,
+					} );
+				}
+			}
+
+			const previousSiteSubscriptions =
+				queryClient.getQueryData< SiteSubscriptionsPages >( siteSubscriptionsCacheKey );
+
+			if ( previousSiteSubscriptions ) {
+				queryClient.setQueryData( siteSubscriptionsCacheKey, {
+					...previousSiteSubscriptions,
+					pages: previousSiteSubscriptions.pages.map( ( page ) => {
+						return {
+							...page,
+							total_subscriptions: page.total_subscriptions - 1,
+							subscriptions: page.subscriptions.map( ( siteSubscription ) =>
+								siteSubscription.blog_ID === params.blog_id
+									? {
+											...siteSubscription,
+											date_subscribed: new Date(),
+											isDeleted: false,
+											resubscribed: params.resubscribed ?? false,
+									  }
+									: siteSubscription
+							),
+						};
+					} ),
+				} );
+			}
+
+			return {
+				previousSiteSubscriptions,
+				previousSiteSubscriptionDetails: previousSiteSubscriptionDetailsByBlogId,
+			};
+		},
+		onError: ( _error, params, context ) => {
+			if ( context?.previousSiteSubscriptions ) {
+				queryClient.setQueryData( siteSubscriptionsCacheKey, context.previousSiteSubscriptions );
+			}
+
+			if ( isValidId( params.blog_id ) && context?.previousSiteSubscriptionDetails ) {
+				const siteSubscriptionDetailsCacheKey = buildSubscriptionDetailsByBlogIdQueryKey(
+					String( params.blog_id ),
+					isLoggedIn,
+					userId
+				);
+				queryClient.setQueryData(
+					siteSubscriptionDetailsCacheKey,
+					context.previousSiteSubscriptionDetails
+				);
+			}
+
+			params.onError?.();
+		},
+		onSettled: ( _data, _error, params: SubscribeParams ) => {
+			if ( params.doNotInvalidateSiteSubscriptions !== true ) {
+				queryClient.invalidateQueries( { queryKey: siteSubscriptionsCacheKey } );
+			}
+
+			if ( isValidId( params.blog_id ) ) {
+				const siteSubscriptionDetailsCacheKey = buildSubscriptionDetailsByBlogIdQueryKey(
+					String( params.blog_id ),
+					isLoggedIn,
+					userId
+				);
+				queryClient.invalidateQueries( { queryKey: siteSubscriptionDetailsCacheKey } );
+				queryClient.invalidateQueries( {
+					queryKey: [ 'read', 'sites', Number( params.blog_id ) ],
+				} );
+			}
+
+			if ( isValidId( params.feed_id ) ) {
+				const feedCacheKey = [ 'read', 'feeds', Number( params.feed_id ) ];
+				queryClient.invalidateQueries( {
+					queryKey: feedCacheKey,
+				} );
+			}
+
+			queryClient.invalidateQueries( { queryKey: subscriptionsCountCacheKey } );
+		},
+		onSuccess: ( data, params ) => {
+			params.onSuccess?.();
+		},
+	} );
+};
+
+export default useSiteSubscribeMutation;

package/src/reader/mutations/use-site-unsubscribe-mutation.ts

@@ -0,0 +1,233 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { buildQueryKey, callApi, getSubscriptionMutationParams, isValidId } from '../helpers';
+import { useCacheKey, useIsLoggedIn } from '../hooks';
+import {
+	SiteSubscriptionsPages,
+	SubscriptionManagerSubscriptionsCount,
+	SiteSubscriptionDetails,
+} from '../types';
+
+type UnsubscribeParams = {
+	subscriptionId: number;
+	url?: string;
+	blog_id?: number | string;
+	doNotInvalidateSiteSubscriptions?: boolean;
+	emailId?: string;
+};
+
+type UnsubscribeResponse = {
+	success?: boolean;
+	subscribed?: boolean;
+	subscription?: null;
+};
+
+const buildSiteSubscriptionDetailsByBlogIdQueryKey = (
+	blogId: number | string,
+	isLoggedIn: boolean,
+	userId?: number
+) => {
+	return buildQueryKey(
+		[ 'read', 'site-subscription-details', String( blogId ) ],
+		isLoggedIn,
+		userId
+	);
+};
+
+const buildSiteSubscriptionDetailsQueryKey = (
+	subscriptionId: number,
+	isLoggedIn: boolean,
+	userId?: number
+) => {
+	return [ 'read', 'subscriptions', subscriptionId, isLoggedIn, userId ];
+};
+
+const useSiteUnsubscribeMutation = () => {
+	const { isLoggedIn, id: userId } = useIsLoggedIn();
+	const queryClient = useQueryClient();
+	const siteSubscriptionsQueryKey = useCacheKey( [ 'read', 'site-subscriptions' ] );
+	const subscriptionsCountQueryKey = useCacheKey( [ 'read', 'subscriptions-count' ] );
+
+	return useMutation( {
+		mutationFn: async ( params: UnsubscribeParams ) => {
+			const { path, apiVersion, body } = getSubscriptionMutationParams(
+				'delete',
+				isLoggedIn,
+				params.blog_id,
+				params.url,
+				params.emailId,
+				params.subscriptionId
+			);
+
+			const response = await callApi< UnsubscribeResponse >( {
+				path,
+				method: 'POST',
+				isLoggedIn,
+				apiVersion,
+				body,
+			} );
+			if (
+				'success' in response &&
+				response.success === false &&
+				'subscribed' in response &&
+				response.subscribed === true
+			) {
+				throw new Error(
+					// reminder: translate this string when we add it to the UI
+					'Something went wrong while unsubscribing.'
+				);
+			}
+
+			return response;
+		},
+		onMutate: async ( params ) => {
+			const siteSubscriptionDetailsQueryKey = buildSiteSubscriptionDetailsQueryKey(
+				params.subscriptionId,
+				isLoggedIn,
+				userId
+			);
+
+			await queryClient.cancelQueries( { queryKey: siteSubscriptionsQueryKey } );
+			await queryClient.cancelQueries( { queryKey: subscriptionsCountQueryKey } );
+			await queryClient.cancelQueries( { queryKey: siteSubscriptionDetailsQueryKey } );
+
+			const previousSiteSubscriptions =
+				queryClient.getQueryData< SiteSubscriptionsPages >( siteSubscriptionsQueryKey );
+
+			// remove blog from site subscriptions
+			if ( previousSiteSubscriptions ) {
+				queryClient.setQueryData( siteSubscriptionsQueryKey, {
+					...previousSiteSubscriptions,
+					pages: previousSiteSubscriptions.pages.map( ( page ) => {
+						return {
+							...page,
+							total_subscriptions: page.total_subscriptions - 1,
+							subscriptions: page.subscriptions.map( ( siteSubscription ) =>
+								Number( siteSubscription.ID ) === params.subscriptionId ||
+								( isValidId( params.blog_id ) && siteSubscription.blog_ID === params.blog_id ) //siteSubscription.blog_ID is not valid ID for non-wpcom subscriptions, so when unsubscribing from such site, the param.blog_id will also be not valid, this would create false positive
+									? {
+											...siteSubscription,
+											isDeleted: true,
+											resubscribed: false,
+									  }
+									: siteSubscription
+							),
+						};
+					} ),
+				} );
+			}
+
+			const previousSubscriptionsCount =
+				queryClient.getQueryData< SubscriptionManagerSubscriptionsCount >(
+					subscriptionsCountQueryKey
+				);
+
+			// decrement the blog count
+			if ( previousSubscriptionsCount ) {
+				queryClient.setQueryData< SubscriptionManagerSubscriptionsCount >(
+					subscriptionsCountQueryKey,
+					{
+						...previousSubscriptionsCount,
+						blogs: previousSubscriptionsCount?.blogs ? previousSubscriptionsCount?.blogs - 1 : null,
+					}
+				);
+			}
+
+			const previousSiteSubscriptionDetails = queryClient.getQueryData< SiteSubscriptionDetails >(
+				siteSubscriptionDetailsQueryKey
+			);
+			if ( previousSiteSubscriptionDetails ) {
+				queryClient.setQueryData( siteSubscriptionDetailsQueryKey, {
+					...previousSiteSubscriptionDetails,
+					subscriber_count: previousSiteSubscriptionDetails.subscriber_count - 1,
+				} );
+			}
+
+			let previousSiteSubscriptionDetailsByBlogId: SiteSubscriptionDetails | undefined;
+			if ( isValidId( params.blog_id ) ) {
+				const siteSubscriptionDetailsCacheKey = buildSiteSubscriptionDetailsByBlogIdQueryKey(
+					params.blog_id,
+					isLoggedIn,
+					userId
+				);
+
+				await queryClient.cancelQueries( { queryKey: siteSubscriptionDetailsCacheKey } );
+
+				previousSiteSubscriptionDetailsByBlogId = queryClient.getQueryData(
+					siteSubscriptionDetailsCacheKey
+				);
+
+				if ( previousSiteSubscriptionDetailsByBlogId ) {
+					queryClient.setQueryData( siteSubscriptionDetailsCacheKey, {
+						...previousSiteSubscriptionDetailsByBlogId,
+						subscriber_count: previousSiteSubscriptionDetailsByBlogId.subscriber_count - 1,
+					} );
+				}
+			}
+
+			return {
+				previousSiteSubscriptions,
+				previousSubscriptionsCount,
+				previousSiteSubscriptionDetails,
+				previousSiteSubscriptionDetailsByBlogId,
+			};
+		},
+		onError: ( _error, params, context ) => {
+			if ( context?.previousSiteSubscriptions ) {
+				queryClient.setQueryData( siteSubscriptionsQueryKey, context.previousSiteSubscriptions );
+			}
+			if ( context?.previousSubscriptionsCount ) {
+				queryClient.setQueryData< SubscriptionManagerSubscriptionsCount >(
+					subscriptionsCountQueryKey,
+					context.previousSubscriptionsCount
+				);
+			}
+			if ( context?.previousSiteSubscriptionDetails ) {
+				queryClient.setQueryData(
+					buildSiteSubscriptionDetailsQueryKey( params.subscriptionId, isLoggedIn, userId ),
+					{
+						...context.previousSiteSubscriptionDetails,
+						subscriber_count: context.previousSiteSubscriptionDetails.subscriber_count + 1,
+					}
+				);
+			}
+			if ( context?.previousSiteSubscriptionDetailsByBlogId && isValidId( params.blog_id ) ) {
+				const siteSubscriptionDetailsCacheKey = buildSiteSubscriptionDetailsByBlogIdQueryKey(
+					params.blog_id,
+					isLoggedIn,
+					userId
+				);
+				queryClient.setQueryData(
+					siteSubscriptionDetailsCacheKey,
+					context.previousSiteSubscriptionDetailsByBlogId
+				);
+			}
+		},
+		onSettled: ( _data, _error, params ) => {
+			if ( params.doNotInvalidateSiteSubscriptions !== true ) {
+				queryClient.invalidateQueries( { queryKey: siteSubscriptionsQueryKey } );
+			}
+
+			if ( isValidId( params.blog_id ) ) {
+				const siteSubscriptionDetailsByBlogIdQueryKey =
+					buildSiteSubscriptionDetailsByBlogIdQueryKey( params.blog_id, isLoggedIn, userId );
+				queryClient.invalidateQueries( {
+					queryKey: siteSubscriptionDetailsByBlogIdQueryKey,
+					refetchType: 'none',
+				} );
+				queryClient.invalidateQueries( {
+					queryKey: [ 'read', 'sites', Number( params.blog_id ) ],
+				} );
+			}
+
+			queryClient.invalidateQueries( { queryKey: subscriptionsCountQueryKey } );
+			queryClient.invalidateQueries( {
+				queryKey: [ 'read', 'feed', 'search' ],
+			} );
+			queryClient.invalidateQueries( {
+				queryKey: buildSiteSubscriptionDetailsQueryKey( params.subscriptionId, isLoggedIn, userId ),
+			} );
+		},
+	} );
+};
+
+export default useSiteUnsubscribeMutation;

package/src/reader/mutations/use-user-settings-mutation.ts

@@ -0,0 +1,66 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { translate } from 'i18n-calypso';
+import { callApi } from '../helpers';
+import { useCacheKey, useIsLoggedIn } from '../hooks';
+import type { SubscriptionManagerUserSettings, EmailSettingsAPIResponse } from '../types';
+
+type MutationContext = {
+	previousSettings: SubscriptionManagerUserSettings;
+};
+
+const useUserSettingsMutation = () => {
+	const { isLoggedIn } = useIsLoggedIn();
+	const queryClient = useQueryClient();
+	const emailSettingsCacheKey = useCacheKey( [ 'read', 'email-settings' ] );
+	return useMutation< SubscriptionManagerUserSettings, Error, SubscriptionManagerUserSettings >( {
+		mutationFn: async ( data: SubscriptionManagerUserSettings ) => {
+			const { settings } = await callApi< EmailSettingsAPIResponse >( {
+				path: '/read/email-settings',
+				method: 'POST',
+				body: data,
+				isLoggedIn,
+			} );
+			if ( settings.errors ) {
+				if ( settings.errors.invalid_input ) {
+					throw new Error( settings.errors.invalid_input.join( ', ' ) );
+				} else {
+					throw new Error(
+						translate( 'Something went wrong.', {
+							context: 'Something went wrong will saving the user settings',
+						} ) as string
+					);
+				}
+			}
+			return settings;
+		},
+		onMutate: async ( data ) => {
+			await queryClient.cancelQueries( { queryKey: emailSettingsCacheKey } );
+			const previousSettings =
+				queryClient.getQueryData< SubscriptionManagerUserSettings >( emailSettingsCacheKey );
+
+			queryClient.setQueryData< SubscriptionManagerUserSettings >( emailSettingsCacheKey, {
+				...previousSettings,
+				...data,
+			} );
+			return { previousSettings: previousSettings };
+		},
+		onError: ( error, variables, context ) => {
+			// For some reason the TypeScript compiler doesn't like the `context` parameter in this mutation
+			// That's why we're using the `as MutationContext` cast here
+			if ( ( context as MutationContext )?.previousSettings ) {
+				queryClient.setQueryData< SubscriptionManagerUserSettings >(
+					emailSettingsCacheKey,
+					( context as MutationContext ).previousSettings
+				);
+			}
+		},
+		onSettled: () => {
+			// pass in a more minimal key, everything to the right will be invalidated
+			queryClient.invalidateQueries( {
+				queryKey: [ 'read', 'email-settings' ],
+			} );
+		},
+	} );
+};
+
+export default useUserSettingsMutation;

package/src/reader/queries/index.ts

@@ -0,0 +1,15 @@
+export { default as usePendingPostSubscriptionsQuery } from './use-pending-post-subscriptions-query';
+export { default as usePendingSiteSubscriptionsQuery } from './use-pending-site-subscriptions-query';
+export { default as usePostSubscriptionsQuery } from './use-post-subscriptions-query';
+export { default as useReadFeedSearchQuery, FeedSort } from './use-read-feed-search-query';
+export { default as useReadFeedSiteQuery } from './use-read-feed-site-query';
+export { default as useReadFeedQuery } from './use-read-feed-query';
+export { default as useSiteSubscriptionDetailsQuery } from './use-site-subscription-details-query';
+export {
+	default as useSiteSubscriptionsQuery,
+	siteSubscriptionsQueryKeyPrefix,
+} from './use-site-subscriptions-query';
+export { default as useSubscriptionsCountQuery } from './use-subscriptions-count-query';
+export { default as useUserSettingsQuery } from './use-user-settings-query';
+
+export type { FeedItem } from './use-read-feed-search-query';

package/src/reader/queries/test/use-read-feed-search-query.tsx

@@ -0,0 +1,55 @@
+/**
+ * @jest-environment jsdom
+ */
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { renderHook } from '@testing-library/react';
+import React from 'react';
+import wpcomRequest from 'wpcom-proxy-request';
+import useReadFeedSearchQuery, { FeedSort } from '../use-read-feed-search-query';
+
+jest.mock( 'wpcom-proxy-request', () => jest.fn() );
+
+describe( 'useReadFeedSearchQuery', () => {
+	beforeEach( () => {
+		( wpcomRequest as jest.MockedFunction< typeof wpcomRequest > ).mockResolvedValue( {
+			algorithm: 'example_algorithm',
+			feeds: [],
+			next_page: 'example_next_page',
+			total: 0,
+		} );
+	} );
+
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should call wpcomRequest with correct parameters when query is defined', async () => {
+		const queryClient = new QueryClient();
+		const wrapper = ( { children } ) => (
+			<QueryClientProvider client={ queryClient }>{ children }</QueryClientProvider>
+		);
+
+		const query = 'example';
+		renderHook( () => useReadFeedSearchQuery( { query } ), { wrapper } );
+
+		expect( wpcomRequest ).toHaveBeenCalledWith( {
+			path: '/read/feed',
+			apiVersion: '1.1',
+			method: 'GET',
+			query: `q=${ encodeURIComponent( query ) }&exclude_followed=false&sort=${ encodeURIComponent(
+				FeedSort.Relevance
+			) }`,
+		} );
+	} );
+
+	it( 'should not call wpcomRequest when query is undefined', () => {
+		const queryClient = new QueryClient();
+		const wrapper = ( { children } ) => (
+			<QueryClientProvider client={ queryClient }>{ children }</QueryClientProvider>
+		);
+
+		renderHook( () => useReadFeedSearchQuery( {} ), { wrapper } );
+
+		expect( wpcomRequest ).not.toHaveBeenCalled();
+	} );
+} );