import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Atom, F } from '@grammarly/focal'

const Counter = (props: { count: Atom<number> }) =>
  <F.div>
    You have clicked this button {props.count} time(s).
    <button onClick={() => props.count.modify(x => x + 1)}>Click again?</button>
  </F.div>

const App = (props: { state: Atom<{ count: number }> }) =>
  <div>
    <Counter count={ props.state.lens(x => x.count)} />
  </div>

ReactDOM.render(<App state={Atom.create({ count: 0 })} />,  document.getElementById('app'))