mAAdhaTTah/brookjs

---
to: "<%= name %>/<%= dir %>/components/App.<%= locals.typescript ? 'tsx' : 'js' %>"
---
import React from 'react';
import { toJunction } from 'brookjs-silt';
import { incrementClick, decrementClick } from '../actions';
<% if(locals.typescript) { %>
type Props = {
  count: number;
  onIncrementClick: () => void;
  onDecrementClick: () => void;
};
<% } %>
const App<% if(locals.typescript) { %>: React.FC<Props> = ({
  count,
  onIncrementClick,
  onDecrementClick,
})<% } else { %> = ({ count, onIncrementClick, onDecrementClick })<% } %> => {
  return (
    <div className="<%= name %>">
      <h1>
        Welcome to <code>brookjs</code>!<p>Count: {count}</p>
        <div>
          <button onClick={onIncrementClick}>+</button>
          <button onClick={onDecrementClick}>-</button>
        </div>
      </h1>
    </div>
  );
};

const events = {
  onIncrementClick: e$ => e$.map(() => incrementClick()),
  onDecrementClick: e$ => e$.map(() => decrementClick()),
};

export default toJunction(events)(App);