LPD-9465 - Feat. Handle Default view and prevent object mutation (mainly filters)

Author: juanjofgliferay

modules/apps/frontend-data-set/frontend-data-set-web/src/main/resources/META-INF/resources/FrontendDataSet.tsx

@@ -500,6 +500,13 @@ const FrontendDataSetContent = ({
 	};
 
 	const getInitialViewsState = () => {
+		const defaultSnapshot: any = {
+			modifiedFields: {},
+			paginationDelta:
+				showPagination &&
+				(pagination?.initialDelta || DEFAULT_PAGINATION_DELTA),
+		};
+
 		const customInternalViews =
 			customRenderers?.views?.map((customRenderer: TRenderer) => ({
 
@@ -522,6 +529,11 @@ const FrontendDataSetContent = ({
 			views[0] ||
 			(customInternalViews?.length && customInternalViews[0]);
 
+		defaultSnapshot.activeView = {
+			component: getViewComponent(initialActiveView as IView),
+			...initialActiveView,
+		};
+
 		let initialVisibleFieldNames = {};
 
 		if (!Liferay.FeatureFlags['LPD-10683'] && activeViewSettings) {
@@ -545,6 +557,8 @@ const FrontendDataSetContent = ({
 
 		const visibleFieldNames = getVisibleFields();
 
+		defaultSnapshot.visibleFieldNames = initialVisibleFieldNames;
+
 		let saveVisibleFieldNames = false;
 
 		if (visibleFieldNames) {
@@ -576,29 +590,30 @@ const FrontendDataSetContent = ({
 			...initialActiveView,
 		};
 
+		defaultSnapshot.filters = initialFilters
+			? initialFilters.map((filter) => {
+					const preloadedData = filter.preloadedData;
+
+					if (preloadedData) {
+						return activateFilter({
+							filter,
+							selectedData: preloadedData,
+						});
+					}
+
+					return {...filter};
+				})
+			: [];
+
 		const filters = initialFilters
 			? updateFilterActivation({
 					newFilters: getFilters(),
-					oldFilters: initialFilters.map((filter) => {
-						const preloadedData = filter.preloadedData;
-
-						if (preloadedData) {
-							filter = activateFilter({
-								filter,
-								selectedData: preloadedData,
-							});
-						}
-
-						return filter;
-					}),
+					oldFilters: defaultSnapshot.filters,
 				})
 			: [];
 
 		const paginationDelta =
-			showPagination &&
-			(getDelta() ||
-				pagination?.initialDelta ||
-				DEFAULT_PAGINATION_DELTA);
+			showPagination && (getDelta() || defaultSnapshot.paginationDelta);
 
 		const pageNumber =
 			getPageNumber() ||
@@ -607,6 +622,8 @@ const FrontendDataSetContent = ({
 
 		const searchParam = getSearchParam();
 
+		defaultSnapshot.sorts = sortsProp;
+
 		const sorts = updateSortsActivation({
 			newSorts: getActiveSorts(),
 			oldSorts: sortsProp,
@@ -646,14 +663,7 @@ const FrontendDataSetContent = ({
 
 		return {
 			activeView,
-			defaultSnapshot: {
-				activeView,
-				filters: deepClone(filters),
-				modifiedFields: {},
-				paginationDelta,
-				sorts,
-				visibleFieldNames: initialVisibleFieldNames,
-			},
+			defaultSnapshot,
 			filters,
 			modifiedFields: {},
 			pageNumber,
@@ -668,10 +678,7 @@ const FrontendDataSetContent = ({
 	};
 
 	const [viewsState, viewsDispatch] = useThunk(
-		useReducer(
-			viewsReducer,
-			getInitialViewsState(),
-		)
+		useReducer(viewsReducer, getInitialViewsState())
 	);
 
 	const {
@@ -1591,22 +1598,10 @@ const FrontendDataSetContent = ({
 	}
 
 	const handleSnapshotChange = ({defaultSnapshot, snapshots, value}: any) => {
-		const snapshot = deepClone(
-			snapshots.find((view: ISnapshot) => view.erc === value)
-		);
-
-		if (!snapshot || value === 'DEFAULT_VIEW') {
+		if (value === 'DEFAULT_VIEW') {
 			updateConfig({
-				[EConfigInURLKeys.ACTIVE_FILTERS]: updateFilterActivation({
-					newFilters: defaultSnapshot.filters.filter(
-						(filter: any) => filter.active
-					),
-					oldFilters: deepClone(filters),
-				}),
-				[EConfigInURLKeys.ACTIVE_SORTS]: updateSortsActivation({
-					newSorts: defaultSnapshot.sorts,
-					oldSorts: sorts,
-				}),
+				[EConfigInURLKeys.ACTIVE_FILTERS]: defaultSnapshot.filters,
+				[EConfigInURLKeys.ACTIVE_SORTS]: defaultSnapshot.sorts,
 				[EConfigInURLKeys.DELTA]: {...defaultSnapshot.paginationDelta},
 				[EConfigInURLKeys.VIEW_NAME]: {
 					...defaultSnapshot.activeView.name,
@@ -1621,6 +1616,10 @@ const FrontendDataSetContent = ({
 			});
 		}
 		else {
+			const snapshot = deepClone(
+				snapshots.find((view: ISnapshot) => view.erc === value)
+			);
+
 			updateConfig({
 				[EConfigInURLKeys.ACTIVE_FILTERS]: updateFilterActivation({
 					newFilters: snapshot.configuration.filters.filter(

modules/apps/frontend-data-set/frontend-data-set-web/src/main/resources/META-INF/resources/utils/filters/activateFilter.ts

@@ -4,6 +4,7 @@
  */
 
 import {FILTER_IMPLEMENTATIONS} from '../../management_bar/controls/filters/Filter';
+import deepClone from '../deepClone';
 
 export function activateFilter({
 	filter,
@@ -12,19 +13,22 @@ export function activateFilter({
 	filter: any;
 	selectedData?: any;
 }) {
-	filter.active = true;
+	const updatedFilter = deepClone(filter);
+
+	updatedFilter.active = true;
 
 	if (selectedData) {
-		filter.selectedData = selectedData;
+		updatedFilter.selectedData = selectedData;
 	}
 
-	const filterType: keyof typeof FILTER_IMPLEMENTATIONS = filter.type;
+	const filterType: keyof typeof FILTER_IMPLEMENTATIONS = updatedFilter.type;
 
 	const filterImplementation = FILTER_IMPLEMENTATIONS[filterType];
 
-	filter.odataFilterString = filterImplementation.getOdataString(filter);
-	filter.selectedItemsLabel =
-		filterImplementation.getSelectedItemsLabel(filter);
+	updatedFilter.odataFilterString =
+		filterImplementation.getOdataString(updatedFilter);
+	updatedFilter.selectedItemsLabel =
+		filterImplementation.getSelectedItemsLabel(updatedFilter);
 
-	return filter;
+	return updatedFilter;
 }