what am i doing with my life

mobx.react.styled-component.coffee

import { observer, inject } from 'mobx-react'
import { observable, action } from 'mobx'
import React, { Component } from 'react'
import styled from 'styled-components'

Span = styled.span"""
  color: brown;
"""

Title = styled.h1"""
  font-style: italic
"""

Button = styled( ({ text, ...rest }) => <button {...rest}>{text}</button> )"""
  
"""

observer class Mobx extends Component
  `@observable list = [
    { finished: false, text: "foo" },
    { finished: true, text: "bar" },
    { finished: false, text: "baz" },
    { finished: true, text: "qux" },
  ]`
  `@observable popped`

  render: => 
    <div>
      <marquee><Title>Welcome</Title></marquee>
      <ul>
      { 
        <li key={k}>
          { do (v) => <input type="checkbox" checked={v.finished} onChange={(e) => v.finished = e.target.checked} /> }
          { if v.finished then <strike>{v.text}</strike> else v.text }
        </li> for v, k in @list
      }
      </ul>
      Item: <input type="text" ref={(d) => @input = d} /> 
      <Button onClick={=> (@list.push finished: no, text: @input.value; @input.value = '') if @input.value.length > 0} text="Push" />
      <Button disabled={yes if @list.length < 1} onClick={=> (@popped = @list.pop(); @input.value = '') if @list.length > 0} text="Pop Last" />
      { 
        do (finished = (@list.filter (l) => l.finished).length) => 
          <Button disabled={yes if finished < 1} onClick={=> @list = @list.filter (l) => not l.finished} text="Remove #{finished} Selected" />
      }
      <br/>
      { <Span>Last popped: {@popped.text}, Is completed? {if @popped.finished then 'yes' else 'no'}</Span> if @popped? }
    </div>

export default Mobx