feat(overmind-devtools): history

Author: christianalfoni

package-lock.json

@@ -48,6 +48,7 @@
     "react": "16.8.1",
     "react-dom": "16.8.1",
     "react-hot-loader": "^4.3.4",
+    "react-icons": "^3.5.0",
     "styled-components": "3.3.3",
     "tslib": "1.9.3",
     "vue": "2.5.16",

package.json

@@ -1,11 +1,11 @@
-import { createElement, SFC } from 'react'
+import { createElement, FunctionComponent } from 'react'
 import { useOvermind } from '../../overmind'
 import * as styles from './styles'
 import ActionOperator from '../ActionOperator'
 import Flush from '../ActionFlush'
 import { getActionId, getOperatorId } from '../../overmind/utils'
 
-const Action: SFC = () => {
+const Action: FunctionComponent = () => {
   const { state } = useOvermind()
   const flushReference =
     state.currentApp.flushByActionId[getActionId(state.currentAction)]

packages/node_modules/overmind-devtools/src/components/Action/index.tsx

@@ -5,8 +5,8 @@ import * as actionStyles from '../Action/styles'
 import * as styles from './styles'
 import * as textStyles from '../../styles/text'
 import Path from '../ActionPath'
-import Icon from '../common/Icon'
 import { css } from 'emotion'
+import { FaCode, FaLink } from 'react-icons/fa'
 
 type Props = {
   flush: FlushType
@@ -24,8 +24,8 @@ const ActionFlush: FunctionComponent<Props> = ({ flush }) => {
           {flush.components.map((componentId) => (
             <div key={componentId}>
               <span className={css(textStyles.description, styles.flushItem)}>
-                <span className={styles.fadedOut}>
-                  <Icon>code</Icon>
+                <span className={styles.icon}>
+                  <FaCode />
                 </span>{' '}
                 {state.currentApp.components[componentId].name}
               </span>
@@ -34,8 +34,8 @@ const ActionFlush: FunctionComponent<Props> = ({ flush }) => {
           {flush.derived.map((derivedPath, index) => (
             <div key={derivedPath + '_' + index}>
               <span className={css(textStyles.description, styles.flushItem)}>
-                <span className={styles.fadedOut}>
-                  <Icon>chain</Icon>
+                <span className={styles.icon}>
+                  <FaLink />
                 </span>{' '}
                 {derivedPath}
               </span>

packages/node_modules/overmind-devtools/src/components/ActionFlush/index.tsx

@@ -34,6 +34,8 @@ export const flushItem = css({
   },
 })
 
-export const fadedOut = css({
+export const icon = css({
   opacity: 0.75,
+  display: 'flex',
+  alignItems: 'center',
 })

packages/node_modules/overmind-devtools/src/components/ActionFlush/styles.ts

@@ -1,13 +1,11 @@
-import { createElement, SFC } from 'react'
-import { useOvermind } from '../../overmind'
+import { createElement, FunctionComponent } from 'react'
 import {
   Operator as OperatorType,
   EventType,
   Effect,
   Mutation,
 } from '../../overmind/types'
 import ValueInspector from '../ValueInspector'
-import Icon from '../common/Icon'
 import Path from '../ActionPath'
 import * as styles from './styles'
 import * as actionStyles from '../Action/styles'
@@ -22,7 +20,11 @@ type Props = {
   operatorIndex: number
 }
 
-const ActionOperator: SFC<Props> = ({ prevOperator, operator, value }) => {
+const ActionOperator: FunctionComponent<Props> = ({
+  prevOperator,
+  operator,
+  value,
+}) => {
   return (
     <div className={actionStyles.pipe}>
       <Path

packages/node_modules/overmind-devtools/src/components/ActionOperator/index.tsx

@@ -1,12 +1,16 @@
-import { createElement, SFC } from 'react'
+import { createElement, FunctionComponent } from 'react'
 import * as styles from './styles'
 
 type Props = {
   visible?: boolean
   showPathTag?: boolean
 }
 
-const ActionPath: SFC<Props> = ({ showPathTag = true, visible, children }) => (
+const ActionPath: FunctionComponent<Props> = ({
+  showPathTag = true,
+  visible,
+  children,
+}) => (
   <div className={styles.path(visible)}>
     <div className={styles.pathLine} />
     {children ? (

packages/node_modules/overmind-devtools/src/components/ActionPath/index.tsx

@@ -1,4 +1,4 @@
-import { createElement, FunctionComponent, Fragment, useState } from 'react'
+import { createElement, FunctionComponent } from 'react'
 import * as styles from './styles'
 import { useOvermind } from '../../overmind'
 import { isValidJson } from '../../overmind/utils'

packages/node_modules/overmind-devtools/src/components/ActionPayload/index.tsx

@@ -1,12 +1,12 @@
-import { createElement, SFC } from 'react'
+import { createElement, FunctionComponent } from 'react'
 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: SFC = () => {
+const ActionsList: FunctionComponent = () => {
   const { state, actions } = useOvermind()
 
   return (

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

@@ -4,7 +4,6 @@ import { useOvermind } from '../../overmind'
 import ActionSelector from '../ActionSelector'
 import ActionPayload from '../ActionPayload'
 import { colors } from '../../theme'
-import { isValidPayload } from '../../overmind/utils'
 
 const ActionsTools: FunctionComponent = () => {
   const { state, actions } = useOvermind()