test

test.js

import { createReduxStore, register } from '@wordpress/data';

export const DEFAULT_STATE = {
	drag: {
		source: 'panel', //null,
		uid: null,
		id: 'heading', //null, heading, container,
		draggingNode: null,
	},
	isDragging: false,
	expandCanvas: false,
	activeModal: 'custom-layout', // layout, custom-layout TODO: should be empty
	activeModule: 'canvas', //null, canvas, layout
	activeTab: 'builder', // builder, design, settings, actions, controls
	// modulesMap: {},
	modulesMap: {
		canvas: {
			id: 'post-title',
			label: 'Title',
			settings: {},
		},
		module2: {
			id: 'post-excerpt',
			label: 'Excerpt',
			settings: {},
		},
	},
	canvasMap: { root: [ ] },
	settings: {},
};

// Actions
const actions = {
	setSettings( data ) {
		return {
			type: 'updateSettings',
			data,
		};
	},
	updateApp( data ) {
		return {
			type: 'updateApp',
			data,
		};
	},
	updateModulesMap( data ) {
		return {
			type: 'updateModulesMap',
			canvasMap: data,
		};
	},
	updateCanvasMap( data ) {
		return {
			type: 'updateCanvasMap',
			data,
		};
	},
	setCloseModal( activeModal ) {
		return {
			type: 'closeModal',
			activeModal,
		};
	},
	setActiveModal( activeModal ) {
		return {
			type: 'setActiveModal',
			activeModal,
		};
	},
	setActiveTab( activeTab ) {
		return {
			type: 'setActiveTab',
			activeTab,
		};
	},
};

// Reducers functions
function reducer( state = DEFAULT_STATE, action ) {
	switch ( action.type ) {
		case 'updateApp':
			return {
				...state,
				data: action.data,
			};

		case 'updateModulesMap':
			return {
				...state,
				data: {
					...state.data,
					...action.data,
				},
			};

			// case 'deleteModulesMap':
			// 	const nextState = { ...state };

			// 	[ ...payload ].forEach( ( uid ) => {
			// 		delete nextState[ uid ];
			// 	} );

			// 	return { ...nextState };

		case 'updateCanvasMap':
			return { ...state, data: action.data };

			// Assuming you have a deleteModules function somewhere
			// case 'deleteCanvasMap':
			// 	return deleteModules( state, payload );

		case 'updateSettings':
			return { ...state, data: action.data };

		case 'closeModal':
			// const { activeModal } = payload;
			return {
				...state,
				activeModal: action.activeModal,
			};

		case 'setActiveModal':
			// const { myActiveModal } = payload;
			return {
				...state,
				activeModal: action.activeModal,
			};

		case 'setActiveTab':
			// const { myActiveModal } = payload;
			return {
				...state,
				activeTab: action.activeTab,
			};

		default: {
			return state;
		}
	}
}

// Selectors
const selectors = {
	getDrag: ( state ) => state.drag,
	getIsDragging: ( state ) => state.isDragging,
	getExpandCanvas: ( state ) => state.expandCanvas,
	getActiveModal: ( state ) => state.activeModal,
	getActiveModule: ( state ) => state.activeModule,
	getActiveTab: ( state ) => state.activeTab,
	getSettings: ( state ) => state.settings,
	getModulesMap: ( state ) => state.modulesMap,
	getCanvasMap: ( state ) => state.canvasMap,
	getApp: ( state ) => state,
};

// CreateReduxStore
const store = createReduxStore( 'wp-loop-builder', {
	reducer,
	actions,
	selectors,
} );

// Register Store
register( store );