manage storage in editor Channel

Author: ShMcK

src/Channel.ts

@@ -1,6 +1,7 @@
 import * as CR from 'typings'
 import * as vscode from 'vscode'
 
+import Storage from './services/storage'
 import tutorialConfig from './actions/tutorialConfig'
 import setupActions from './actions/setupActions'
 import solutionActions from './actions/solutionActions'
@@ -12,18 +13,23 @@ interface Channel {
 
 interface ChannelProps {
 	postMessage: (action: CR.Action) => Thenable<boolean>
-	storage: {
-		tutorial: any
-		stepProgress: any
-	}
+	workspaceState: vscode.Memento
 }
 
 class Channel implements Channel {
 	private postMessage: (action: CR.Action) => Thenable<boolean>
-	private storage: any
-	constructor({postMessage, storage}: ChannelProps) {
+	private currentTutorial: Storage<{id: string | null, version: string | null}>
+	private stepProgress: Storage<CR.StepProgress> | undefined
+	private workspaceState: vscode.Memento
+	constructor({postMessage, workspaceState}: ChannelProps) {
 		this.postMessage = postMessage
-		this.storage = storage
+		this.workspaceState = workspaceState
+
+		this.currentTutorial = new Storage<{id: string | null, version: string | null}>({
+			key: 'coderoad:currentTutorial',
+			storage: workspaceState,
+			defaultValue: {id: null, version: null}
+		})
 	}
 
 	// receive from webview
@@ -33,14 +39,19 @@ class Channel implements Channel {
 		switch (actionType) {
 			// continue from tutorial from local storage
 			case 'TUTORIAL_LOAD_STORED':
-				const tutorial = await this.storage.tutorial.get()
-				const stepProgress = await this.storage.stepProgress.get()
-
-				console.log('looking at stored')
-				console.log(JSON.stringify(tutorial))
-				console.log(JSON.stringify(stepProgress))
+				const tutorial = await this.currentTutorial.get()
 
-				if (tutorial && tutorial.id) {
+				if (tutorial && tutorial.id && tutorial.version) {
+					this.stepProgress = new Storage<CR.StepProgress>({
+						key: `coderoad:stepProgress:${tutorial.id}:${tutorial.version}`,
+						storage: this.workspaceState,
+						defaultValue: {}
+					})
+					const stepProgress = await this.stepProgress.get()
+					console.log('looking at stored')
+					console.log(JSON.stringify(tutorial))
+					console.log(JSON.stringify(stepProgress))
+					// communicate to client the tutorial & stepProgress state
 					this.send({type: 'CONTINUE_TUTORIAL', payload: {tutorial, stepProgress}})
 				} else {
 					this.send({type: 'NEW_TUTORIAL'})
@@ -49,13 +60,17 @@ class Channel implements Channel {
 				return
 			// clear tutorial local storage
 			case 'TUTORIAL_CLEAR':
-				this.storage.tutorial.set(null)
-				this.storage.stepProgress.set({})
+				this.currentTutorial.set({id: null, version: null})
+
+				// reset tutorial progress on clear
+				if (this.stepProgress) {
+					this.stepProgress.set({})
+				}
 				return
 			// configure test runner, language, git
 			case 'TUTORIAL_CONFIG':
 				tutorialConfig(action.payload)
-				this.storage.tutorial.set(action.payload)
+				this.currentTutorial.set(action.payload)
 				return
 			// run unit tests on step
 			case 'TEST_RUN':
@@ -78,6 +93,16 @@ class Channel implements Channel {
 	}
 	// send to webview
 	public send = async (action: CR.Action) => {
+
+		switch (action.type) {
+			case 'TEST_PASS':
+				// update local storage stepProgress
+				// stepProgress.update({
+				// 	[action.payload.stepId]: true
+				// })
+				return
+		}
+
 		const success = await this.postMessage(action)
 		if (!success) {
 			throw new Error(`Message post failure: ${JSON.stringify(action)}`)

src/editor/ReactWebView.ts

@@ -14,10 +14,7 @@ const getNonce = (): string => {
 
 interface ReactWebViewProps {
 	extensionPath: string
-	storage: {
-		tutorial: any
-		stepProgress: any
-	}
+	workspaceState: vscode.Memento
 }
 
 
@@ -32,7 +29,7 @@ class ReactWebView {
 	private disposables: vscode.Disposable[] = []
 	private channel: Channel
 
-	public constructor({extensionPath, storage}: ReactWebViewProps) {
+	public constructor({extensionPath, workspaceState}: ReactWebViewProps) {
 		this.extensionPath = extensionPath
 
 		// Create and show a new webview panel
@@ -45,8 +42,9 @@ class ReactWebView {
 		// This happens when the user closes the panel or when the panel is closed programmatically
 		this.panel.onDidDispose(this.dispose, this, this.disposables)
 
+		// channel connects webview to the editor
 		this.channel = new Channel({
-			storage,
+			workspaceState,
 			postMessage: (action: Action): Thenable<boolean> => {
 				return this.panel.webview.postMessage(action)
 			}

src/editor/commands.ts

@@ -1,6 +1,5 @@
-import * as G from 'typings/graphql'
 import * as vscode from 'vscode'
-import Storage from '../services/storage'
+import {EditorStorage} from 'typings'
 import ReactWebView from './ReactWebView'
 import runTest from '../actions/runTest'
 import {isEmptyWorkspace} from './workspace'
@@ -13,25 +12,15 @@ const COMMANDS = {
 }
 
 interface CreateCommandProps {
-	vscodeExt: vscode.ExtensionContext
+	extensionPath: string
+	workspaceState: vscode.Memento
 }
 
-export const createCommands = ({vscodeExt}: CreateCommandProps) => {
+export const createCommands = ({extensionPath, workspaceState}: CreateCommandProps) => {
 	// React panel webview
 	let webview: any
 	let currentStepId = ''
 
-	const tutorial = new Storage<G.Tutorial | null>({
-		key: 'coderoad:tutorial',
-		storage: vscodeExt.workspaceState
-	})
-
-	const stepProgress = new Storage<{[stepId: string]: boolean}>({
-		key: 'coderoad:progress',
-		storage: vscodeExt.workspaceState
-	})
-
-
 	return {
 		// initialize
 		[COMMANDS.START]: async () => {
@@ -53,11 +42,8 @@ export const createCommands = ({vscodeExt}: CreateCommandProps) => {
 
 			// activate machine
 			webview = new ReactWebView({
-				extensionPath: vscodeExt.extensionPath,
-				storage: {
-					tutorial,
-					stepProgress
-				}
+				extensionPath,
+				workspaceState,
 			})
 		},
 		// open React webview
@@ -86,10 +72,6 @@ export const createCommands = ({vscodeExt}: CreateCommandProps) => {
 					console.log('COMMAND TEST_PASS')
 					// send test pass message back to client
 					webview.send({type: 'TEST_PASS', payload})
-					// update local storage stepProgress
-					stepProgress.update({
-						[payload.stepId]: true
-					})
 					vscode.window.showInformationMessage('PASS')
 				},
 				onFail: () => {

src/editor/index.ts

@@ -31,9 +31,24 @@ class Editor {
 	}
 
 	private activateCommands = (): void => {
+		// NOTE: local storage must be bound to the vscodeExt.workspaceState
+
+		// store current tutorial id & version
+
+
+		// store step progress for current tutorial
+		// const stepProgress = new Storage<{[stepId: string]: boolean}>({
+		// 	key: 'coderoad:progress',
+		// 	storage: this.vscodeExt.workspaceState,
+		// 	defaultValue: {},
+		// })
+
 		const commands = createCommands({
-			vscodeExt: this.vscodeExt,
+			extensionPath: this.vscodeExt.extensionPath,
+			workspaceState: this.vscodeExt.workspaceState,
 		})
+
+		// register commands
 		for (const cmd in commands) {
 			const command: vscode.Disposable = vscode.commands.registerCommand(cmd, commands[cmd])
 			this.vscodeExt.subscriptions.push(command)

src/services/storage/index.ts

@@ -9,9 +9,18 @@ import * as vscode from 'vscode'
 class Storage<T> {
 	private key: string
 	private storage: vscode.Memento
-	constructor({key, storage}: {key: string, storage: vscode.Memento}) {
+	constructor({key, storage, defaultValue}: {key: string, storage: vscode.Memento, defaultValue?: T}) {
 		this.storage = storage
 		this.key = key
+		// set default if none exists
+		if (!defaultValue) {
+			return
+		}
+		this.get().then((value: T | null) => {
+			if (!value) {
+				this.set(defaultValue)
+			}
+		})
 	}
 	public get = async (): Promise<T | null> => {
 		const value: string | undefined = await this.storage.get(this.key)

typings/index.d.ts

@@ -1,4 +1,5 @@
 import {send} from 'xstate'
+import Storage from '../src/services/storage'
 import * as G from './graphql'
 
 export interface TutorialLevel {
@@ -98,6 +99,10 @@ export interface Progress {
 	complete: boolean
 }
 
+export interface StepProgress {
+	[stepId: string]: boolean
+}
+
 // current tutorial position
 export interface Position {
 	levelId: string
@@ -176,3 +181,8 @@ interface MessageState {
 
 // todo: type each string param and payload
 export type EditorDispatch = (type: string, payload?: MessageData | MessageState | any) => void
+
+export interface EditorStorage {
+	currentTutorial: Storage<{id: string | null, version: string | null}>
+	stepProgress: Storage<StepProgress>
+}