feat(overmind-devtools): splitter for actions and fixed storage issue

Author: christianalfoni

package-lock.json

@@ -27,7 +27,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.2.0",
     "@babel/preset-env": "^7.2.0",
-    "axios": "0.18.1",
+    "axios": "0.18.0",
     "color": "3.0.0",
     "color-hash": "1.0.3",
     "electron": "2.0.8",
@@ -56,7 +56,8 @@
     "vue": "2.5.16",
     "vue-hot-reload-api": "2.3.0",
     "vue-styled-components": "1.3.0",
-    "ws": "7.0.0"
+    "ws": "7.0.0",
+    "react-split-pane": "0.1.87"
   },
   "devDependencies": {
     "@babel/core": "7.4.5",

package.json

@@ -65,12 +65,12 @@ class DevtoolBackend {
         )
         break
       case 'storage:set':
-        this.evaluateDevtoolMessage(parsedMessage, () =>
+        this.evaluateDevtoolMessage(parsedMessage, () => {
           this.options.storage.set(
             parsedMessage.data.key,
             parsedMessage.data.data
           )
-        )
+        })
         break
       case 'storage:clear':
         this.evaluateDevtoolMessage(parsedMessage, () =>

packages/node_modules/overmind-devtools-client/DevtoolBackend.js

@@ -19,19 +19,20 @@
 		"devtool"
 	],
 	"dependencies": {
+		"emotion": "^9.2.12",
+		"lodash.throttle": "^4.1.1",
 		"overmind-react": "next",
+		"overmind-themes": "next",
 		"react": "16.8.1",
 		"react-dom": "16.8.1",
-    "overmind-themes": "next",
-    "ws": "^7.0.0",
-    "emotion": "^9.2.12",
-    "lodash.throttle": "^4.1.1"
+		"react-split-pane": "^0.1.87",
+		"ws": "^7.0.0"
 	},
 	"devDependencies": {
-    "@types/node": "^10.12.21",
-    "@types/ws": "6.0.1",
+		"@types/node": "^10.12.21",
+		"@types/ws": "6.0.1",
 		"@babel/plugin-proposal-class-properties": "^7.3.4",
-    "terser-webpack-plugin": "^1.3.0",
-    "webpack-merge": "^4.2.1"
+		"terser-webpack-plugin": "^1.3.0",
+		"webpack-merge": "^4.2.1"
 	}
 }

packages/node_modules/overmind-devtools-client/package.json

@@ -1,4 +1,5 @@
 import { createElement, FunctionComponent } from 'react'
+import SplitPane from 'react-split-pane'
 import { useOvermind } from '../../overmind'
 import ActionsList from '../ActionsList'
 import Action from '../Action'
@@ -7,15 +8,22 @@ import * as textStyles from '../../styles/text'
 import ActionsTools from '../ActionsTools'
 
 const Actions: FunctionComponent = () => {
-  const { state } = useOvermind()
+  const { state, actions } = useOvermind()
 
   return (
     <div className={styles.wrapper}>
       <ActionsTools />
       {state.currentAction ? (
         <div className={styles.columns}>
-          <ActionsList />
-          <Action action={state.currentAction} />
+          <SplitPane
+            split="vertical"
+            minSize={100}
+            defaultSize={state.actionsSplitSize}
+            onChange={(size) => actions.updateActionsSplitSize(size)}
+          >
+            <ActionsList />
+            <Action action={state.currentAction} />
+          </SplitPane>
         </div>
       ) : (
         <div className={styles.centerWrapper}>

packages/node_modules/overmind-devtools-client/src/components/Actions/index.tsx

@@ -25,6 +25,37 @@ injectGlobal`
   #app {
     height: 100%;
   }
+
+  .Resizer {
+    background: var(--colors-background);
+    opacity: .2;
+    z-index: 1;
+    box-sizing: border-box;
+    background-clip: padding-box;
+  }
+
+ .Resizer:hover {
+    transition: all 0.5s ease;
+  }
+  .Resizer.vertical {
+    width: 5px;
+    margin: 0 -5px;
+    border-left: 2px solid var(--colors-border);
+    border-right: 2px solid var(--colors-border);
+    opacity: 0.8;
+    cursor: col-resize;
+  }
+
+  .Resizer.vertical:hover {
+    opacity: 1;
+  }
+  
+  .Resizer.disabled {
+    cursor: not-allowed;
+  }
+  .Resizer.disabled:hover {
+    border-color: transparent;
+  }
 `
 
 window.onerror = (_, _2, _3, _4, error) => {

packages/node_modules/overmind-devtools-client/src/index.tsx

@@ -1,4 +1,4 @@
-import { Action, pipe, Operator, AsyncAction } from 'overmind'
+import { Action, pipe, Operator, AsyncAction, mutate, debounce } from 'overmind'
 import {
   Message,
   Tab,
@@ -215,3 +215,12 @@ export const setAppDataFromStorage: AsyncAction<{
       : ''
     state.currentTab = tab || state.currentTab
   })
+
+export const updateActionsSplitSize: Operator<number> = pipe(
+  debounce(200),
+  mutate(async ({ state, effects }, size) => {
+    state.actionsSplitSize = size
+
+    await effects.storage.set('devtool.actionsSplitSize', size)
+  })
+)

packages/node_modules/overmind-devtools-client/src/overmind/actions.ts

@@ -7,6 +7,9 @@ const onInitialize: OnInitialize = async ({ state, effects }, app) => {
   effects.connector.onDisconnect(app.actions.onDisconnect)
 
   await effects.connector.connect(state.port)
+
+  state.actionsSplitSize =
+    (await effects.storage.get('devtool.actionsSplitSize')) || 200
 }
 
 export default onInitialize

packages/node_modules/overmind-devtools-client/src/overmind/onInitialize.ts

@@ -40,6 +40,7 @@ type State = {
   history: Derive<State, HistoryRecord<any, any>[]>
   currentOperatorsByPath: Derive<State, OperatorsByPath[]>
   isShowingRuntime: boolean
+  actionsSplitSize: number
 }
 
 const state: State = {
@@ -48,6 +49,7 @@ const state: State = {
   error: null,
   showApps: false,
   currentAppName: null,
+  actionsSplitSize: 200,
   port: 3031,
   apps: {},
   newPortValue: '',

packages/node_modules/overmind-devtools-client/src/overmind/state.ts

@@ -22,7 +22,29 @@ function createWindow() {
       app.relaunch()
       app.quit()
     },
-    storage,
+    // This storage requires objects to be stored, for some weird reason
+    storage: {
+      get(key) {
+        return new Promise((resolve) => {
+          storage.get(key, null, (_, data) => {
+            if (data) {
+              resolve(data.value)
+            }
+          })
+        })
+      },
+      set(key, value) {
+        return new Promise((resolve) => {
+          storage.set(
+            key,
+            {
+              value,
+            },
+            resolve
+          )
+        })
+      },
+    },
   })
 
   function onPortSubmit(newPort) {