index.tsx

import * as React from 'react'
import { connect, Connect } from '../../app'
import { ActionsListItemType } from '../../app/state'
import { nameToColor } from '../../app/utils'
import Text from '../common/Text'
import { List, ActionItem, ActionSubItem, ActionColor } from './elements'

const ActionsList: React.SFC<Connect> = ({ app }) => (
  <List>
    {app.state.currentApp.actionsList.map((item) => {
      if (item.type === ActionsListItemType.ACTION) {
        const action = app.state.currentApp.actions[item.id]
        return (
          <ActionItem
            key={item.id}
            onClick={() => app.actions.selectAction(item.id)}
          >
            <ActionColor color={nameToColor(action.actionName)} />
            <Text variant="description">
              {app.state.currentApp.currentActionId === item.id ? (
                <b>{action.actionName}</b>
              ) : (
                action.actionName
              )}
            </Text>
          </ActionItem>
        )
      }
      const mainAction = app.state.currentApp.actions[item.actionIds[0]]
      const groupedActionIds = item.actionIds.slice(1)

      return (
        <div key={item.id}>
          <ActionItem
            key={item.id}
            onClick={() => app.actions.selectAction(item.id)}
          >
            <ActionColor color={nameToColor(mainAction.actionName)} />
            <Text variant="description">
              {app.state.currentApp.currentActionId === item.id ? (
                <b>
                  {mainAction.actionName} ( {groupedActionIds.length + 1} )
                </b>
              ) : (
                `${mainAction.actionName} ( ${groupedActionIds.length + 1} )`
              )}
            </Text>
          </ActionItem>
          {item.isCollapsed
            ? null
            : groupedActionIds.map((actionId) => {
                const action = app.state.currentApp.actions[actionId]
                return (
                  <ActionSubItem
                    key={actionId}
                    onClick={() => app.actions.selectAction(actionId)}
                  >
                    <Text variant="description">
                      {app.state.currentApp.currentActionId === actionId ? (
                        <b>{action.actionName}</b>
                      ) : (
                        action.actionName
                      )}
                    </Text>
                  </ActionSubItem>
                )
              })}
        </div>
      )
    })}
  </List>
)

export default connect(ActionsList)