@elementor/editor-components 3.33.0-170 → 3.33.0-172

package/src/components/create-component-form/create-component-form.tsx

@@ -6,9 +6,8 @@ import { StarIcon } from '@elementor/icons';
 import { Alert, Button, FormLabel, Grid, Popover, Snackbar, Stack, TextField, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { type CreateComponentResponse } from '../../api';
 import { useComponents } from '../../hooks/use-components';
-import { useCreateComponentMutation } from '../../hooks/use-create-component';
+import { useCreateComponent } from '../../hooks/use-create-component';
 import { type ComponentFormValues } from '../../types';
 import { useForm } from './hooks/use-form';
 import { createBaseComponentSchema, createSubmitComponentSchema } from './utils/component-form-schema';
@@ -35,8 +34,7 @@ export function CreateComponentForm() {
 
 	const [ resultNotification, setResultNotification ] = useState< ResultNotification | null >( null );
 
-	const { mutate: createComponent, isPending } = useCreateComponentMutation();
-
+	const { createComponent, isPending } = useCreateComponent();
 	useEffect( () => {
 		const OPEN_SAVE_AS_COMPONENT_FORM_EVENT = 'elementor/editor/open-save-as-component-form';
 
@@ -57,43 +55,39 @@ export function CreateComponentForm() {
 			throw new Error( `Can't save element as component: element not found` );
 		}
 
-		createComponent(
-			{
+		try {
+			const result = await createComponent( {
 				name: values.componentName,
 				content: [ element.element.model.toJSON( { remove: [ 'default' ] } ) ],
-			},
-			{
-				onSuccess: ( result: CreateComponentResponse ) => {
-					if ( ! element ) {
-						throw new Error( `Can't replace element with component: element not found` );
-					}
-
-					replaceElementWithComponent( element.element, {
-						id: result.component_id,
-						name: values.componentName,
-					} );
-
-					setResultNotification( {
-						show: true,
-						// Translators: %1$s: Component name, %2$s: Component ID
-						message: __( 'Component saved successfully as: %1$s (ID: %2$s)', 'elementor' )
-							.replace( '%1$s', values.componentName )
-							.replace( '%2$s', result.component_id.toString() ),
-						type: 'success',
-					} );
-
-					resetAndClosePopup();
-				},
-				onError: () => {
-					const errorMessage = __( 'Failed to save component. Please try again.', 'elementor' );
-					setResultNotification( {
-						show: true,
-						message: errorMessage,
-						type: 'error',
-					} );
-				},
+			} );
+
+			if ( ! element ) {
+				throw new Error( `Can't replace element with component: element not found` );
 			}
-		);
+
+			replaceElementWithComponent( element.element, {
+				id: result.component_id,
+				name: values.componentName,
+			} );
+
+			setResultNotification( {
+				show: true,
+				// Translators: %1$s: Component name, %2$s: Component ID
+				message: __( 'Component saved successfully as: %1$s (ID: %2$s)', 'elementor' )
+					.replace( '%1$s', values.componentName )
+					.replace( '%2$s', result.component_id.toString() ),
+				type: 'success',
+			} );
+
+			resetAndClosePopup();
+		} catch {
+			const errorMessage = __( 'Failed to save component. Please try again.', 'elementor' );
+			setResultNotification( {
+				show: true,
+				message: errorMessage,
+				type: 'error',
+			} );
+		}
 	};
 
 	const resetAndClosePopup = () => {
@@ -146,7 +140,7 @@ const Form = ( {
 } ) => {
 	const { values, errors, isValid, handleChange, validateForm } = useForm< ComponentFormValues >( initialValues );
 
-	const { data: components } = useComponents();
+	const { components } = useComponents();
 
 	const existingComponentNames = useMemo( () => {
 		return components?.map( ( component ) => component.name ) ?? [];

package/src/hooks/use-components.ts

@@ -1,13 +1,10 @@
-import { useQuery } from '@elementor/query';
+import { __useSelector as useSelector } from '@elementor/store';
 
-import { apiClient } from '../api';
-
-export const COMPONENTS_QUERY_KEY = 'components';
+import { selectComponents, selectLoadIsPending } from '../store';
 
 export const useComponents = () => {
-	return useQuery( {
-		queryKey: [ COMPONENTS_QUERY_KEY ],
-		queryFn: apiClient.get,
-		staleTime: Infinity,
-	} );
+	const components = useSelector( selectComponents );
+	const isLoading = useSelector( selectLoadIsPending );
+
+	return { components, isLoading };
 };

package/src/hooks/use-create-component.ts

@@ -1,13 +1,22 @@
-import { useMutation, useQueryClient } from '@elementor/query';
+import { __useDispatch as useDispatch, __useSelector as useSelector, type AnyAction } from '@elementor/store';
 
-import { apiClient } from '../api';
-import { COMPONENTS_QUERY_KEY } from './use-components';
+import { type CreateComponentPayload } from '../api';
+import { selectCreateIsError, selectCreateIsPending } from '../store';
+import { createComponent } from '../thunks';
 
-export const useCreateComponentMutation = () => {
-	const queryClient = useQueryClient();
+export const useCreateComponent = () => {
+	const dispatch = useDispatch();
+	const isPending = useSelector( selectCreateIsPending );
+	const isError = useSelector( selectCreateIsError );
 
-	return useMutation( {
-		mutationFn: apiClient.create,
-		onSuccess: () => queryClient.invalidateQueries( { queryKey: [ COMPONENTS_QUERY_KEY ] } ),
-	} );
+	const createComponentAction = async ( payload: CreateComponentPayload ) => {
+		const result = await dispatch( createComponent( payload ) as unknown as AnyAction );
+		return result.payload;
+	};
+
+	return {
+		createComponent: createComponentAction,
+		isPending,
+		isError,
+	};
 };

package/src/init.ts

@@ -1,11 +1,16 @@
-import { injectIntoTop } from '@elementor/editor';
+import { injectIntoLogic, injectIntoTop } from '@elementor/editor';
 import { injectTab } from '@elementor/editor-elements-panel';
+import { __registerSlice as registerSlice } from '@elementor/store';
 import { __ } from '@wordpress/i18n';
 
 import { Components } from './components/components-tab/components';
 import { CreateComponentForm } from './components/create-component-form/create-component-form';
+import { PopulateStore } from './populate-store';
+import { slice } from './store';
 
 export function init() {
+	registerSlice( slice );
+
 	injectTab( {
 		id: 'components',
 		label: __( 'Components', 'elementor' ),
@@ -16,4 +21,9 @@ export function init() {
 		id: 'create-component-popup',
 		component: CreateComponentForm,
 	} );
+
+	injectIntoLogic( {
+		id: 'components-populate-store',
+		component: PopulateStore,
+	} );
 }

package/src/populate-store.ts

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+import { __dispatch as dispatch } from '@elementor/store';
+
+import { loadComponents } from './thunks';
+
+export function PopulateStore() {
+	useEffect( () => {
+		dispatch( loadComponents() );
+	}, [] );
+
+	return null;
+}

package/src/store.ts

@@ -0,0 +1,73 @@
+import {
+	__createSelector as createSelector,
+	__createSlice as createSlice,
+	type PayloadAction,
+	type SliceState,
+} from '@elementor/store';
+
+import { createComponent, loadComponents } from './thunks';
+import { type Component } from './types';
+
+type GetComponentResponse = Component[];
+
+type Status = 'idle' | 'pending' | 'error';
+export type ComponentsState = {
+	data: Component[];
+	loadStatus: Status;
+	createStatus: Status;
+};
+
+export const initialState: ComponentsState = {
+	data: [],
+	loadStatus: 'idle',
+	createStatus: 'idle',
+};
+
+const SLICE_NAME = 'components';
+export const slice = createSlice( {
+	name: SLICE_NAME,
+	initialState,
+	reducers: {
+		add: ( state, { payload } ) => {
+			state.data.push( payload );
+		},
+		load: ( state, { payload } ) => {
+			state.data = payload;
+		},
+	},
+	extraReducers: ( builder ) => {
+		builder.addCase( loadComponents.fulfilled, ( state, { payload }: PayloadAction< GetComponentResponse > ) => {
+			state.data = payload;
+			state.loadStatus = 'idle';
+		} );
+		builder.addCase( loadComponents.pending, ( state ) => {
+			state.loadStatus = 'pending';
+		} );
+		builder.addCase( loadComponents.rejected, ( state ) => {
+			state.loadStatus = 'error';
+		} );
+		builder.addCase( createComponent.fulfilled, ( state, { payload, meta } ) => {
+			state.createStatus = 'idle';
+			state.data.push( {
+				id: payload.component_id,
+				name: meta.arg.name,
+			} );
+		} );
+		builder.addCase( createComponent.pending, ( state ) => {
+			state.createStatus = 'pending';
+		} );
+		builder.addCase( createComponent.rejected, ( state ) => {
+			state.createStatus = 'error';
+		} );
+	},
+} );
+
+const selectData = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].data;
+const selectLoadStatus = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].loadStatus;
+const selectCreateStatus = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].createStatus;
+
+export const selectComponents = createSelector( selectData, ( data: Component[] ) => data );
+export const selectLoadIsPending = createSelector( selectLoadStatus, ( status ) => status === 'pending' );
+export const selectLoadIsError = createSelector( selectLoadStatus, ( status ) => status === 'error' );
+export const selectCreateIsPending = createSelector( selectCreateStatus, ( status ) => status === 'pending' );
+export const selectCreateIsError = createSelector( selectCreateStatus, ( status ) => status === 'error' );

package/src/thunks.ts

@@ -0,0 +1,18 @@
+import { __createAsyncThunk as createAsyncThunk } from '@elementor/store';
+
+import { apiClient, type CreateComponentPayload, type CreateComponentResponse } from './api';
+
+const createComponent = createAsyncThunk< CreateComponentResponse, CreateComponentPayload >(
+	'components/create',
+	async ( payload: CreateComponentPayload ) => {
+		const response = await apiClient.create( payload );
+		return { ...response, name: payload.name };
+	}
+);
+
+const loadComponents = createAsyncThunk( 'components/load', async () => {
+	const response = await apiClient.get();
+	return response;
+} );
+
+export { createComponent, loadComponents };