index.tsx

import * as React from 'react'
import { connect, Connect } from '../../app'
import { getAppShortName, nameToColor } from '../../app/utils'
import { Wrapper, App, CurrentApp, Overlay, AppsList } from './elements'

const Apps: React.SFC<Connect> = ({ app }) => (
  <Wrapper>
    <CurrentApp
      color={nameToColor(app.state.currentAppName)}
      onClick={app.actions.toggleShowApps}
    >
      {getAppShortName(app.state.currentAppName)}
    </CurrentApp>
    {app.state.showApps ? (
      <>
        <Overlay onClick={app.actions.toggleShowApps} />
        <AppsList>
          {Object.keys(app.state.apps).map((appName) => (
            <App
              key={appName}
              onClick={() => app.actions.selectApp(appName)}
              isSelected={app.state.currentAppName === appName}
            >
              {appName}
            </App>
          ))}
        </AppsList>
      </>
    ) : null}
  </Wrapper>
)

export default connect(Apps)