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

package/src/reader/queries/test/use-site-subscriptions-query.tsx

@@ -0,0 +1,180 @@
+/**
+ * @jest-environment jsdom
+ */
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { renderHook, waitFor } from '@testing-library/react';
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { SiteSubscriptionsSortBy } from '../../constants';
+import {
+	SiteSubscriptionsQueryPropsProvider,
+	useSiteSubscriptionsQueryProps,
+} from '../../contexts';
+import { callApi, getSubkey } from '../../helpers';
+import useSiteSubscriptionsQuery from '../../queries/use-site-subscriptions-query';
+
+jest.mock( '../../helpers', () => ( {
+	callApi: jest.fn(),
+	getSubkey: jest.fn(),
+} ) );
+
+const queryClient = new QueryClient();
+
+const wrapper = ( { children } ) => (
+	<QueryClientProvider client={ queryClient }>
+		<SiteSubscriptionsQueryPropsProvider>{ children }</SiteSubscriptionsQueryPropsProvider>
+	</QueryClientProvider>
+);
+
+describe( 'useSiteSubscriptionsQuery hook', () => {
+	beforeEach( () => {
+		queryClient.clear();
+		jest.resetAllMocks();
+
+		( getSubkey as jest.Mock ).mockReturnValue( () => 'test-key' );
+	} );
+
+	it( 'fetches subscriptions data with multiple pages', async () => {
+		( callApi as jest.Mock ).mockResolvedValueOnce( {
+			subscriptions: [
+				{ id: '1', name: 'Site 1', URL: 'https://site1.example.com' },
+				{ id: '2', name: 'Site 2', URL: 'https://site2.example.com' },
+			],
+			page: 1,
+			total_subscriptions: 6,
+		} );
+		( callApi as jest.Mock ).mockResolvedValueOnce( {
+			subscriptions: [
+				{ id: '3', name: 'Site 3', URL: 'https://site3.example.com' },
+				{ id: '4', name: 'Site 4', URL: 'https://site4.example.com' },
+			],
+			page: 2,
+			total_subscriptions: 6,
+		} );
+		( callApi as jest.Mock ).mockResolvedValueOnce( {
+			subscriptions: [
+				{ id: '5', name: 'Site 5', URL: 'https://site5.example.com' },
+				{ id: '6', name: 'Site 6', URL: 'https://site6.example.com' },
+			],
+			page: 3,
+			total_subscriptions: 6,
+		} );
+
+		const { result } = renderHook( () => useSiteSubscriptionsQuery( { number: 2 } ), {
+			wrapper,
+		} );
+
+		await waitFor( () => {
+			expect( callApi ).toHaveBeenCalledTimes( 3 );
+			expect( result.current.data.subscriptions.length ).toBe( 6 );
+			expect( result.current.data.totalCount ).toBe( 6 );
+		} );
+	} );
+
+	it( 'fetches subscriptions data with search term', async () => {
+		( callApi as jest.Mock ).mockResolvedValue( {
+			subscriptions: [
+				{ id: '1', name: 'Site 1', URL: 'https://site1.example.com' },
+				{ id: '2', name: 'Site 2', URL: 'https://site2.example.com' },
+			],
+			page: 1,
+			total_subscriptions: 2,
+		} );
+
+		const { result } = renderHook(
+			() => {
+				const { setSearchTerm, searchTerm } = useSiteSubscriptionsQueryProps();
+				const { data, isLoading } = useSiteSubscriptionsQuery();
+				return { setSearchTerm, searchTerm, data, isLoading };
+			},
+			{
+				wrapper,
+			}
+		);
+
+		await waitFor( () => expect( result.current.isLoading ).toBe( false ) );
+
+		act( () => result.current.setSearchTerm( 'te 1' ) );
+		await waitFor( () => expect( result.current.searchTerm ).toBe( 'te 1' ) );
+
+		expect( callApi ).toHaveBeenCalledTimes( 1 );
+		expect( result.current.data.subscriptions.length ).toBe( 1 );
+		expect( result.current.data.subscriptions[ 0 ].name ).toBe( 'Site 1' );
+		expect( result.current.data.totalCount ).toBe( 2 );
+	} );
+
+	it.each( [
+		{
+			sortTerm: SiteSubscriptionsSortBy.SiteName,
+			expectedResult: [
+				{ ID: '2', name: "Arnold's site" },
+				{ ID: '3', name: "Maciej's site" },
+				{ ID: '1', name: "Zorro's site" },
+			],
+		},
+		{
+			sortTerm: SiteSubscriptionsSortBy.DateSubscribed,
+			expectedResult: [
+				{ ID: '3', date_subscribed: '2023-04-18T17:00:00+00:00' },
+				{ ID: '2', date_subscribed: '2023-04-18T12:00:00+00:00' },
+				{ ID: '1', date_subscribed: '2022-01-18T00:00:00+00:00' },
+			],
+		},
+		{
+			sortTerm: SiteSubscriptionsSortBy.LastUpdated,
+			expectedResult: [
+				{ ID: '1', last_updated: '2023-04-18T19:00:00+00:00' },
+				{ ID: '3', last_updated: '2023-04-18T17:00:00+00:00' },
+				{ ID: '2', last_updated: '2023-04-18T12:00:00+00:00' },
+			],
+		},
+	] )( 'Applies sorting to the subscriptions returned', async ( { sortTerm, expectedResult } ) => {
+		( callApi as jest.Mock ).mockResolvedValue( {
+			subscriptions: [
+				{
+					ID: '1',
+					name: "Zorro's site",
+					URL: 'https://site2.example.com',
+					date_subscribed: '2022-01-18T00:00:00+00:00',
+					last_updated: '2023-04-18T19:00:00+00:00',
+				},
+				{
+					ID: '3',
+					name: "Maciej's site",
+					URL: 'https://site2.example.com',
+					date_subscribed: '2023-04-18T17:00:00+00:00',
+					last_updated: '2023-04-18T17:00:00+00:00',
+				},
+				{
+					ID: '2',
+					name: "Arnold's site",
+					URL: 'https://site1.example.com',
+					date_subscribed: '2023-04-18T12:00:00+00:00',
+					last_updated: '2023-04-18T12:00:00+00:00',
+				},
+			],
+			page: 1,
+			total_subscriptions: 3,
+		} );
+
+		const { result } = renderHook(
+			() => {
+				const { setSortTerm, sortTerm } = useSiteSubscriptionsQueryProps();
+				const { data, isLoading } = useSiteSubscriptionsQuery();
+				return { data, isLoading, setSortTerm, sortTerm };
+			},
+			{
+				wrapper,
+			}
+		);
+
+		await waitFor( () => expect( result.current.isLoading ).toBe( false ) );
+		act( () => result.current.setSortTerm( sortTerm ) );
+		await waitFor( () => expect( result.current.sortTerm ).toBe( sortTerm ) );
+
+		expect( callApi ).toHaveBeenCalledTimes( 1 );
+		result.current.data.subscriptions.forEach( ( subscription, index ) => {
+			expect( subscription.ID ).toEqual( expectedResult[ index ].ID );
+		} );
+	} );
+} );

package/src/reader/queries/use-pending-post-subscriptions-query.ts

@@ -0,0 +1,72 @@
+import { useQuery } from '@tanstack/react-query';
+import { callApi } from '../helpers';
+import { useIsLoggedIn, useIsQueryEnabled } from '../hooks';
+import type { PendingPostSubscription, PendingPostSubscriptionsResult } from '../types';
+
+type SubscriptionManagerPendingPostSubscriptions = {
+	comment_subscriptions: PendingPostSubscription[];
+	total_comment_subscriptions_count: number;
+};
+
+type SubscriptionManagerPendingPostSubscriptionsQueryProps = {
+	filter?: ( item?: PendingPostSubscription ) => boolean;
+	sort?: ( a?: PendingPostSubscription, b?: PendingPostSubscription ) => number;
+};
+
+const callPendingBlogSubscriptionsEndpoint = async (
+	isLoggedIn: boolean
+): Promise< PendingPostSubscriptionsResult > => {
+	const pendingPosts = [];
+	const perPage = 1000; // TODO: This is a temporary workaround to get all pending subscriptions. We should remove this once we decide how to handle pagination.
+
+	const incoming = await callApi< SubscriptionManagerPendingPostSubscriptions >( {
+		path: `/post-comment-subscriptions?status=pending&per_page=${ perPage }`,
+		apiNamespace: 'wpcom/v2',
+		apiVersion: '2',
+		isLoggedIn,
+	} );
+
+	if ( incoming && incoming.comment_subscriptions ) {
+		pendingPosts.push(
+			...incoming.comment_subscriptions.map( ( pendingSubscription ) => ( {
+				...pendingSubscription,
+				date_subscribed: new Date( pendingSubscription.date_subscribed ),
+			} ) )
+		);
+	}
+
+	return {
+		pendingPosts,
+		totalCount: incoming?.total_comment_subscriptions_count ?? 0,
+	};
+};
+
+const defaultFilter = () => true;
+const defaultSort = () => 0;
+
+const usePendingPostSubscriptionsQuery = ( {
+	filter = defaultFilter,
+	sort = defaultSort,
+}: SubscriptionManagerPendingPostSubscriptionsQueryProps = {} ) => {
+	const { isLoggedIn } = useIsLoggedIn();
+	const enabled = useIsQueryEnabled();
+
+	const { data, ...rest } = useQuery< PendingPostSubscriptionsResult >( {
+		queryKey: [ 'read', 'pending-post-subscriptions', isLoggedIn ],
+		queryFn: async () => {
+			return await callPendingBlogSubscriptionsEndpoint( isLoggedIn );
+		},
+		enabled,
+		refetchOnWindowFocus: false,
+	} );
+
+	return {
+		data: {
+			pendingPosts: data?.pendingPosts?.filter( filter ).sort( sort ),
+			totalCount: data?.totalCount,
+		},
+		...rest,
+	};
+};
+
+export default usePendingPostSubscriptionsQuery;

package/src/reader/queries/use-pending-site-subscriptions-query.ts

@@ -0,0 +1,72 @@
+import { useQuery } from '@tanstack/react-query';
+import { callApi } from '../helpers';
+import { useIsLoggedIn, useIsQueryEnabled } from '../hooks';
+import type { PendingSiteSubscription, PendingSiteSubscriptionsResult } from '../types';
+
+type SubscriptionManagerPendingSiteSubscriptions = {
+	pending_blog_subscriptions: PendingSiteSubscription[];
+	total_pending_blog_subscriptions_count: string; // TODO: This should be a number, but the API returns a string.
+};
+
+type SubscriptionManagerPendingSiteSubscriptionsQueryProps = {
+	filter?: ( item?: PendingSiteSubscription ) => boolean;
+	sort?: ( a?: PendingSiteSubscription, b?: PendingSiteSubscription ) => number;
+};
+
+const callPendingSiteSubscriptionsEndpoint = async (
+	isLoggedIn: boolean
+): Promise< PendingSiteSubscriptionsResult > => {
+	const pendingSites = [];
+	const perPage = 1000; // TODO: This is a temporary workaround to get all pending subscriptions. We should remove this once we decide how to handle pagination.
+
+	const incoming = await callApi< SubscriptionManagerPendingSiteSubscriptions >( {
+		path: `/pending-blog-subscriptions?per_page=${ perPage }`,
+		apiNamespace: 'wpcom/v2',
+		apiVersion: '2',
+		isLoggedIn,
+	} );
+
+	if ( incoming && incoming.pending_blog_subscriptions ) {
+		pendingSites.push(
+			...incoming.pending_blog_subscriptions.map( ( pendingSubscription ) => ( {
+				...pendingSubscription,
+				date_subscribed: new Date( pendingSubscription.date_subscribed ),
+			} ) )
+		);
+	}
+
+	return {
+		pendingSites,
+		totalCount: parseInt( incoming?.total_pending_blog_subscriptions_count ?? 0 ),
+	};
+};
+
+const defaultFilter = () => true;
+const defaultSort = () => 0;
+
+const usePendingSiteSubscriptionsQuery = ( {
+	filter = defaultFilter,
+	sort = defaultSort,
+}: SubscriptionManagerPendingSiteSubscriptionsQueryProps = {} ) => {
+	const { isLoggedIn } = useIsLoggedIn();
+	const enabled = useIsQueryEnabled();
+
+	const { data, ...rest } = useQuery< PendingSiteSubscriptionsResult >( {
+		queryKey: [ 'read', 'pending-site-subscriptions', isLoggedIn ],
+		queryFn: async () => {
+			return await callPendingSiteSubscriptionsEndpoint( isLoggedIn );
+		},
+		enabled,
+		refetchOnWindowFocus: false,
+	} );
+
+	return {
+		data: {
+			pendingSites: data?.pendingSites?.filter( filter ).sort( sort ),
+			totalCount: data?.totalCount,
+		},
+		...rest,
+	};
+};
+
+export default usePendingSiteSubscriptionsQuery;

package/src/reader/queries/use-post-subscriptions-query.ts

@@ -0,0 +1,135 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { useCallback, useEffect, useMemo } from 'react';
+import { PostSubscriptionsSortBy, SiteSubscriptionsFilterBy } from '../constants';
+import { callApi } from '../helpers';
+import { useCacheKey, useIsLoggedIn, useIsQueryEnabled } from '../hooks';
+import type { PostSubscription } from '../types';
+
+export const postSubscriptionsQueryKeyPrefix = [ 'read', 'post-subscriptions' ];
+
+type SubscriptionManagerPostSubscriptions = {
+	comment_subscriptions: PostSubscription[];
+	total_comment_subscriptions_count: number;
+};
+
+type PostSubscriptionsQueryProps = {
+	searchTerm?: string;
+	filterOption?: SiteSubscriptionsFilterBy;
+	sortTerm?: PostSubscriptionsSortBy;
+	number?: number;
+};
+
+const sortByPostName = ( a: PostSubscription, b: PostSubscription ) =>
+	a.post_title.localeCompare( b.post_title );
+
+const sortByRecentlySubscribed = ( a: PostSubscription, b: PostSubscription ) =>
+	b.date_subscribed.getTime() - a.date_subscribed.getTime();
+
+const getSortFunction = ( sortTerm: PostSubscriptionsSortBy ) => {
+	switch ( sortTerm ) {
+		case PostSubscriptionsSortBy.PostName:
+			return sortByPostName;
+		default:
+		case PostSubscriptionsSortBy.RecentlySubscribed:
+			return sortByRecentlySubscribed;
+	}
+};
+
+const usePostSubscriptionsQuery = ( {
+	searchTerm = '',
+	filterOption = SiteSubscriptionsFilterBy.All,
+	sortTerm = PostSubscriptionsSortBy.RecentlySubscribed,
+	number = 500,
+}: PostSubscriptionsQueryProps = {} ) => {
+	const { isLoggedIn } = useIsLoggedIn();
+	const enabled = useIsQueryEnabled();
+	const cacheKey = useCacheKey( postSubscriptionsQueryKeyPrefix );
+
+	const infiniteQuery = useInfiniteQuery< SubscriptionManagerPostSubscriptions >( {
+		queryKey: cacheKey,
+		queryFn: async ( { pageParam } ) => {
+			const result = await callApi< SubscriptionManagerPostSubscriptions >( {
+				path: `/post-comment-subscriptions?per_page=${ number }&page=${ pageParam }`,
+				isLoggedIn,
+				apiVersion: '2',
+				apiNamespace: 'wpcom/v2',
+			} );
+
+			return result;
+		},
+		enabled,
+		initialPageParam: 1,
+		getNextPageParam: ( lastPage, pages ) =>
+			pages.length * number >= lastPage.total_comment_subscriptions_count
+				? undefined
+				: pages.length + 1,
+		refetchOnWindowFocus: false,
+	} );
+
+	const { data, isFetching, isFetchingNextPage, fetchNextPage, hasNextPage } = infiniteQuery;
+
+	useEffect( () => {
+		if ( hasNextPage && ! isFetchingNextPage && ! isFetching ) {
+			fetchNextPage();
+		}
+	}, [ hasNextPage, isFetchingNextPage, isFetching, fetchNextPage ] );
+
+	const filterFunction = useCallback(
+		( item: PostSubscription ) => {
+			switch ( filterOption ) {
+				case SiteSubscriptionsFilterBy.Paid:
+					return item.is_paid_subscription;
+				case SiteSubscriptionsFilterBy.P2:
+					return item.is_wpforteams_site;
+				case SiteSubscriptionsFilterBy.All:
+				default:
+					return true;
+			}
+		},
+		[ filterOption ]
+	);
+
+	const outputData = useMemo( () => {
+		// Flatten all the pages into a single array containing all subscriptions
+		const flattenedData = data?.pages?.map( ( page ) => page.comment_subscriptions ).flat();
+
+		// TODO: Temporary fix for https://github.com/Automattic/wp-calypso/issues/76678, remove once fixed
+		const filteredData = flattenedData?.filter(
+			( comment_subscription ) => typeof comment_subscription?.post_url === 'string'
+		);
+
+		// Transform the dates into Date objects
+		const transformedData = filteredData?.map( ( comment_subscription ) => ( {
+			...comment_subscription,
+			date_subscribed: new Date( comment_subscription.date_subscribed ),
+		} ) );
+
+		const searchTermLowerCase = searchTerm.toLowerCase();
+
+		const searchFilter = ( item: PostSubscription ) =>
+			searchTermLowerCase
+				? item.post_title.toLocaleLowerCase().includes( searchTermLowerCase ) ||
+				  item.post_excerpt.toLocaleLowerCase().includes( searchTermLowerCase ) ||
+				  item.post_url.includes( searchTermLowerCase ) ||
+				  item.site_title.toLocaleLowerCase().includes( searchTermLowerCase )
+				: true;
+		const sort = getSortFunction( sortTerm );
+
+		return {
+			posts: transformedData
+				?.filter( ( item ) => item && filterFunction( item ) && searchFilter( item ) )
+				.sort( sort ),
+			totalCount: data?.pages?.[ 0 ]?.total_comment_subscriptions_count ?? 0,
+		};
+	}, [ data?.pages, filterFunction, searchTerm, sortTerm ] );
+
+	return {
+		...infiniteQuery,
+		data: outputData,
+		isFetchingNextPage,
+		isFetching,
+		hasNextPage,
+	};
+};
+
+export default usePostSubscriptionsQuery;

package/src/reader/queries/use-read-feed-query.ts

@@ -0,0 +1,43 @@
+import { useQuery } from '@tanstack/react-query';
+import wpcomRequest from 'wpcom-proxy-request';
+import { isValidId } from '../helpers';
+
+export type ReadFeedResponse = {
+	URL: string;
+	blog_ID: string;
+	description: string;
+	feed_ID: string;
+	feed_URL: string;
+	image: string;
+	is_following: boolean;
+	last_checked: string;
+	last_update: string;
+	marked_for_refresh: boolean;
+	meta: {
+		links: {
+			self: string;
+			[ key: string ]: string;
+		};
+	};
+	name: string;
+	next_refresh_time: string | null;
+	organization_id: number;
+	subscribers_count: number;
+	unseen_count: number;
+};
+
+const useReadFeedQuery = ( feedId?: number | string ) => {
+	return useQuery( {
+		queryKey: [ 'read', 'feeds', Number( feedId ) ],
+		queryFn: async () => {
+			return wpcomRequest< ReadFeedResponse >( {
+				path: `/read/feed/${ feedId }`,
+				apiVersion: '1.1',
+				method: 'GET',
+			} );
+		},
+		enabled: isValidId( feedId ),
+	} );
+};
+
+export default useReadFeedQuery;

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

@@ -0,0 +1,72 @@
+import { Railcar } from '@automattic/calypso-analytics';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { buildQueryString } from '@wordpress/url';
+import wpcomRequest from 'wpcom-proxy-request';
+
+export enum FeedSort {
+	LastUpdated = 'last_updated',
+	Relevance = 'relevance',
+}
+
+type ReadFeedSearchQueryProps = {
+	query?: string;
+	excludeFollowed?: boolean;
+	sort?: FeedSort;
+};
+
+export type FeedItem = {
+	URL?: string;
+	blog_ID?: string;
+	feed_ID?: string;
+	meta: {
+		links?: {
+			feed?: string;
+			site?: string;
+		};
+	};
+	railcar?: Railcar;
+	subscribe_URL: string;
+	subscribers_count?: number;
+	title?: string;
+};
+
+type FeedResponse = {
+	algorithm: string;
+	feeds: FeedItem[];
+	next_page: string;
+	total: number;
+};
+
+const useReadFeedSearchQuery = ( {
+	query,
+	excludeFollowed = false,
+	sort = FeedSort.Relevance,
+}: ReadFeedSearchQueryProps ) => {
+	return useInfiniteQuery( {
+		queryKey: [ 'read', 'feed', 'search', query, excludeFollowed, sort ],
+		queryFn: async ( { pageParam: pageParamQueryString } ) => {
+			if ( query === undefined ) {
+				return;
+			}
+
+			const urlQuery = buildQueryString( {
+				q: query,
+				exclude_followed: excludeFollowed,
+				sort,
+			} ).concat( pageParamQueryString ? `&${ pageParamQueryString }` : '' );
+
+			return wpcomRequest< FeedResponse >( {
+				path: '/read/feed',
+				apiVersion: '1.1',
+				method: 'GET',
+				query: urlQuery,
+			} );
+		},
+		enabled: Boolean( query ),
+		initialPageParam: '',
+		getNextPageParam: ( lastPage ) => lastPage?.next_page,
+		refetchOnWindowFocus: false,
+	} );
+};
+
+export default useReadFeedSearchQuery;

package/src/reader/queries/use-read-feed-site-query.ts

@@ -0,0 +1,35 @@
+import { useQuery } from '@tanstack/react-query';
+import { buildQueryString } from '@wordpress/url';
+import wpcomRequest from 'wpcom-proxy-request';
+
+export type ReadFeedSiteResponse = {
+	ID: number;
+	URL: string;
+	description: string;
+	feed_ID: number;
+	feed_URL?: string;
+	icon?: { ico: string; img: string };
+	is_following: boolean;
+};
+
+const urlQuery = buildQueryString( {
+	fields: [ 'ID', 'name', 'title', 'URL', 'icon', 'is_following', 'description' ].join( ',' ),
+	options: [ 'is_mapped_domain', 'unmapped_url', 'is_redirect' ].join( ',' ),
+} );
+
+const useReadFeedSiteQuery = ( siteId?: number ) => {
+	return useQuery( {
+		queryKey: [ 'read', 'sites', siteId, urlQuery ],
+		queryFn: async () => {
+			return wpcomRequest< ReadFeedSiteResponse >( {
+				path: `/read/sites/${ siteId }`,
+				query: urlQuery,
+				apiVersion: '1.1',
+				method: 'GET',
+			} );
+		},
+		enabled: typeof siteId === 'number' && siteId >= 0,
+	} );
+};
+
+export default useReadFeedSiteQuery;

package/src/reader/queries/use-site-subscription-details-query.ts

@@ -0,0 +1,31 @@
+import { useQuery } from '@tanstack/react-query';
+import { buildQueryKey, callApi } from '../helpers';
+import { useIsLoggedIn, useIsQueryEnabled } from '../hooks';
+import type { SiteSubscriptionDetailsResponse } from '../types';
+
+const useSiteSubscriptionDetailsQuery = ( blogId = '', subscriptionId = '' ) => {
+	const { id, isLoggedIn } = useIsLoggedIn();
+	const enabled = useIsQueryEnabled();
+
+	return useQuery( {
+		queryKey: buildQueryKey(
+			[ 'read', 'site-subscription-details', blogId, subscriptionId ],
+			isLoggedIn,
+			id
+		),
+		queryFn: async () => {
+			return callApi< SiteSubscriptionDetailsResponse< string > >( {
+				path: blogId
+					? '/read/sites/' + blogId + '/subscription-details'
+					: '/read/subscriptions/' + subscriptionId,
+				isLoggedIn,
+				apiNamespace: 'wpcom/v2',
+				apiVersion: '2',
+			} );
+		},
+		enabled,
+		refetchOnWindowFocus: false,
+	} );
+};
+
+export default useSiteSubscriptionDetailsQuery;