Subscribers Dataview: add sort order

client/my-sites/subscribers/components/subscriber-data-views/subscriber-data-views.tsx

@@ -12,7 +12,7 @@ import { Subscriber } from 'calypso/my-sites/subscribers/types';
 import { useSelector } from 'calypso/state';
 import isAtomicSite from 'calypso/state/selectors/is-site-automated-transfer';
 import { isSimpleSite } from 'calypso/state/sites/selectors';
-import { SubscribersSortBy } from '../../constants';
+import { SubscribersSortBy, SubscribersSortOrder } from '../../constants';
 import type { View, Field, Action } from '@wordpress/dataviews';
 import './style.scss';
 
@@ -55,6 +55,8 @@ const SubscriberDataViews = ( {
 		handleSearch,
 		sortTerm,
 		setSortTerm,
+		sortOrder,
+		setSortOrder,
 	} = useSubscribersPage();
 
 	const isSimple = useSelector( isSimpleSite );
@@ -148,6 +150,12 @@ const SubscriberDataViews = ( {
 				setSortTerm( newSortTerm );
 			}
 		}
+
+		if ( newView.sort?.direction ) {
+			setSortOrder(
+				newView.sort.direction === 'asc' ? SubscribersSortOrder.Asc : SubscribersSortOrder.Desc
+			);
+		}
 	};
 
 	const currentView = useMemo< View >(
@@ -159,10 +167,10 @@ const SubscriberDataViews = ( {
 			perPage,
 			sort: {
 				field: sortTerm === SubscribersSortBy.Name ? 'name' : 'date_subscribed',
-				direction: 'desc',
+				direction: sortOrder?.toLowerCase() as 'asc' | 'desc',
 			},
 		} ),
-		[ searchTerm, page, perPage, sortTerm ]
+		[ searchTerm, page, perPage, sortTerm, sortOrder ]
 	);
 
 	const { data, paginationInfo } = useMemo( () => {

client/my-sites/subscribers/components/subscribers-page/subscribers-page-context.tsx

@@ -9,7 +9,7 @@ import { Subscriber } from 'calypso/my-sites/subscribers/types';
 import { useSelector } from 'calypso/state';
 import { successNotice, errorNotice } from 'calypso/state/notices/actions';
 import { getSelectedSiteSlug } from 'calypso/state/ui/selectors';
-import { SubscribersFilterBy, SubscribersSortBy } from '../../constants';
+import { SubscribersFilterBy, SubscribersSortBy, SubscribersSortOrder } from '../../constants';
 import useManySubsSite from '../../hooks/use-many-subs-site';
 import { useSubscriberCountQuery, useSubscribersQuery } from '../../queries';
 import { migrateSubscribers } from './migrate-subscribers-query';
@@ -21,10 +21,12 @@ type SubscribersPageProviderProps = {
 	timestamp: number;
 	searchTerm: string;
 	sortTerm: SubscribersSortBy;
+	sortOrder: SubscribersSortOrder;
 	filterOptionChanged: ( option: SubscribersFilterBy ) => void;
 	pageChanged: ( page: number ) => void;
 	searchTermChanged: ( term: string ) => void;
 	sortTermChanged: ( term: SubscribersSortBy ) => void;
+	sortOrderChanged: ( order: SubscribersSortOrder ) => void;
 	children: React.ReactNode;
 };
 
@@ -39,7 +41,9 @@ type SubscribersPageContextProps = {
 	grandTotal: number;
 	pageChangeCallback: ( page: number ) => void;
 	sortTerm: SubscribersSortBy;
+	sortOrder: SubscribersSortOrder;
 	setSortTerm: ( term: SubscribersSortBy ) => void;
+	setSortOrder: ( order: SubscribersSortOrder ) => void;
 	filterOption: SubscribersFilterBy;
 	setFilterOption: ( option: SubscribersFilterBy ) => void;
 	showAddSubscribersModal: boolean;
@@ -72,10 +76,12 @@ export const SubscribersPageProvider = ( {
 	searchTerm,
 	timestamp,
 	sortTerm = SubscribersSortBy.DateSubscribed,
+	sortOrder,
 	filterOptionChanged,
 	pageChanged,
 	searchTermChanged,
 	sortTermChanged,
+	sortOrderChanged,
 }: SubscribersPageProviderProps ) => {
 	const [ perPage, setPerPage ] = useState( DEFAULT_PER_PAGE );
 	const [ showAddSubscribersModal, setShowAddSubscribersModal ] = useState( false );
@@ -113,6 +119,7 @@ export const SubscribersPageProvider = ( {
 		search: debouncedSearchTerm,
 		siteId,
 		sortTerm,
+		sortOrder,
 		filterOption: subscriberType,
 		timestamp,
 	} );
@@ -221,6 +228,8 @@ export const SubscribersPageProvider = ( {
 				pageChangeCallback,
 				sortTerm,
 				setSortTerm: sortTermChanged,
+				sortOrder,
+				setSortOrder: sortOrderChanged,
 				filterOption,
 				setFilterOption: filterOptionChanged,
 				showAddSubscribersModal,

client/my-sites/subscribers/constants.ts

@@ -3,6 +3,11 @@ export enum SubscribersSortBy {
 	DateSubscribed = 'date_subscribed',
 }
 
+export enum SubscribersSortOrder {
+	Asc = 'asc',
+	Desc = 'desc',
+}
+
 export enum SubscribersFilterBy {
 	All = 'all',
 	Email = 'email',

client/my-sites/subscribers/controller.js

@@ -10,6 +10,7 @@ const FILTER_KEY = 'f';
 const PAGE_KEY = 'page';
 const SEARCH_KEY = 's';
 const SORT_KEY = 'sort';
+const SORT_ORDER_KEY = 'sort_order';
 const TIME_KEY = '_';
 
 const queryStringChanged = ( key ) => ( value ) => {
@@ -32,6 +33,7 @@ export function subscribers( context, next ) {
 	const pageNumber = sanitizeInt( query[ PAGE_KEY ] ) ?? 1;
 	const searchTerm = query[ SEARCH_KEY ];
 	const sortTerm = query[ SORT_KEY ];
+	const sortOrder = query[ SORT_ORDER_KEY ];
 	const timestamp = query[ TIME_KEY ];
 
 	context.primary = (
@@ -40,11 +42,13 @@ export function subscribers( context, next ) {
 			pageNumber={ pageNumber }
 			searchTerm={ searchTerm }
 			sortTerm={ sortTerm }
+			sortOrder={ sortOrder }
 			timestamp={ timestamp }
 			filterOptionChanged={ queryStringChanged( FILTER_KEY ) }
 			pageChanged={ queryStringChanged( PAGE_KEY ) }
 			searchTermChanged={ queryStringChanged( SEARCH_KEY ) }
 			sortTermChanged={ queryStringChanged( SORT_KEY ) }
+			sortOrderChanged={ queryStringChanged( SORT_ORDER_KEY ) }
 			reloadData={ () => queryStringChanged( TIME_KEY )( Date.now() ) }
 		/>
 	);

client/my-sites/subscribers/helpers/index.ts

@@ -6,6 +6,7 @@ const getSubscribersCacheKey = (
 	perPage?: number,
 	search?: string,
 	sortTerm?: string,
+	sortOrder?: string,
 	filterOption?: string,
 	hasManySubscribers?: boolean,
 	timestamp?: number
@@ -23,6 +24,9 @@ const getSubscribersCacheKey = (
 	if ( sortTerm ) {
 		cacheKey.push( 'sort-term', sortTerm );
 	}
+	if ( sortOrder ) {
+		cacheKey.push( 'sort-order', sortOrder );
+	}
 	if ( filterOption ) {
 		cacheKey.push( 'filter-option', filterOption );
 	}
@@ -39,12 +43,14 @@ const getSubscribersQueryString = (
 	pageNumber: number,
 	search?: string,
 	sortTerm?: string,
+	sortOrder?: string,
 	filterOption?: string
 ): string => {
 	const queryParams = [
 		search ? `s=${ search }` : '',
 		sortTerm ? `sort=${ sortTerm }` : '',
 		filterOption ? `f=${ filterOption }` : '',
+		sortOrder ? `sort_order=${ sortOrder }` : '',
 	];
 
 	let queryString = queryParams.filter( ( param ) => !! param ).join( '&' );
@@ -57,8 +63,14 @@ const getSubscribersUrl = (
 	siteSlug: string | undefined | null,
 	args: SubscriberListArgs
 ): string => {
-	const { currentPage, searchTerm, sortTerm, filterOption } = args;
-	const queryString = getSubscribersQueryString( currentPage, searchTerm, sortTerm, filterOption );
+	const { currentPage, searchTerm, sortTerm, sortOrder, filterOption } = args;
+	const queryString = getSubscribersQueryString(
+		currentPage,
+		searchTerm,
+		sortTerm,
+		sortOrder,
+		filterOption
+	);
 
 	return `/subscribers/${ siteSlug }?${ queryString }`;
 };
@@ -69,8 +81,14 @@ const getSubscriberDetailsUrl = (
 	userId: number | undefined,
 	args: SubscriberListArgs
 ): string => {
-	const { currentPage, searchTerm, sortTerm, filterOption } = args;
-	const queryString = getSubscribersQueryString( currentPage, searchTerm, sortTerm, filterOption );
+	const { currentPage, searchTerm, sortTerm, sortOrder, filterOption } = args;
+	const queryString = getSubscribersQueryString(
+		currentPage,
+		searchTerm,
+		sortTerm,
+		sortOrder,
+		filterOption
+	);
 
 	if ( userId ) {
 		return `/subscribers/${ siteSlug }/${ userId }?${ queryString }`;

client/my-sites/subscribers/main.tsx

@@ -28,7 +28,7 @@ import { AddSubscribersModal } from './components/add-subscribers-modal';
 import { MigrateSubscribersModal } from './components/migrate-subscribers-modal';
 import { SubscribersHeaderPopover } from './components/subscribers-header-popover';
 import { UnsubscribeModal } from './components/unsubscribe-modal';
-import { SubscribersFilterBy, SubscribersSortBy } from './constants';
+import { SubscribersFilterBy, SubscribersSortBy, SubscribersSortOrder } from './constants';
 import { getSubscriberDetailsUrl } from './helpers';
 import { useUnsubscribeModal } from './hooks';
 import { Subscriber } from './types';
@@ -107,10 +107,12 @@ type SubscribersProps = {
 	timestamp: number;
 	searchTerm: string;
 	sortTerm: SubscribersSortBy;
+	sortOrder: SubscribersSortOrder;
 	filterOptionChanged: ( option: SubscribersFilterBy ) => void;
 	pageChanged: ( page: number ) => void;
 	searchTermChanged: ( term: string ) => void;
 	sortTermChanged: ( term: SubscribersSortBy ) => void;
+	sortOrderChanged: ( order: SubscribersSortOrder ) => void;
 	reloadData: () => void;
 };
 
@@ -119,11 +121,13 @@ const SubscribersPage = ( {
 	pageNumber,
 	searchTerm,
 	sortTerm,
+	sortOrder,
 	timestamp,
 	filterOptionChanged,
 	pageChanged,
 	searchTermChanged,
 	sortTermChanged,
+	sortOrderChanged,
 	reloadData,
 }: SubscribersProps ) => {
 	const selectedSite = useSelector( getSelectedSite );
@@ -138,6 +142,7 @@ const SubscribersPage = ( {
 		filterOption,
 		searchTerm,
 		sortTerm,
+		sortOrder,
 	};
 
 	const importSelector = useSelect(
@@ -174,11 +179,13 @@ const SubscribersPage = ( {
 			pageNumber={ pageNumber }
 			searchTerm={ searchTerm }
 			sortTerm={ sortTerm }
+			sortOrder={ sortOrder }
 			timestamp={ timestamp }
 			filterOptionChanged={ filterOptionChanged }
 			pageChanged={ pageChanged }
 			searchTermChanged={ searchTermChanged }
 			sortTermChanged={ sortTermChanged }
+			sortOrderChanged={ sortOrderChanged }
 		>
 			<QueryMembershipsSettings siteId={ siteId ?? 0 } source="calypso" />
 			<Main

client/my-sites/subscribers/mutations/use-subscriber-remove-mutation.ts

@@ -20,7 +20,14 @@ const useSubscriberRemoveMutation = (
 	args: SubscriberListArgs,
 	invalidateDetailsCache = false
 ) => {
-	const { currentPage, perPage = DEFAULT_PER_PAGE, filterOption, searchTerm, sortTerm } = args;
+	const {
+		currentPage,
+		perPage = DEFAULT_PER_PAGE,
+		filterOption,
+		searchTerm,
+		sortTerm,
+		sortOrder,
+	} = args;
 	const queryClient = useQueryClient();
 	const recordSubscriberRemoved = useRecordSubscriberRemoved();
 	const { hasManySubscribers } = useManySubsSite( siteId );
@@ -30,6 +37,7 @@ const useSubscriberRemoveMutation = (
 		perPage,
 		searchTerm,
 		sortTerm,
+		sortOrder,
 		filterOption,
 		hasManySubscribers
 	);
@@ -117,6 +125,7 @@ const useSubscriberRemoveMutation = (
 								perPage,
 								searchTerm,
 								sortTerm,
+								sortOrder,
 								filterOption,
 								hasManySubscribers
 							)
@@ -167,6 +176,7 @@ const useSubscriberRemoveMutation = (
 							perPage,
 							searchTerm,
 							sortTerm,
+							sortOrder,
 							filterOption,
 							hasManySubscribers
 						),

client/my-sites/subscribers/queries/use-subscribers-query.tsx

@@ -1,6 +1,11 @@
 import { useQuery } from '@tanstack/react-query';
 import wpcom from 'calypso/lib/wp';
-import { DEFAULT_PER_PAGE, SubscribersFilterBy, SubscribersSortBy } from '../constants';
+import {
+	DEFAULT_PER_PAGE,
+	SubscribersFilterBy,
+	SubscribersSortBy,
+	SubscribersSortOrder,
+} from '../constants';
 import { getSubscribersCacheKey } from '../helpers';
 import useManySubsSite from '../hooks/use-many-subs-site';
 import type { SubscriberEndpointResponse } from '../types';
@@ -11,6 +16,7 @@ type SubscriberQueryParams = {
 	perPage?: number;
 	search?: string;
 	sortTerm?: SubscribersSortBy;
+	sortOrder?: SubscribersSortOrder;
 	filterOption?: SubscribersFilterBy;
 	timestamp: number;
 };
@@ -22,6 +28,7 @@ const useSubscribersQuery = ( {
 	search,
 	timestamp,
 	sortTerm = SubscribersSortBy.DateSubscribed,
+	sortOrder,
 	filterOption = SubscribersFilterBy.All,
 }: SubscriberQueryParams ) => {
 	const { hasManySubscribers, isLoading } = useManySubsSite( siteId );
@@ -34,6 +41,7 @@ const useSubscribersQuery = ( {
 			perPage,
 			search,
 			sortTerm,
+			sortOrder,
 			filterOption,
 			hasManySubscribers,
 			timestamp
@@ -51,7 +59,9 @@ const useSubscribersQuery = ( {
 			return wpcom.req.get( {
 				path: `/sites/${ siteId }/${ pathRoute }?per_page=${ perPage }&page=${ page }${
 					search ? `&search=${ encodeURIComponent( search ) }` : ''
-				}${ sortTerm ? `&sort=${ sortTerm }` : '' }&${ userTypeField }=${ validatedFilterOption }`,
+				}${ sortTerm ? `&sort=${ sortTerm }` : '' }${
+					sortOrder ? `&sort_order=${ sortOrder }` : ''
+				}&${ userTypeField }=${ validatedFilterOption }`,
 				apiNamespace: 'wpcom/v2',
 			} );
 		},

client/my-sites/subscribers/subscriber-details-page.tsx

@@ -12,7 +12,7 @@ import { getSelectedSiteId, getSelectedSiteSlug } from 'calypso/state/ui/selecto
 import { SubscriberDetails } from './components/subscriber-details';
 import { SubscriberPopover } from './components/subscriber-popover';
 import { UnsubscribeModal } from './components/unsubscribe-modal';
-import { SubscribersFilterBy, SubscribersSortBy } from './constants';
+import { SubscribersFilterBy, SubscribersSortBy, SubscribersSortOrder } from './constants';
 import { getSubscriberDetailsUrl, getSubscribersUrl } from './helpers';
 import { useUnsubscribeModal } from './hooks';
 import { useSubscriberDetailsQuery } from './queries';
@@ -25,6 +25,7 @@ type SubscriberDetailsPageProps = {
 	pageNumber?: number;
 	searchTerm?: string;
 	sortTerm?: SubscribersSortBy;
+	sortOrder?: SubscribersSortOrder;
 };
 
 const SubscriberDetailsPage = ( {
@@ -34,6 +35,7 @@ const SubscriberDetailsPage = ( {
 	pageNumber = 1,
 	searchTerm,
 	sortTerm,
+	sortOrder,
 }: SubscriberDetailsPageProps ) => {
 	const translate = useTranslate();
 	const dispatch = useDispatch();
@@ -59,6 +61,7 @@ const SubscriberDetailsPage = ( {
 		filterOption,
 		searchTerm,
 		sortTerm,
+		sortOrder,
 	};
 
 	const subscribersUrl = getSubscribersUrl( selectedSiteSlug, pageArgs );