From d8336586e8030a3b06b5d82354e1f18ff17dc9fc Mon Sep 17 00:00:00 2001 From: Thomas Jacob Date: Mon, 18 Dec 2017 11:37:42 +0100 Subject: [PATCH] feat(store): save preference of last opened styleguide and page --- src/component/presentation/preview.tsx | 4 +-- src/store/index.ts | 49 +++++++++++++++++++++++--- src/store/json.ts | 2 +- src/store/preferences.ts | 37 +++++++++++++++++++ 4 files changed, 85 insertions(+), 7 deletions(-) create mode 100644 src/store/preferences.ts diff --git a/src/component/presentation/preview.tsx b/src/component/presentation/preview.tsx index baa9954bd..5bef7a6c1 100644 --- a/src/component/presentation/preview.tsx +++ b/src/component/presentation/preview.tsx @@ -31,8 +31,8 @@ export class Preview extends React.Component { digital products.

- To get started, you need a style-guide project (like a Patternplate project), or - alternatively, you can download a prototype style-guide (design kit) from: + To get started, you need a styleguide project (like a Patternplate project), or + alternatively, you can download a prototype styleguide (design kit) from:

diff --git a/src/store/index.ts b/src/store/index.ts index 644cce934..60ada83cb 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -2,11 +2,13 @@ import { PatternFolder } from './pattern/folder'; import { JsonArray, JsonObject, Persister } from './json'; import * as MobX from 'mobx'; import { IObservableArray } from 'mobx/lib/types/observablearray'; +import * as OsUtils from 'os'; import { Page } from './page'; import { PageElement } from './page/page_element'; import { PageRef } from './project/page_ref'; import * as PathUtils from 'path'; import { Pattern } from './pattern'; +import { Preferences } from './preferences'; import { Project } from './project'; export class Store { @@ -16,10 +18,35 @@ export class Store { @MobX.observable private patternSearchTerm: string = ''; @MobX.observable private projects: Project[] = []; @MobX.observable private patternRoot: PatternFolder; + @MobX.observable private preferences: Preferences; @MobX.observable private selectedElement?: PageElement | undefined; @MobX.observable private elementHasFocus?: boolean = false; @MobX.observable private styleGuidePath: string; + public constructor() { + try { + this.preferences = Preferences.fromJsonObject( + Persister.loadYamlOrJson(this.getPreferencesPath()) + ); + } catch (error) { + this.preferences = new Preferences(); + } + + try { + const lastStyleguidePath = this.preferences.getLastStyleguidePath(); + if (lastStyleguidePath) { + this.openStyleguide(lastStyleguidePath); + + const lastPageId = this.preferences.getLastPageId(); + if (lastPageId) { + this.openPage(lastPageId); + } + } + } catch (error) { + console.error(`Failed to open last styleguide or page: ${error}`); + } + } + public addProject(project: Project): void { this.projects.push(project); } @@ -82,6 +109,10 @@ export class Store { return this.patternSearchTerm; } + public getPreferencesPath(): string { + return PathUtils.join(OsUtils.homedir(), '.alva-prefs.yaml'); + } + public getProjects(): Project[] { return this.projects; } @@ -98,13 +129,13 @@ export class Store { return this.styleGuidePath; } - public openStyleguide(styleGuidePath: string): void { + public openStyleguide(styleguidePath: string): void { MobX.transaction(() => { - if (!PathUtils.isAbsolute(styleGuidePath)) { + if (!PathUtils.isAbsolute(styleguidePath)) { // Currently, store is two levels below alva, so go two up - styleGuidePath = PathUtils.join(styleGuidePath); + styleguidePath = PathUtils.join(styleguidePath); } - this.styleGuidePath = styleGuidePath; + this.styleGuidePath = styleguidePath; this.currentPage = undefined; this.patternRoot = new PatternFolder(this, ''); this.patternRoot.addTextPattern(); @@ -117,6 +148,9 @@ export class Store { this.addProject(project); }); }); + + this.preferences.setLastStyleguidePath(styleguidePath); + this.savePreferences(); } public openFirstPage(): void { @@ -140,6 +174,9 @@ export class Store { this.selectedElement = undefined; }); + + this.preferences.setLastPageId(this.currentPage ? this.currentPage.getId() : undefined); + this.savePreferences(); } public removeProject(project: Project): void { @@ -163,6 +200,10 @@ export class Store { Persister.saveYaml(projectsPath, projectsJsonObject); } + private savePreferences(): void { + Persister.saveYaml(this.getPreferencesPath(), this.preferences.toJsonObject()); + } + public searchPatterns(term: string): Pattern[] { return this.patternRoot ? this.patternRoot.searchPatterns(term) : []; } diff --git a/src/store/json.ts b/src/store/json.ts index ae8672cbd..c1783c6a6 100644 --- a/src/store/json.ts +++ b/src/store/json.ts @@ -28,7 +28,7 @@ export class Persister { } public static saveYaml(path: string, jsonObject: JsonObject): void { - const fileContent: string = JsYaml.safeDump(jsonObject, { noRefs: true }); + const fileContent: string = JsYaml.safeDump(jsonObject, { skipInvalid: true, noRefs: true }); FileUtils.writeFileSync(path, fileContent, 'utf8'); } } diff --git a/src/store/preferences.ts b/src/store/preferences.ts new file mode 100644 index 000000000..48bef2edd --- /dev/null +++ b/src/store/preferences.ts @@ -0,0 +1,37 @@ +import { JsonObject } from './json'; +import * as MobX from 'mobx'; + +export class Preferences { + @MobX.observable private lastStyleguidePath?: string; + @MobX.observable private lastPageId?: string; + + public static fromJsonObject(jsonObject: JsonObject): Preferences { + const preferences: Preferences = new Preferences(); + preferences.lastStyleguidePath = jsonObject.lastStyleguidePath as string; + preferences.lastPageId = jsonObject.lastPageId as string; + return preferences; + } + + public getLastStyleguidePath(): string | undefined { + return this.lastStyleguidePath; + } + + public getLastPageId(): string | undefined { + return this.lastPageId; + } + + public setLastStyleguidePath(lastStyleguidePath?: string): void { + this.lastStyleguidePath = lastStyleguidePath; + } + + public setLastPageId(lastPageId?: string): void { + this.lastPageId = lastPageId; + } + + public toJsonObject(): JsonObject { + return { + lastStyleguidePath: this.getLastStyleguidePath(), + lastPageId: this.getLastPageId() + }; + } +}