fix: ensure page property payload is not invalid

src/container/property-list/event-handler-property-view.tsx

@@ -42,6 +42,17 @@ export class EventHandlerPropertyView extends React.Component<EventHandlerProper
 
 		project.addElementAction(elementAction);
 		props.elementProperty.setValue(elementAction.getId());
+
+		const storePropertyId = elementAction.getStorePropertyId();
+		const storeProperty = storePropertyId
+			? userStore.getPropertyById(storePropertyId)
+			: undefined;
+
+		if (storeProperty && storeProperty.getType() === Types.UserStorePropertyType.Page) {
+			const page = props.store.getPages()[0];
+			elementAction.setPayload(page ? page.getId() : '');
+		}
+
 		props.store.commit();
 	}
 

src/message/message.ts

@@ -66,7 +66,7 @@ export enum MessageType {
 	Undo = 'undo',
 	UpdatePatternLibraryRequest = 'update-pattern-library-request',
 	UpdatePatternLibraryResponse = 'update-pattern-library-response',
-	UserStoreChange = 'user-store-change',
+	ChangeUserStore = 'user-store-change',
 	SelectElement = 'select-element',
 	HighlightElement = 'highlight-element'
 }
@@ -287,7 +287,7 @@ export type ChangeProject = Envelope<
 >;
 
 export type ChangeUserStore = Envelope<
-	MessageType.UserStoreChange,
+	MessageType.ChangeUserStore,
 	{ userStore: Types.SerializedUserStore }
 >;
 

src/model/element-action.ts

@@ -74,7 +74,6 @@ export class ElementAction {
 				return;
 			case Types.UserStoreActionType.Set: {
 				const storeProperty = this.userStore.getPropertyById(this.storePropertyId);
-
 				if (storeProperty) {
 					storeProperty.setPayload(this.payload);
 				}

src/model/project.ts

@@ -134,6 +134,8 @@ export class Project {
 			)
 		);
 
+		currentPageProperty.setProject(project);
+
 		return project;
 	}
 
@@ -163,6 +165,7 @@ export class Project {
 			project.addElementAction(ElementAction.from(elementAction, { userStore }));
 		});
 
+		userStore.getPageProperty().setProject(project);
 		return project;
 	}
 

src/model/user-store-property/user-store-property.ts

@@ -1,5 +1,6 @@
 import * as _ from 'lodash';
 import * as Mobx from 'mobx';
+import { Project } from '../project';
 import * as Types from '../../types';
 
 export interface UserStorePropertyInit {
@@ -19,6 +20,7 @@ export class UserStoreProperty {
 	@Mobx.observable private name: string;
 	@Mobx.observable private payload: string;
 	private type: UserStorePropertyType;
+	private project: Project;
 
 	public constructor(init: UserStorePropertyInit) {
 		this.id = init.id;
@@ -63,9 +65,20 @@ export class UserStoreProperty {
 
 	@Mobx.action
 	public setPayload(payload: string): void {
+		// Skip if we try to switch to a page that does not exist
+		if (this.getType() === Types.UserStorePropertyType.Page) {
+			if (this.project && !this.project.getPageById(payload)) {
+				return;
+			}
+		}
+
 		this.payload = payload;
 	}
 
+	public setProject(project: Project): void {
+		this.project = project;
+	}
+
 	public toJSON(): Types.SerializedUserStoreProperty {
 		return {
 			id: this.id,

src/preview/preview.ts

@@ -187,6 +187,10 @@ function main(): void {
 						});
 
 						store.setComponents(getComponents(store.getProject()));
+						break;
+					}
+					case Message.MessageType.ChangeUserStore: {
+						project.getUserStore().sync(message);
 					}
 				}
 			});
@@ -243,7 +247,7 @@ function main(): void {
 			sender.send({
 				id: uuid.v4(),
 				payload: { userStore: userStore.toJSON() },
-				type: Message.MessageType.UserStoreChange
+				type: Message.MessageType.ChangeUserStore
 			});
 		});
 	}

src/renderer/create-project-message-handler.ts

@@ -98,7 +98,7 @@ export function createProjectMessageHandler({
 				app.setPane(message.payload.pane, message.payload.visible);
 				break;
 			}
-			case Message.MessageType.UserStoreChange: {
+			case Message.MessageType.ChangeUserStore: {
 				project.getUserStore().sync(message);
 				break;
 			}