A tasks list (todos)

React 15.4.0, react router and mobx loaded in a near empty fiddle

by amindunited

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react-dom.js"></script>
<script src="https://unpkg.com/react-router/umd/ReactRouter.min.js"></script>
<script src="https://unpkg.com/mobx@3/lib/mobx.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobx-react/4.0.2/index.js"></script>
<!-- <script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script> -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<div id="container">

</div>

CSS

hmtl, body { font-family: helvetica; background-color: #ebebeb; padding:0px; margin:0px; }
a { color: #607D8B; }

h1 { background-color: #607D8B; color: #FFFFFF; padding:10px 15px; margin:0px; }
h2, h3 { color: #546E7A; }
/*
 * SOF NAV
 */
.NavView {}
.NavView ul { list-style-type: none; margin:0px; padding:0px 5px; display: flex; background-color: #FFFFFF; }
.NavView ul li { padding: 5px 10px; }
/*
 * EOF NAV
 */
 /*
 * SOF Main
 */
 .main { margin: 10px; padding: 10px; /*border: solid 1px #607D8B;*/ border-radius: 3px; background-color: #FFFFFF; }
 /*
 * EOF Main
 */

 /*
 * SOF Card
 */
 .card { box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px; margin: 20px;}
  /*
 * EOF Card
 */
form.taskInput {
   width: 50%;
   margin-bottom: 40px;
}

form.taskInput input, form.taskDetails input, form.taskDetails textarea {
   padding: 0px;
   position: relative;
   width: 100%;
   border: none;
   outline: none;
   background-color: rgba(0, 0, 0, 0);
   color: rgba(0, 0, 0, 0.870588);
   cursor: inherit;
   font-style: inherit;
   font-variant: inherit;
   font-weight: inherit;
   font-stretch: inherit;
   font-size: inherit;
   line-height: inherit;
   font-family: inherit;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   height: 100%;
   -webkit-appearance: textfield;
   max-width: 75%;
   border-bottom: solid 1px #03A9F4;
}
form.taskInput input, form.taskDetails input { padding-bottom: 18px; }
form.taskInput button.add {
  background-color: #03A9F4;
  color: #FFFFFF;
  box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px;
  border-radius: 50%;
  border: none;
  display: inline-block;
  margin-left: 15px;
  margin-right: 15px;
 }
 
/*
 * SOF TaskList
 */
.taskList { padding: 0px; list-style-type: none; margin: 0px; }
.taskList li { padding: 16px 16px 16px 16px; }
.taskList li:hover { background-color: #CFD8DC; }
.taskList li:active { background-color: #B0BEC5; }
.taskList li div.taskName { width:...

Babel + JSX

console.log(window);
const { Router, IndexRoute, Redirect, Route, Link, browserHistory } = ReactRouter;
const ReactDom = ReactDom;
const {observable, computed, action, autorun, reaction} = mobx;
const {observer} = mobxReact;
const Component = React.Component;

history.replaceState(0,0,'/');

class Task {
	@observable name;
  @observable created;
  @observable cost;
  @observable priority;
}

class Tasks {
	constructor() {
  	let firstRun = true;
  	//set up an auto run to save changes to the 
		const autorun1 = autorun(
    	() => {
      	console.log("autorun 1:", this.taskList.map(todo => todo.name).join(", "));
        if (!this.taskList.length && firstRun) {
        	console.log('no task list ');
          firstRun = false;
          let storedArray = JSON.parse(localStorage.getItem('taskList'));
          if (storedArray.length) {
          	storedArray.map((obj)=>{
            	this.taskList.push(obj);
            });
          }
        } else {
          let list = this.taskList.map(todo => todo);
          console.log('list ', list);
          localStorage.setItem('taskList', JSON.stringify(list));
          console.log('in storage ', JSON.parse(localStorage.getItem('taskList')));
        }
      }
		);
  }
	@observable taskList = [];
  @action getTaskList () {
  	let taskList = localStorage.getItem('taskList');
    if (!taskList) {
    	
    }
    console.log('....', taskList);
    
  }
}

class AppStore {
	@observable tasks = new Tasks();
}

class App extends Component {
	render() {
  	return (<div>
      <h1>App</h1>
      <NavView></NavView>
      {this.props.children}
    </div>)
  }
}

class TasksInputView extends Component {
	constructor() {
  	super();
    this.state = {
    	name: ''
    }
    this.handleSubmit = this.handleSubmit.bind(this);
    this.changeHandler = this.changeHandler.bind(this);
  }
	changeHandler(proxy) {
    this.setState({name: proxy.target.value});
  }
  handleSubmit(proxy) {
    proxy.nativeEvent.preventDefault();
    
  ...