Fix playground links making editor un-editable (#134)

* Fix links making playground uneditable

The parsed program is now updated only once, when the page loads, rather
than when the component is updated.

* Revert "Fix links making playground uneditable"

This reverts commit 599db0f.

* Standardize parameters for workspace

Now, we can pass in only a value and an optional library number.
This allows the Playground to handle parsing of the library program. If
there is a program passed in via the hash, the parsed program will be
passed. If not, the parsed program will be undefind, causing the redux
store value to be passed (using the `||` operator).

* Add test for playground with link

Also updated the old test snapshot

* Bump version 0.1.1 -> 0.1.2

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "cadet-frontend",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "scripts-info": {
     "format": "Format source code",
     "start": "Start the Webpack development server",

src/components/Playground.tsx

@@ -1,5 +1,6 @@
 import { Text } from '@blueprintjs/core'
 import { IconNames } from '@blueprintjs/icons'
+import { decompressFromEncodedURIComponent } from 'lz-string'
 import * as qs from 'query-string'
 import * as React from 'react'
 import { HotKeys } from 'react-hotkeys'
@@ -36,9 +37,8 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
         handlers={this.handlers}
       >
         <WorkspaceContainer
-          libQuery={parseLibrary(this.props)}
-          prgrmQuery={parsePrgrm(this.props)}
-          editorValue={this.props.editorValue}
+          library={parseLibrary(this.props)}
+          editorValue={parsePrgrm(this.props) || this.props.editorValue}
           sideContentTabs={[playgroundIntroduction]}
         />
       </HotKeys>
@@ -53,7 +53,8 @@ class Playground extends React.Component<IPlaygroundProps, PlaygroundState> {
 const parsePrgrm = (props: IPlaygroundProps) => {
   const qsParsed = qs.parse(props.location.hash)
   // legacy support
-  return qsParsed.lz !== undefined ? qsParsed.lz : qsParsed.prgrm
+  const program = qsParsed.lz !== undefined ? qsParsed.lz : qsParsed.prgrm
+  return program !== undefined ? decompressFromEncodedURIComponent(program) : undefined
 }
 
 const parseLibrary = (props: IPlaygroundProps) => {

src/components/__tests__/Playground.tsx

@@ -13,3 +13,13 @@ test('Playground renders correctly', () => {
   const tree = shallow(app)
   expect(tree.debug()).toMatchSnapshot()
 })
+
+test('Playground with link renders correctly', () => {
+  const props = {
+    ...mockRouterProps('/playground#lib=2&prgrm=CYSwzgDgNghgngCgOQAsCmUoHsCESCUA3EA', {}),
+    editorValue: 'This should not show up'
+  }
+  const app = <Playground {...props} />
+  const tree = shallow(app)
+  expect(tree.debug()).toMatchSnapshot()
+})

src/components/__tests__/__snapshots__/Playground.tsx.snap

@@ -2,6 +2,12 @@
 
 exports[`Playground renders correctly 1`] = `
 "<HotKeys className=\\"Playground pt-dark\\" keyMap={{...}} handlers={{...}}>
-  <Connect(Workspace) libQuery={[undefined]} prgrmQuery={[undefined]} editorValue=\\"Test value\\" sideContentTabs={{...}} />
+  <Connect(Workspace) library={[undefined]} editorValue=\\"Test value\\" sideContentTabs={{...}} />
+</HotKeys>"
+`;
+
+exports[`Playground with link renders correctly 1`] = `
+"<HotKeys className=\\"Playground pt-dark\\" keyMap={{...}} handlers={{...}}>
+  <Connect(Workspace) library={2} editorValue=\\"display(\\\\'hello!\\\\');\\" sideContentTabs={{...}} />
 </HotKeys>"
 `;

src/components/workspace/index.tsx

@@ -1,4 +1,3 @@
-import { decompressFromEncodedURIComponent } from 'lz-string'
 import Resizable, { ResizableProps, ResizeCallback } from 're-resizable'
 import * as React from 'react'
 
@@ -22,8 +21,7 @@ export type DispatchProps = {
 
 export type OwnProps = {
   controlBarOptions?: ControlBarOwnProps
-  libQuery?: number
-  prgrmQuery?: string
+  library?: number
   editorValue?: string
   mcq?: IMCQQuestion
   sideContentTabs: SideContentTab[]
@@ -41,20 +39,9 @@ class Workspace extends React.Component<WorkspaceProps, {}> {
   private sideDividerDiv: HTMLDivElement
 
   public componentDidMount() {
-    this.componentDidUpdate()
     this.maxDividerHeight = this.sideDividerDiv.clientHeight
   }
 
-  public componentDidUpdate() {
-    if (this.props.prgrmQuery !== undefined) {
-      const prgrmParsed = decompressFromEncodedURIComponent(this.props.prgrmQuery)
-      this.props.updateEditorValue(prgrmParsed)
-    }
-    if (this.props.libQuery !== undefined) {
-      this.props.changeChapter(this.props.libQuery)
-    }
-  }
-
   /**
    * side-content-divider gives the side content a bottom margin. I use a div
    * element instead of CSS so that when the user resizes the side-content all