JSFiddle - React, Tailwind, and code Playground

by jondion

HTML

<script src="https://unpkg.com/[email protected]/dist/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobx/3.1.7/mobx.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/recompose/0.22.0/Recompose.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/paper/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobx-react/4.1.3/index.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <div id="root"></div>
    </div>
  </div>
</div>

CSS

.container {
  padding: 100px 20px;
}

Babel + JSX

const { observable, autorun, when, action, computed, toJS,  }  = mobx;
const {observer, Provider, inject} = mobxReact;
const {Component} = React;
const {render} = ReactDOM;
const { compose, componentFromProp, withState, setDisplayName, defaultProps, mapProps, withHandlers } = Recompose;

const isAllCompleted = (todos) => todos.every(todo => todo.completed === true);
const dispose = () => console.log('disposed!')

class TodoStore {
	@observable todos : [];
  constructor(todos) {
  	this.todos = todos;
   	autorun(() => console.log( toJS(this.todos) ))
  }
  
  addTodo(todo) {
  	this.todos = [...this.todos, todo];
  }
  

  setCompleted(id) {
  	this.todos = this.todos.map( todo => {
    	if(todo.id == id) {
      	 todo.completed = !todo.completed
      }
      return todo;
    })
  }
  

 	removeTodo(id) {
  	this.todos = this.todos.filter(todo => todo.id !== id);
  }
  
  @computed
  get countCompleted () {
  	return this.todos.filter(todo => todo.completed).length;
  }
  
  @computed
  get counter () {
  	return this.todos.length;
  }
}

const enhance = compose(
  withState('state', 'setState', ''),
  withHandlers({
    onChange: props => (e) => {
      props.setState(e.target.value)
    }
  })
)

const Form = enhance(({ onChange, state, formSubmit }) => {
  return(
    <div>
      <form onSubmit={ e => formSubmit(e, state) }>
        <div>
          <input placeholder="Enter todo" className="form-control" type="text" onChange={onChange}/>
        </div>
      </form>
    </div>
  )
})


@inject("todosStore")
@observer
class App extends Component {
    todosStore = this.props.todosStore;
    formSubmit(e, data) {
      e.preventDefault(); 
      this.todosStore.addTodo(new Todo({ data : data, id : this.todosStore.todos.length }));
    }
    render() {
      return(
        <div>
          <Form formSubmit={ this.formSubmit.bind(this) }/>
          {renderTodos(this.todosStore)}
          <div>{this.todosStore.counter}</div>
        </div>
      )
    }  ...