From 76008120268763b3817e8bf9b0f0f4fd18797645 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Wed, 4 Sep 2024 09:13:12 +0200
Subject: [PATCH] A4A Sites: update fields on breakpoint change

---
 .../sections/sites/sites-dashboard-provider.tsx       | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/client/a8c-for-agencies/sections/sites/sites-dashboard-provider.tsx b/client/a8c-for-agencies/sections/sites/sites-dashboard-provider.tsx
index 5f2a57b8ed7827..c224b2a6828e71 100644
--- a/client/a8c-for-agencies/sections/sites/sites-dashboard-provider.tsx
+++ b/client/a8c-for-agencies/sections/sites/sites-dashboard-provider.tsx
@@ -116,6 +116,17 @@ export const SitesDashboardProvider = ( {
 		filters: buildFilters( { issueTypes } ),
 	} );
 
+	useEffect( () => {
+		const fields = getFieldsByBreakpoint( isDesktop );
+		const fieldsForBreakpoint = [ ...fields ].sort().toString();
+		const existingFields = [ ...( dataViewsState?.fields ?? [] ) ].sort().toString();
+		// Compare the content of the arrays, not its referrences that will always be different.
+		// sort() sorts the array in place, so we need to clone them first.
+		if ( existingFields !== fieldsForBreakpoint ) {
+			setDataViewsState( ( prevState ) => ( { ...prevState, fields } ) );
+		}
+	}, [ isDesktop, dataViewsState?.fields ] );
+
 	useEffect( () => {
 		setInitialSelectedSiteUrl( siteUrlInitialState );
 		if ( ! siteUrlInitialState ) {