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

package/src/reader/contexts/site-subscriptions-query-props.tsx

@@ -0,0 +1,48 @@
+import React, { createContext, useState, useContext } from 'react';
+import { SiteSubscriptionsFilterBy, SiteSubscriptionsSortBy } from '../constants';
+
+type SiteSubscriptionsQueryPropsType = {
+	searchTerm: string;
+	setSearchTerm: ( term: string ) => void;
+	sortTerm: SiteSubscriptionsSortBy;
+	setSortTerm: ( term: SiteSubscriptionsSortBy ) => void;
+	filterOption: SiteSubscriptionsFilterBy;
+	setFilterOption: ( option: SiteSubscriptionsFilterBy ) => void;
+};
+
+export const SiteSubscriptionsQueryProps = createContext< SiteSubscriptionsQueryPropsType >( {
+	searchTerm: '',
+	setSearchTerm: () => undefined,
+	sortTerm: SiteSubscriptionsSortBy.DateSubscribed,
+	setSortTerm: () => undefined,
+	filterOption: SiteSubscriptionsFilterBy.All,
+	setFilterOption: () => undefined,
+} );
+
+export const SiteSubscriptionsQueryPropsProvider: React.FC< { children: React.ReactNode } > = ( {
+	children,
+} ) => {
+	const [ searchTerm, setSearchTerm ] = useState( '' );
+	const [ sortTerm, setSortTerm ] = useState( SiteSubscriptionsSortBy.DateSubscribed );
+	const [ filterOption, setFilterOption ] = useState( SiteSubscriptionsFilterBy.All );
+
+	return (
+		<SiteSubscriptionsQueryProps.Provider
+			value={ {
+				searchTerm,
+				setSearchTerm,
+				sortTerm,
+				setSortTerm,
+				filterOption,
+				setFilterOption,
+			} }
+		>
+			{ children }
+		</SiteSubscriptionsQueryProps.Provider>
+	);
+};
+
+export const useSiteSubscriptionsQueryProps = () => {
+	// Allow for usage without enclosing SiteSubscriptionsQueryPropsProvider
+	return useContext( SiteSubscriptionsQueryProps );
+};

package/src/reader/contexts/unsubscribed-feeds-search.tsx

@@ -0,0 +1,35 @@
+import React, { createContext, useContext, ReactNode, useMemo } from 'react';
+import useReadFeedSearchQuery, { FeedItem } from '../queries/use-read-feed-search-query';
+import { useSiteSubscriptionsQueryProps } from './site-subscriptions-query-props';
+
+type UnsubscribedFeedsSearch = {
+	feedItems: FeedItem[];
+	searchQueryResult: ReturnType< typeof useReadFeedSearchQuery >;
+};
+
+const UnsubscribedFeedsSearchContext = createContext< UnsubscribedFeedsSearch | undefined >(
+	undefined
+);
+
+export const UnsubscribedFeedsSearchProvider: React.FC< { children: ReactNode } > = ( {
+	children,
+} ) => {
+	const { searchTerm } = useSiteSubscriptionsQueryProps();
+	const searchQueryResult = useReadFeedSearchQuery( { query: searchTerm, excludeFollowed: true } );
+	const feedItems = useMemo( () => {
+		if ( searchTerm === '' ) {
+			return [];
+		}
+		return searchQueryResult.data?.pages?.[ 0 ]?.feeds || [];
+	}, [ searchTerm, searchQueryResult.data?.pages ] );
+
+	return (
+		<UnsubscribedFeedsSearchContext.Provider value={ { feedItems, searchQueryResult } }>
+			{ children }
+		</UnsubscribedFeedsSearchContext.Provider>
+	);
+};
+
+export const useUnsubscribedFeedsSearch = () => {
+	return useContext( UnsubscribedFeedsSearchContext );
+};

package/src/reader/helpers/index.ts

@@ -0,0 +1,127 @@
+import apiFetch, { APIFetchOptions } from '@wordpress/api-fetch';
+import wpcomRequest from 'wpcom-proxy-request';
+import isValidId from './validators';
+
+type callApiParams = {
+	apiNamespace?: string;
+	path: string;
+	method?: 'GET' | 'POST';
+	body?: object;
+	isLoggedIn?: boolean;
+	apiVersion?: string;
+};
+
+// Get cookie named subkey
+const getSubkey = () => {
+	return window.currentUser?.subscriptionManagementSubkey;
+};
+
+// Helper function for fetching from subkey authenticated API. Subkey authentication process is only applied in case of logged-out users.
+async function callApi< ReturnType >( {
+	apiNamespace = '',
+	path,
+	method = 'GET',
+	body,
+	isLoggedIn = false,
+	apiVersion = '1.1',
+}: callApiParams ): Promise< ReturnType > {
+	if ( isLoggedIn ) {
+		const res = await wpcomRequest( {
+			apiNamespace,
+			path,
+			apiVersion,
+			method,
+			body: method === 'POST' ? body : undefined,
+		} );
+		return res as ReturnType;
+	}
+
+	const subkey = getSubkey();
+
+	if ( ! subkey ) {
+		throw new Error( 'Subkey not found' );
+	}
+
+	const apiPath =
+		apiVersion === '2'
+			? `https://public-api.wordpress.com/wpcom/v2${ path }`
+			: `https://public-api.wordpress.com/rest/v${ apiVersion }${ path }`;
+
+	return apiFetch( {
+		global: true,
+		path: apiPath,
+		apiVersion,
+		method,
+		body: method === 'POST' ? JSON.stringify( body ) : undefined,
+		credentials: 'same-origin',
+		headers: {
+			Authorization: `X-WPSUBKEY ${ encodeURIComponent( subkey ) }`,
+			'Content-Type': 'application/json',
+		},
+	} as APIFetchOptions );
+}
+
+interface PagedResult< T > {
+	pages: T[];
+	pageParams: number;
+}
+
+type KeyedObject< K extends string, T > = {
+	[ key in K ]: T[];
+};
+
+const applyCallbackToPages = < K extends string, T >(
+	pagedResult: PagedResult< KeyedObject< K, T > > | undefined,
+	callback: ( page: KeyedObject< K, T > ) => KeyedObject< K, T >
+): PagedResult< KeyedObject< K, T > > | undefined => {
+	if ( ! pagedResult ) {
+		return undefined;
+	}
+	return {
+		pages: pagedResult.pages.map( ( page ) => callback( page ) ),
+		pageParams: pagedResult.pageParams,
+	};
+};
+
+// Subscriptions Management helper function to determine which API endpoint to call based on whether the user is logged in or not.
+const getSubscriptionMutationParams = (
+	action: 'new' | 'delete',
+	isLoggedIn: boolean,
+	blogId?: number | string,
+	url?: string,
+	emailId?: string,
+	subscriptionId?: number
+) => {
+	if ( isLoggedIn ) {
+		const isSubscriptionIdValid = isValidId( subscriptionId );
+		if ( ! isSubscriptionIdValid && ! url ) {
+			throw new Error( 'Subscription ID or URL is required to subscribe' );
+		}
+
+		return {
+			path: `/read/following/mine/${ action }`,
+			apiVersion: '1.1',
+			body: {
+				source: 'calypso',
+				...( isSubscriptionIdValid ? { sub_id: subscriptionId } : { url } ),
+				...( emailId ? { email_id: emailId } : {} ),
+				...( blogId ? { blog_id: blogId } : {} ),
+			},
+		};
+	}
+
+	if ( ! blogId ) {
+		throw new Error( 'Blog ID is required for non-wpcom user to subscribe' );
+	}
+
+	return {
+		path: `/read/site/${ blogId }/post_email_subscriptions/${ action }`,
+		apiVersion: '1.2',
+		body: { ...( emailId ? { email_id: emailId } : {} ) },
+	};
+};
+
+export { callApi, applyCallbackToPages, getSubkey, getSubscriptionMutationParams };
+export { default as buildQueryKey } from './query-key';
+export { isErrorResponse, isSiteSubscriptionDetails } from './type-guards';
+export { default as isValidId } from './validators';

package/src/reader/helpers/optimistic-update.ts

@@ -0,0 +1,85 @@
+import { QueryClient } from '@tanstack/react-query';
+import { SiteSubscriptionDetails } from '../types';
+import { buildQueryKey } from './index';
+
+type SiteSubScriptionDetailsParameters = {
+	blogId: string;
+	subscriptionId: string;
+	isLoggedIn: boolean;
+	id?: number;
+};
+
+type CacheKey = ( string | number | boolean | undefined )[];
+
+type PreviousData = {
+	key: CacheKey;
+	data: SiteSubscriptionDetails;
+};
+
+type UpdateFn = ( previousData: SiteSubscriptionDetails ) => SiteSubscriptionDetails;
+
+const alterSiteSubscriptionDetails = async (
+	queryClient: QueryClient,
+	{ blogId, subscriptionId, isLoggedIn, id }: SiteSubScriptionDetailsParameters,
+	updater: UpdateFn
+) => {
+	const keys: CacheKey[] = [];
+	const previousData: PreviousData[] = [];
+
+	keys.push(
+		buildQueryKey( [ 'read', 'site-subscription-details', String( blogId ), '' ], isLoggedIn, id )
+	);
+
+	keys.push(
+		buildQueryKey(
+			[ 'read', 'site-subscription-details', String( blogId ), String( subscriptionId ) ],
+			isLoggedIn,
+			id
+		)
+	);
+
+	keys.push(
+		buildQueryKey(
+			[ 'read', 'site-subscription-details', '', String( subscriptionId ) ],
+			isLoggedIn,
+			id
+		)
+	);
+
+	keys.push( [ 'read', 'subscriptions', subscriptionId, isLoggedIn, id ] );
+
+	for ( const key of keys ) {
+		await queryClient.cancelQueries( { queryKey: key } );
+
+		const previousDataForKey = queryClient.getQueryData< SiteSubscriptionDetails >( key );
+		if ( previousDataForKey ) {
+			previousData.push( { key, data: previousDataForKey } );
+			const updatedData = updater( previousDataForKey as SiteSubscriptionDetails );
+			queryClient.setQueryData( key, updatedData );
+		}
+	}
+
+	return previousData;
+};
+
+const invalidateSiteSubscriptionDetails = (
+	queryClient: QueryClient,
+	{ blogId, subscriptionId, isLoggedIn, id }: SiteSubScriptionDetailsParameters
+) => {
+	queryClient.invalidateQueries( { queryKey: [ 'read', 'site-subscriptions' ] } );
+	queryClient.invalidateQueries( {
+		queryKey: buildQueryKey( [ 'read', 'site-subscription-details', blogId ], isLoggedIn, id ),
+	} );
+	queryClient.invalidateQueries( {
+		queryKey: buildQueryKey( [ 'read', 'site-subscription-details', blogId, '' ], isLoggedIn, id ),
+	} );
+	queryClient.invalidateQueries( {
+		queryKey: buildQueryKey(
+			[ 'read', 'site-subscription-details', '', subscriptionId ],
+			isLoggedIn,
+			id
+		),
+	} );
+};
+
+export { alterSiteSubscriptionDetails, invalidateSiteSubscriptionDetails };

package/src/reader/helpers/query-key.ts

@@ -0,0 +1,17 @@
+// change version to invalidate all cache keys
+export const version = 'v1';
+
+const buildQueryKey = (
+	keyPrefix: ( number | string )[],
+	isLoggedIn: boolean,
+	userId?: number
+) => {
+	return [
+		...keyPrefix,
+		version,
+		isLoggedIn ? 'logged-in' : 'not-logged-in',
+		userId ? userId : '',
+	];
+};
+
+export default buildQueryKey;

package/src/reader/helpers/type-guards.ts

@@ -0,0 +1,35 @@
+import {
+	ErrorResponse,
+	SiteSubscriptionDetails,
+	SiteSubscriptionDetailsErrorResponse,
+} from '../types';
+
+export const isErrorResponse = ( response: unknown ): response is ErrorResponse => {
+	return (
+		typeof response === 'object' &&
+		response !== null &&
+		( 'errors' in response || 'error_data' in response )
+	);
+};
+
+export const isSiteSubscriptionDetails = (
+	obj: unknown
+): obj is SiteSubscriptionDetails< string > => {
+	if ( ! obj || typeof obj !== 'object' ) {
+		return false;
+	}
+
+	const siteSubscriptionDetails = obj as SiteSubscriptionDetails;
+	return (
+		typeof siteSubscriptionDetails?.ID === 'number' &&
+		typeof siteSubscriptionDetails?.blog_ID === 'number' &&
+		typeof siteSubscriptionDetails?.name === 'string' &&
+		typeof siteSubscriptionDetails?.URL === 'string'
+	);
+};
+
+export const isSiteSubscriptionDetailsErrorResponse = (
+	obj: unknown
+): obj is SiteSubscriptionDetailsErrorResponse => {
+	return isErrorResponse( obj );
+};

package/src/reader/helpers/validators.ts

@@ -0,0 +1,34 @@
+/**
+ * This function checks if a given ID is valid.
+ * @param {number | string | undefined} id - The ID to be validated. It can be of type number, string, or undefined.
+ * @returns {boolean} The function returns true if the ID is valid, false otherwise.
+ *
+ * An ID is considered valid if it meets the following criteria:
+ * - If it's a number, it must be a positive integer (including 0).
+ * - If it's a string, it must contain only digits and represent a positive integer (including 0) when converted to a number.
+ *
+ * If the ID is undefined or does not meet the above criteria, the function returns false.
+ */
+export const isValidId = ( id?: unknown ): id is number | string => {
+	if ( id === undefined ) {
+		return false;
+	}
+
+	if ( typeof id === 'number' ) {
+		return Number.isInteger( id ) && id >= 0;
+	}
+
+	if ( typeof id === 'string' ) {
+		// Check if the string contains only digits
+		const isOnlyDigits = /^[0-9]+$/.test( id );
+		if ( isOnlyDigits ) {
+			// If it contains only digits, convert it to a number and check if it's a positive integer or 0
+			const num = Number( id );
+			return Number.isInteger( num ) && num >= 0;
+		}
+	}
+
+	return false;
+};
+
+export default isValidId;

package/src/reader/hooks/index.ts

@@ -0,0 +1,4 @@
+export { default as useIsLoggedIn } from './use-is-logged-in';
+export { default as useIsQueryEnabled } from './use-is-query-enabled';
+export { default as useSubscriberEmailAddress } from './use-subscriber-email-address';
+export { default as useCacheKey } from './use-cache-key';

package/src/reader/hooks/use-cache-key.ts

@@ -0,0 +1,9 @@
+import buildQueryKey from '../helpers/query-key';
+import useIsLoggedIn from './use-is-logged-in';
+
+const useCacheKey = ( keyPrefix: ( number | string )[] ) => {
+	const { id, isLoggedIn } = useIsLoggedIn();
+	return buildQueryKey( keyPrefix, isLoggedIn, id );
+};
+
+export default useCacheKey;

package/src/reader/hooks/use-is-logged-in.ts

@@ -0,0 +1,22 @@
+import { useSelect } from '@wordpress/data';
+import { register as registerUserStore } from '../../user';
+import type { UserSelect } from '../../user';
+
+const USER_STORE = registerUserStore();
+
+const useIsLoggedIn = () => {
+	const currentUser = useSelect(
+		( select ) => ( select( USER_STORE ) as UserSelect ).getCurrentUser(),
+		[]
+	);
+
+	return {
+		id: currentUser?.ID,
+		isLoggedIn: useSelect(
+			( select ) => ( select( USER_STORE ) as UserSelect ).isCurrentUserLoggedIn(),
+			[]
+		),
+	};
+};
+
+export default useIsLoggedIn;

package/src/reader/hooks/use-is-query-enabled.ts

@@ -0,0 +1,13 @@
+import { getSubkey } from '../helpers';
+import { useIsLoggedIn } from '.';
+
+const useIsQueryEnabled = () => {
+	const { isLoggedIn } = useIsLoggedIn();
+	if ( isLoggedIn || getSubkey() ) {
+		return true;
+	}
+
+	return false;
+};
+
+export default useIsQueryEnabled;

package/src/reader/hooks/use-subscriber-email-address.ts

@@ -0,0 +1,25 @@
+import { useMemo } from '@wordpress/element';
+import { getSubkey } from '../helpers';
+
+// Get subscriber's email address based on the subkey cookie
+const useSubscriberEmailAddress = () => {
+	const subkey = getSubkey();
+
+	return useMemo( () => {
+		if ( ! subkey ) {
+			return null;
+		}
+
+		const decodedSubkeyValue = decodeURIComponent( subkey );
+
+		const firstPeriodIndex = decodedSubkeyValue.indexOf( '.' );
+		if ( firstPeriodIndex === -1 ) {
+			return null;
+		}
+
+		const emailAddress = decodedSubkeyValue.slice( firstPeriodIndex + 1 );
+		return emailAddress;
+	}, [ subkey ] );
+};
+
+export default useSubscriberEmailAddress;

package/src/reader/index.ts

@@ -1,36 +1,70 @@
-import { plugins, registerStore, use } from '@wordpress/data';
-import { controls } from '../wpcom-request-controls';
-import * as actions from './actions';
-import { STORE_KEY } from './constants';
-import persistOptions from './persist';
-import reducer, { State } from './reducer';
-import * as resolvers from './resolvers';
-import * as selectors from './selectors';
-import type { SelectFromMap, DispatchFromMap } from '../mapped-types';
+import { SiteSubscriptionsQueryPropsProvider, useSiteSubscriptionsQueryProps } from './contexts';
+import { useCacheKey, useIsLoggedIn, useSubscriberEmailAddress } from './hooks';
+import {
+	usePendingPostConfirmMutation,
+	usePendingPostDeleteMutation,
+	usePendingSiteConfirmMutation,
+	usePendingSiteDeleteMutation,
+	usePostNotifyMeOfNewCommentsMutation,
+	usePostUnsubscribeMutation,
+	useSiteDeliveryFrequencyMutation,
+	useSiteEmailMeNewCommentsMutation,
+	useSiteEmailMeNewPostsMutation,
+	useSiteNotifyMeOfNewPostsMutation,
+	useSiteSubscribeMutation,
+	useSiteUnsubscribeMutation,
+	useUserSettingsMutation,
+} from './mutations';
+import {
+	siteSubscriptionsQueryKeyPrefix,
+	usePendingPostSubscriptionsQuery,
+	usePendingSiteSubscriptionsQuery,
+	usePostSubscriptionsQuery,
+	useSiteSubscriptionDetailsQuery,
+	useSiteSubscriptionsQuery,
+	useSubscriptionsCountQuery,
+	useUserSettingsQuery,
+} from './queries';
 
-export type { State };
-export { STORE_KEY };
+export const SubscriptionManager = {
+	SiteSubscriptionsQueryPropsProvider,
+	siteSubscriptionsQueryKeyPrefix,
+	useCacheKey,
+	useIsLoggedIn,
+	usePendingPostConfirmMutation,
+	usePendingPostDeleteMutation,
+	usePendingPostSubscriptionsQuery,
+	usePendingSiteConfirmMutation,
+	usePendingSiteDeleteMutation,
+	usePendingSiteSubscriptionsQuery,
+	usePostNotifyMeOfNewCommentsMutation,
+	usePostSubscriptionsQuery,
+	usePostUnsubscribeMutation,
+	useSiteDeliveryFrequencyMutation,
+	useSiteEmailMeNewCommentsMutation,
+	useSiteEmailMeNewPostsMutation,
+	useSiteNotifyMeOfNewPostsMutation,
+	useSiteSubscribeMutation,
+	useSiteSubscriptionDetailsQuery,
+	useSiteSubscriptionsQuery,
+	useSiteSubscriptionsQueryProps,
+	useSiteUnsubscribeMutation,
+	useSubscriberEmailAddress,
+	useSubscriptionsCountQuery,
+	useUserSettingsMutation,
+	useUserSettingsQuery,
+};
 
-use( plugins.persistence, persistOptions );
+export { useIsLoggedIn };
+export {
+	EmailDeliveryFrequency,
+	PostSubscriptionsSortBy,
+	SiteSubscriptionsFilterBy,
+	SiteSubscriptionsSortBy,
+} from './constants';
+export { callApi, isErrorResponse, isSiteSubscriptionDetails, isValidId } from './helpers';
+export { UnsubscribedFeedsSearchProvider, useUnsubscribedFeedsSearch } from './contexts';
+export { useReadFeedSearchQuery, useReadFeedSiteQuery, useReadFeedQuery } from './queries';
 
-let isRegistered = false;
-
-export function register(): typeof STORE_KEY {
-	if ( ! isRegistered ) {
-		isRegistered = true;
-		registerStore< State >( STORE_KEY, {
-			actions,
-			controls: controls as any,
-			reducer: reducer as any,
-			resolvers,
-			selectors,
-			persist: [ 'teams' ],
-		} );
-	}
-	return STORE_KEY;
-}
-
-declare module '@wordpress/data' {
-	function dispatch( key: typeof STORE_KEY ): DispatchFromMap< typeof actions >;
-	function select( key: typeof STORE_KEY ): SelectFromMap< typeof selectors >;
-}
+export * from './types';
+export type { FeedItem } from './queries';

package/src/reader/mutations/index.ts

@@ -0,0 +1,13 @@
+export { default as usePostUnsubscribeMutation } from './use-post-unsubscribe-mutation';
+export { default as useSiteDeliveryFrequencyMutation } from './use-site-delivery-frequency-mutation';
+export { default as useSiteSubscribeMutation } from './use-site-subscribe-mutation';
+export { default as useSiteUnsubscribeMutation } from './use-site-unsubscribe-mutation';
+export { default as useUserSettingsMutation } from './use-user-settings-mutation';
+export { default as usePendingSiteConfirmMutation } from './use-pending-site-confirm-mutation';
+export { default as usePendingSiteDeleteMutation } from './use-pending-site-delete-mutation';
+export { default as usePendingPostConfirmMutation } from './use-pending-post-confirm-mutation';
+export { default as usePendingPostDeleteMutation } from './use-pending-post-delete-mutation';
+export { default as useSiteNotifyMeOfNewPostsMutation } from './use-site-notify-me-of-new-posts-mutation';
+export { default as useSiteEmailMeNewPostsMutation } from './use-site-email-me-new-posts-mutation';
+export { default as useSiteEmailMeNewCommentsMutation } from './use-site-email-me-new-comments-mutation';
+export { default as usePostNotifyMeOfNewCommentsMutation } from './use-post-notify-me-of-new-comments-mutation';

package/src/reader/mutations/test/use-site-delivery-frequency-mutation.test.tsx

@@ -0,0 +1,66 @@
+/**
+ * @jest-environment jsdom
+ */
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, waitFor } from '@testing-library/react';
+import React, { useEffect } from 'react';
+import { EmailDeliveryFrequency } from '../../constants';
+import { callApi } from '../../helpers';
+import useSiteDeliveryFrequencyMutation from '../../mutations/use-site-delivery-frequency-mutation';
+
+// Mock the useIsLoggedIn function
+jest.mock( '../../hooks', () => ( {
+	useIsLoggedIn: jest.fn().mockReturnValue( { isLoggedIn: true } ),
+	useCacheKey: jest.fn(),
+} ) );
+
+// Mock the entire Helpers module
+jest.mock( '../../helpers', () => ( {
+	callApi: jest.fn(),
+	applyCallbackToPages: jest.fn(),
+	buildQueryKey: jest.fn(),
+} ) );
+
+const client = new QueryClient();
+const Parent = ( { children } ) => (
+	<QueryClientProvider client={ client }>{ children }</QueryClientProvider>
+);
+
+describe( 'useSiteDeliveryFrequencyMutation()', () => {
+	it( 'calls the right API', async () => {
+		const Skeleton = () => {
+			const { mutate } = useSiteDeliveryFrequencyMutation();
+			useEffect( () => {
+				mutate( {
+					delivery_frequency: EmailDeliveryFrequency.Daily,
+					blog_id: '123',
+					subscriptionId: 456,
+				} );
+			}, [ mutate ] );
+
+			return <p></p>;
+		};
+
+		( callApi as jest.Mock ).mockResolvedValue( {
+			success: true,
+		} );
+
+		render(
+			<Parent>
+				<Skeleton />
+			</Parent>
+		);
+
+		await waitFor( () =>
+			expect( callApi ).toHaveBeenCalledWith( {
+				apiVersion: '1.2',
+				path: '/read/site/123/post_email_subscriptions/update',
+				body: {
+					delivery_frequency: 'daily',
+				},
+				isLoggedIn: true,
+				method: 'POST',
+			} )
+		);
+	} );
+} );