feat(component): menu for saving projects

src/component/app.tsx

@@ -1,5 +1,5 @@
 import { Chrome } from './container/chrome';
-import { WebviewTag } from 'electron';
+import { MenuItemConstructorOptions, remote, WebviewTag } from 'electron';
 import { ElementList } from './container/element_list';
 import { IconName, IconRegistry } from '../lsg/patterns/icons';
 import { fonts } from '../lsg/patterns/fonts/index';
@@ -16,6 +16,7 @@ import * as React from 'react';
 import * as ReactDom from 'react-dom';
 import { Store } from '../store';
 import styledComponents, { injectGlobal } from 'styled-components';
+const { Menu } = remote;
 
 // Global style
 // tslint:disable-next-line:no-unused-expression
@@ -93,6 +94,42 @@ class App extends React.Component<AppProps> {
 			store.openStyleguide('../designkit');
 			store.openPage('meet-alva', 'homepage');
 		});
+
+		const menuTemplate: MenuItemConstructorOptions[] = [
+			{
+				label: 'Alva',
+				submenu: []
+			},
+			{
+				label: 'Edit',
+				submenu: [
+					{
+						label: 'Save',
+						accelerator: 'Cmd+S',
+						role: 'save',
+						click: () => {
+							store.savePage();
+						}
+					}
+				]
+			},
+			{
+				label: 'View',
+				submenu: [
+					{
+						label: 'Toggle Developer Tools',
+						accelerator: 'Cmd+Alt+I',
+						role: 'save',
+						click: () => {
+							remote.getCurrentWindow().webContents.openDevTools();
+						}
+					}
+				]
+			}
+		];
+
+		const menu = Menu.buildFromTemplate(menuTemplate);
+		Menu.setApplicationMenu(menu);
 	}
 
 	public render(): JSX.Element {
@@ -148,7 +185,7 @@ MobX.autorun(() => {
 
 	const page: Page | undefined = store.getCurrentPage();
 	const message: JsonObject = {
-		page: page ? page.toJson() : undefined,
+		page: page ? page.toJsonObject() : undefined,
 		pageId: page ? page.getPageId() : undefined,
 		projectId: page ? page.getProjectId() : undefined
 	};

src/store/index.ts

@@ -102,7 +102,7 @@ export class Store {
 			const projectPath: string = PathUtils.join(this.getProjectsPath(), projectId);
 			const pagePath: string = PathUtils.join(projectPath, pageId + '.json');
 			const json: JsonObject = JSON.parse(FileUtils.readFileSync(pagePath, 'utf8'));
-			this.currentPage = Page.fromJson(json, projectId, pageId, this);
+			this.currentPage = Page.fromJsonObject(json, projectId, pageId, this);
 
 			this.selectedElement = undefined;
 		});
@@ -122,7 +122,7 @@ export class Store {
 
 	public setPageFromJsonInternal(json: JsonObject, projectId: string, pageId: string): void {
 		MobX.transaction(() => {
-			this.currentPage = json ? Page.fromJson(json, projectId, pageId, this) : undefined;
+			this.currentPage = json ? Page.fromJsonObject(json, projectId, pageId, this) : undefined;
 			this.selectedElement = undefined;
 		});
 	}

src/store/page/index.ts

@@ -18,10 +18,15 @@ export class Page {
 		this.name = 'New Page';
 	}
 
-	public static fromJson(json: JsonObject, projectId: string, pageId: string, store: Store): Page {
+	public static fromJsonObject(
+		json: JsonObject,
+		projectId: string,
+		pageId: string,
+		store: Store
+	): Page {
 		const page = new Page(projectId, pageId, store);
 		page.name = json.name as string;
-		page.root = PageElement.fromJson(json.root as JsonObject, store);
+		page.root = PageElement.fromJsonObject(json.root as JsonObject, store);
 
 		return page;
 	}
@@ -45,11 +50,11 @@ export class Page {
 	public save(): void {
 		const projectPath: string = PathUtils.join(this.store.getProjectsPath(), this.projectId);
 		const pagePath: string = PathUtils.join(projectPath, this.pageId + '.json');
-		const json: JsonObject = this.toJson();
-		FileUtils.writeFileSync(pagePath, json, 'utf8');
+		const json: JsonObject = this.toJsonObject();
+		FileUtils.writeFileSync(pagePath, JSON.stringify(json), 'utf8');
 	}
 
-	public toJson(): JsonObject {
-		return { name: this.name, root: this.root ? this.root.toJson() : undefined };
+	public toJsonObject(): JsonObject {
+		return { name: this.name, root: this.root ? this.root.toJsonObject() : undefined };
 	}
 }

src/store/page/page_element.ts

@@ -12,7 +12,7 @@ export class PageElement {
 	private pattern?: Pattern;
 	@MobX.observable private propertyValues: Map<string, PropertyValue> = new Map();
 
-	public static fromJson(json: JsonObject, store: Store, parent?: PageElement): PageElement {
+	public static fromJsonObject(json: JsonObject, store: Store, parent?: PageElement): PageElement {
 		const element = new PageElement();
 		element.parent = parent;
 
@@ -45,7 +45,7 @@ export class PageElement {
 
 	protected createElementOrValue(json: JsonValue, store: Store): PageElement | PropertyValue {
 		if (json && (json as JsonObject)['_type'] === 'pattern') {
-			return PageElement.fromJson(json as JsonObject, store, this);
+			return PageElement.fromJsonObject(json as JsonObject, store, this);
 		} else {
 			return json as PropertyValue;
 		}
@@ -89,12 +89,13 @@ export class PageElement {
 		this.propertyValues.set(id, value);
 	}
 
-	public toJson(): JsonObject {
+	public toJsonObject(): JsonObject {
 		const json: JsonObject = { _type: 'pattern', pattern: this.patternPath };
 
 		json.children = this.children.map(
-			// tslint:disable-next-line:no-any
-			(element: PageElement) => (element.toJson ? element.toJson() : (element as any))
+			(element: PageElement) =>
+				// tslint:disable-next-line:no-any
+				element.toJsonObject ? element.toJsonObject() : (element as any)
 		);
 		json.properties = {};
 
@@ -108,7 +109,7 @@ export class PageElement {
 
 	protected valueToJson(value: PropertyValue): JsonValue {
 		if (value instanceof PageElement) {
-			return value.toJson();
+			return value.toJsonObject();
 		} else if (value instanceof Object) {
 			const jsonObject: JsonObject = {};
 			Object.keys(value).forEach((propertyId: string) => {