App.js

import css     from "./styles.css"
import React   from "react"
import Counter from "../Counter"
import Form    from "../Form"
import update  from "../__lib__/update"
import unset   from "../__lib__/unset"
import set     from "../__lib__/set"



var guid = () =>
  (+ new Date() + Math.random() * 999999 |0).toString(36)



export default class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = { counters:{
      "asdf": { id:"asdf", count:5, name:"adsf"},
      "qewr": { id:"qwer", count:4, name:"qewr" }
    } }
    this.add_counter = this.add_counter.bind(this)
    this.del_counter = this.del_counter.bind(this)
    this.dec_counter = this.dec_counter.bind(this)
  }

  componentDidMount    () { this.mount = true }
  componentWillUnmount () { this.mount = false }

  add_counter (name, callback) {
    if (name === "") return
    var id = guid()
    return this.mount && this.setState(set(["counters", id], { id, name, count:0, created_at:+new Date() }), callback)
  }

  del_counter (id) { return this.mount && this.setState(unset(["counters", id])) }
  inc_counter (id) { return this.mount && this.setState(update(["counters", id, "count"], v => v + 1)) }
  dec_counter (id) { return this.mount && this.setState(update(["counters", id, "count"], v => v - 1)) }

  render() {
    var { counters } = this.state

    counters = Object.keys(counters).map(id => ({
      ...counters[id],
      onInc: this.inc_counter.bind(this, id),
      onDec: this.dec_counter.bind(this, id),
      onDel: this.del_counter.bind(this, id),
    })).sort((a, b) => b.created_at - a.created_at)

    return <div className={ css.App }>
      <div>Counters: { counters.length }</div>
      <div>{ counters.map(d => d.count).reduce((a, b) => a + b, 0) }</div>
      <Title count={ counters.length }>Counters</Title>
      <CountTotal counters={ counters }/>
      <Form onSubmit={ this.add_counter }/>
      <div>{ counters.map(Counter) }</div>
    </div>
  }
}

Counter.js

import React  from "react"
import Button from "../Button"
import Icon   from "../Icon"


export default (props) => {
  var {
    name  = "",
    count = 0,
    id,
    onDel,
    onInc,
    onDec,
  } = props

  return <div key={ id }>
    <strong>{ name }</strong>
    <Button onClick={ onDec }>
      <Icon type="minus"/>
    </Button>
    <span>{ count }</span>
    <Button onClick={ onInc }>
      <Icon type="plus"/>
    </Button>
    <Button onClick={ onDel }>
      <Icon type="close"/>
    </Button>
  </div>
}