Change editorWidth to percentage

This means that the change in width (in pixels) would need to be
converted to a percentage change (in the component) and the string must
be converted, added to the percentage change, then parsed again. A
possble optimization is keeping the number as a float (which would
involve one parse when passing it as a prop). However, I find it
semantically cleaner to keep the `editorWidth` as a string that expresses
a percentage, as compared to an `editorWidthPercentage` that holds a
number.

src/actions/playground.ts

@@ -6,7 +6,7 @@ export const updateEditorValue: ActionCreator<actionTypes.IAction> = (newEditorV
   payload: newEditorValue
 })
 
-export const updateEditorWidth: ActionCreator<actionTypes.IAction> = (widthChange: number) => ({
+export const updateEditorWidth: ActionCreator<actionTypes.IAction> = (widthChange: string) => ({
   type: actionTypes.CHANGE_EDITOR_WIDTH,
   payload: widthChange
 })

src/components/IDE/index.tsx

@@ -6,8 +6,8 @@ import EditorContainer from '../../containers/IDE/EditorContainer'
 import ReplContainer from '../../containers/IDE/ReplContainer'
 
 export interface IIDEProps {
-  editorWidth: number
-  handleEditorWidthChange: (widthChange: number) => void
+  editorWidth: string
+  handleEditorWidthChange: (widthChange: number) => void // TODO
 }
 
 class IDE extends React.Component<IIDEProps, {}> {
@@ -20,7 +20,7 @@ class IDE extends React.Component<IIDEProps, {}> {
             size={{ width: this.props.editorWidth, height: '100%' }}
             // tslint:disable-next-line jsx-no-lambda
             onResizeStop={(e, direction, ref, d) => {
-              this.props.handleEditorWidthChange(d.width)
+              this.props.handleEditorWidthChange(d.width * 100 / window.innerWidth)
             }}
             enable={{
               top: false,

src/reducers/playground.ts

@@ -32,7 +32,7 @@ export const reducer: Reducer<IPlaygroundState> = (state = defaultPlayground, ac
     case CHANGE_EDITOR_WIDTH:
       return {
         ...state,
-        editorWidth: action.payload + state.editorWidth
+        editorWidth: (parseFloat(state.editorWidth.slice(0, -1)) + action.payload).toString() + '%'
       }
     case CLEAR_REPL_INPUT:
       return {

src/reducers/states.ts

@@ -13,7 +13,7 @@ export interface IApplicationState {
 
 export interface IPlaygroundState {
   readonly editorValue: string
-  readonly editorWidth: number
+  readonly editorWidth: string
   readonly replValue: string
   readonly context: Context
   readonly output: InterpreterOutput[]
@@ -89,7 +89,7 @@ export const defaultApplication: IApplicationState = {
 
 export const defaultPlayground: IPlaygroundState = {
   editorValue: '',
-  editorWidth: 500,
+  editorWidth: '50%',
   replValue: '',
   context: createContext(),
   output: []