Tree.tsx

import * as path from 'path'
import * as React from 'react'
import * as dirTree from 'directory-tree'
import { style } from 'typestyle'
import { Consumer } from '../model/State'

const tree = dirTree(path.resolve(process.cwd(), 'src'))

type Node = typeof tree

interface NodeProps {
  depth: number
  node: Node
}

const fileStyles = style({
  color: 'red',
})

const File = ({ depth, node }: NodeProps) => {
  return (
    <Consumer>
      {({ actions }) => {
        return (
          <li
            className={fileStyles}
            onClick={() => actions.openFile({ path: node.path })}
          >
            {node.name}
          </li>
        )
      }}
    </Consumer>
  )
}

const directoryStyles = style({
  background: 'white',
})

const Directory = ({ depth, node }: NodeProps) => {
  return (
    <ul className={directoryStyles}>
      <li>{node.name}</li>
      {node.children &&
        node.children.map(child => (
          <Node key={child.path} depth={depth + 1} node={child} />
        ))}
    </ul>
  )
}

const Node = ({ depth, node }: NodeProps) => {
  if (node.type === 'directory') {
    return <Directory depth={depth} node={node} />
  } else if (node.type === 'file') {
    return <File depth={depth} node={node} />
  }

  return null
}

export default () => {
  return (
    <div>
      <Node depth={0} node={tree} />
    </div>
  )
}