fix: refetch sublists when selecting a new list

src/newsletter-editor/sidebar/send-to.js

@@ -13,6 +13,7 @@ import { useEffect, useState } from '@wordpress/element';
  */
 import Autocomplete from './autocomplete';
 import { fetchSendLists, useNewsletterData } from '../store';
+import { usePrevious } from '../utils';
 
 // The container for list + sublist autocomplete fields.
 const SendTo = () => {
@@ -36,6 +37,7 @@ const SendTo = () => {
 	const sublistLabel = labels?.sublist || __( 'sublist', 'newspack-newsletters' );
 	const selectedList = lists.find( item => item.id === listId );
 	const selectedSublist = sublists?.find( item => item.id === sublistId );
+	const prevListId = usePrevious( listId );
 
 	// Cancel any queued fetches on unmount.
 	useEffect( () => {
@@ -59,6 +61,11 @@ const SendTo = () => {
 		if ( listId && ! sublistId && newsletterData?.sublists && 1 >= newsletterData.sublists.length ) {
 			fetchSendLists( { type: 'sublist', parent_id: listId } );
 		}
+
+		// If selecting a new list entirely.
+		if ( listId && listId !== prevListId ) {
+			fetchSendLists( { type: 'sublist', parent_id: listId }, true );
+		}
 	}, [ newsletterData, listId, sublistId ] );
 
 	const renderSelectedSummary = () => {

src/newsletter-editor/store.js

@@ -150,7 +150,7 @@ export const fetchSyncErrors = async postId => {
 }
 
 // Dispatcher to fetch send lists and sublists from the connected ESP and update the newsletterData in store.
-export const fetchSendLists = debounce( async ( opts ) => {
+export const fetchSendLists = debounce( async ( opts, replace = false ) => {
 	updateNewsletterDataError( null );
 	try {
 		const { name } = getServiceProvider();
@@ -190,7 +190,7 @@ export const fetchSendLists = debounce( async ( opts ) => {
 		}
 
 		const updatedNewsletterData = { ...newsletterData };
-		const updatedSendLists = [ ...sendLists ];
+		const updatedSendLists = replace ? [] : [ ...sendLists ];
 
 		// If no existing items found, fetch from the ESP.
 		const isRetrieving = coreSelect( STORE_NAMESPACE ).getIsRetrieving();

src/newsletter-editor/utils.js

@@ -4,6 +4,7 @@
  * WordPress dependencies
  */
 import apiFetch from '@wordpress/api-fetch';
+import { useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -84,3 +85,16 @@ export const refreshEmailHtml = async ( postId, postTitle, postContent ) => {
 	return html;
 };
 
+/**
+ * Custom hook to fetch a previous state or prop value.
+ *
+ * @param {string} value of the prop or state to fetch.
+ * @return {*} The previous value of the prop or state.
+ */
+export const usePrevious = value => {
+	const ref = useRef();
+	useEffect( () => {
+		ref.current = value;
+	},[ value ] );
+	return ref.current;
+}