feat(overmind-devtools-client): ability to clear actions and 1s separator

Author: christianalfoni

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

@@ -1,21 +1,37 @@
-import { createElement, FunctionComponent } from 'react'
+import { css } from 'emotion'
+import { Fragment, FunctionComponent, createElement } from 'react'
+import { FaChevronDown } from 'react-icons/fa'
+
 import { useOvermind } from '../../overmind'
 import { ActionsListItemType } from '../../overmind/types'
 import { nameToColor } from '../../overmind/utils'
 import * as textStyles from '../../styles/text'
 import * as styles from './styles'
-import { css } from 'emotion'
 
 const ActionsList: FunctionComponent = () => {
   const { state, actions } = useOvermind()
 
   return (
     <div className={styles.wrapper}>
-      {state.currentApp.actionsList.map((item) => {
+      {state.currentApp.actionsList.length ? (
+        <div
+          className={styles.clearItems}
+          onClick={() => actions.clearActions()}
+        >
+          clear
+          <FaChevronDown style={{ marginLeft: '0.25rem' }} />
+        </div>
+      ) : null}
+      {state.currentApp.actionsList.map((item, index) => {
         if (item.type === ActionsListItemType.ACTION) {
           const action = state.currentApp.actions[item.id]
+          const nextItem = state.currentApp.actionsList[index + 1]
+          const nextAction =
+            nextItem && nextItem.type === ActionsListItemType.ACTION
+              ? state.currentApp.actions[nextItem.id]
+              : null
 
-          return (
+          const actionResult = (
             <div
               className={css(
                 styles.actionItem,
@@ -41,6 +57,16 @@ const ActionsList: FunctionComponent = () => {
               />
             </div>
           )
+          if (nextAction && action.time - nextAction.time >= 1000) {
+            return (
+              <Fragment key={item.id}>
+                {actionResult}
+                <div className={styles.separator} />
+              </Fragment>
+            )
+          }
+
+          return actionResult
         }
         const mainAction = state.currentApp.actions[item.actionIds[0]]
         const groupedActionIds = item.actionIds.slice(1)

packages/node_modules/overmind-devtools-client/src/components/ActionsList/styles.ts

@@ -1,13 +1,33 @@
 import { css } from 'emotion'
+
 import { colors } from '../../theme'
 
+export const separator = css({
+  height: 3,
+  backgroundColor: colors.foreground,
+  margin: '2px 0',
+})
+
 export const wrapper = css({
   padding: '1rem',
   height: '100%',
   overflowY: 'scroll',
   boxSizing: 'border-box',
 })
 
+export const clearItems = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  padding: '0 1rem 1rem 1rem',
+  textDecoration: 'underline',
+  cursor: 'pointer',
+  opacity: 1,
+  ':hover': {
+    opacity: 0.9,
+  },
+})
+
 export const actionItem = css({
   position: 'relative',
   display: 'flex',

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

@@ -224,3 +224,8 @@ export const updateActionsSplitSize: Operator<number> = pipe(
     await effects.storage.set('devtool.actionsSplitSize', size)
   })
 )
+
+export const clearActions: Action = ({ state }) => {
+  state.currentApp.actionsList = []
+  state.currentApp.currentActionId = null
+}

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

@@ -181,6 +181,7 @@ export const addAction: () => Operator<StartActionMessage> = () =>
       isRunning: true,
       operators: {},
       hasError: false,
+      time: Date.now(),
     }
 
     if (action.parentExecution) {

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

@@ -90,6 +90,7 @@ export type Action = {
   }
   value: any
   hasError: boolean
+  time: number
 }
 
 export type Actions = {