actions.ts

import { Action, pipe, OnInitialize, Operator } from 'overmind'
import {
  Message,
  Tab,
  AppMessageType,
  ExecutionType,
  ActionsListItemType,
} from './types'
import {
  forkEachMessage,
  ensureCurrentApp,
  addFlushAndRunMutations,
  updateComponent,
  addComponent,
  removeComponent,
  updateDerived,
  updateFlushWithDerived,
  addAction,
  addOperator,
  updateFlushWithReactionUpdate,
  updateOperator,
  updateAction,
  addMutations,
  addEffect,
  setPortExists,
  isPortExistsMessage,
  getMessages,
  addState,
  ensureApp,
  addClientMessages,
} from './operators'

export const onInitialize: OnInitialize = async ({
  value: actions,
  state,
  storage,
  connector,
}) => {
  const port = await storage.get<string>('currentPort')
  if (port) {
    state.port = port
  }
  connector.onMessage(actions.onMessage)
  connector.connect(state.port)
}

const handleClientMessage: Operator<Message, any> = pipe(
  ensureCurrentApp,
  ensureApp,
  addClientMessages,
  getMessages,
  forkEachMessage({
    [AppMessageType.PORT_EXISTS]: setPortExists,
    [ExecutionType.INIT]: addState,
    [ExecutionType.FLUSH]: addFlushAndRunMutations,
    [ExecutionType.DERIVED]: updateDerived,
    [ExecutionType.MUTATIONS]: addMutations,
    [ExecutionType.EFFECT]: addEffect,
    [ExecutionType.COMPONENT_ADD]: addComponent,
    [ExecutionType.COMPONENT_UPDATE]: updateComponent,
    [ExecutionType.COMPONENT_REMOVE]: removeComponent,
    [ExecutionType.DERIVED_DIRTY]: updateFlushWithDerived,
    [ExecutionType.REACTION_UPDATE]: updateFlushWithReactionUpdate,
    [ExecutionType.ACTION_START]: addAction,
    [ExecutionType.OPERATOR_START]: addOperator,
    [ExecutionType.OPERATOR_END]: updateOperator,
    [ExecutionType.ACTION_END]: updateAction,
  })
)

export const onMessage: Operator<Message, any> = pipe(
  isPortExistsMessage({
    true: setPortExists,
    false: handleClientMessage,
  })
)

export const setError: Action<string> = ({ value: error, state }) =>
  (state.error = error)

export const changeNewPortValue: Action<string> = ({ value: port, state }) =>
  (state.newPortValue = String(Number(port)))

export const addConnection: Action = ({ state, connector }) => {
  state.error = null
  state.isConnecting = true
  state.port = state.newPortValue
  state.newPortValue = ''
  connector.connect(state.port)
}

export const changeTab: Action<Tab> = ({ value: tab, state }) =>
  (state.currentTab = tab)

export const toggleExpandState: Action<string[]> = ({ value: path, state }) => {
  const pathString = path.join('.')

  if (state.expandedStatePaths.indexOf(pathString) >= 0) {
    state.expandedStatePaths.splice(
      state.expandedStatePaths.indexOf(pathString),
      1
    )
  } else {
    state.expandedStatePaths = state.expandedStatePaths.concat(pathString)
  }
}

export const selectAction: Action<string> = ({ value: actionId, state }) => {
  for (let index in state.currentApp.actionsList) {
    const item = state.currentApp.actionsList[index]
    if (
      item.type === ActionsListItemType.GROUP &&
      item.id === actionId &&
      state.currentApp.currentActionId === actionId
    ) {
      item.isCollapsed = !item.isCollapsed
      break
    }
  }
  state.currentApp.currentActionId = actionId
}

export const toggleCollapsedFlush: Action<number> = ({ value: id, state }) => {
  if (!state.expandAllActionDetails) {
    state.currentApp.flushes[id].isCollapsed = !state.currentApp.flushes[id]
      .isCollapsed
  }
}

export const toggleCollapsedOperator: Action<number> = ({
  value: operatorIndex,
  state,
}) => {
  if (!state.expandAllActionDetails) {
    const currentApp = state.apps[state.currentAppName]
    const currentAction = currentApp.actions[currentApp.currentActionId]
    const operator = currentAction.operators[operatorIndex]

    operator.isCollapsed = !operator.isCollapsed
  }
}

export const toggleGroupedComponent: Action<string> = ({
  value: name,
  state,
}) => {
  const index = state.expandedComponents.indexOf(name)
  if (index === -1) {
    state.expandedComponents.push(name)
  } else {
    state.expandedComponents.splice(index, 1)
  }
}

export const selectApp: Action<string> = ({ value: appName, state }) => {
  state.currentAppName = appName
  state.showApps = false
}

export const toggleExpandAllActions: Action = ({ state }) =>
  (state.expandAllActionDetails = !state.expandAllActionDetails)

export const toggleShowApps: Action = ({ state }) =>
  (state.showApps = !state.showApps)