); } } class Header extends React.Component { componentDidMount() { this.setTitleLength(); } componentDidUpdate() { this.setTitleLength(); } handleAvatarClick = () => { callAction(phoneActions.TOGGLE_SIDEBAR); } setTitleLength() { let titleLength = this.headerCategoryNode.innerHTML.length; if (titleLength >= 5) { titleLength--; } this.headerCategoryNode.style.width = `${titleLength}ch`; } render() { const imageClass = classNames('header__image', { 'header__image--hidden': this.props.hideAvatar }); return (

Hi Friend.

This is your this.headerCategoryNode = node} className='header__category'>{this.props.category} list

) } } const todoWrapperActions = createActions( 'ADD_TODO', 'REMOVE_TODO' ); class ToDoWrapperStore extends Store { constructor(name) { super(name); this.handle(todoWrapperActions.ADD_TODO, this._addTodo) this.handle(todoWrapperActions.REMOVE_TODO, this._removeTodo) this.setInitialData(Immutable.Map({ 'personal': ['Buy tribe of mentors', 'Watch Wim Hof Documentary'], 'work': ['Go to meeting', 'Push buttons', 'Email James from accounting'], 'fun': ['Buy beer'], 'school': ['Finish math assignment', 'Start book report on Holes', 'Buy pencils', 'Buy notebook'] })); } _addTodo(text) { const category = phoneStore.getCategory(); const todos = this.getTodos(category); todos.push(text) this.writeData(category, todos); } _removeTodo(text) { const category = phoneStore.getCategory(); const todos = this.getTodos(category); const index = todos.indexOf(text); if (index > -1) { todos.splice(index, 1); } this.writeData(category, todos); } getTodos(category) { return this.readData(category); } } const todoWrapperStore = new ToDoWrapperStore('todoWrapperStore'); class ToDoWrapper extends React.Component { componentDidMount() { this.calculateHeight(); } componentDidUpdate(prevProps) { if (prevProps.category !== phoneStore.getCategory()) { this.todoWrapperNode.scrollTop = this.todoWrapperNode.scrollHeight; } this.calculateHeight(); } getTodos() { const category = this.props.category; return todoWrapperStore.getTodos(category).map((message, i) => { return ( ); }); } calculateHeight() { let childrenLength = this.todoWrapperNode.children.length < 4 ? this.todoWrapperNode.children.length : 3; const wrapperHeight = `${childrenLength * 44}px`; this.todoWrapperNode.style.height = wrapperHeight; } render() { const todos = todoWrapperStore.getTodos(); return (

this.todoWrapperNode = node} > {this.getTodos()}

); } } const toDoActions = createActions( 'SET_ARE_ACTIONS_OPEN', 'SET_CLOSE_CHECK_ICON', 'CHECK_OFF_TODO' ); class ToDoStore extends Store { constructor(name) { super(name); this.setInitialData(Immutable.Map({ 'areActionsOpen': false, 'closeCheckIcon': false, 'checkOffTodo': false })); this.handleTargeted(toDoActions.SET_ARE_ACTIONS_OPEN, this._setAreActionsOpen); this.handleTargeted(toDoActions.SET_CLOSE_CHECK_ICON, this._setCloseCheckIcon); this.handleTargeted(toDoActions.CHECK_OFF_TODO, this._checkOffTodo); } _setAreActionsOpen(bool) { this.writeData('areActionsOpen', bool); } _setCloseCheckIcon(bool) { this.writeData('closeCheckIcon', bool); } _checkOffTodo(bool) { this.writeData('checkOffTodo', bool); } getCheckOffTodo() { return this.readData('checkOffTodo'); } getAreActionsOpen() { return this.readData('areActionsOpen', false); } getCloseMenuOrCheckIcon() { return this.readData('closeCheckIcon', false); } } class ToDo extends React.Component { constructor(props) { super(props); this.setUpStore(props.message); } componentWillUpdate(nextProps) { this.setUpStore(nextProps.message); } setUpStore(message) { const storeName = `todoStore/${message}`; const store = getStore(storeName); if (store) { this.store = store; } else { this.store = new ToDoStore(storeName); } } handleRemoveIconClick = () => { const areActionsOpen = this.store.getAreActionsOpen(); if (areActionsOpen) { callAction(toDoActions.SET_ARE_ACTIONS_OPEN, !areActionsOpen, this.store.getName()); } else { callAction(todoWrapperActions.REMOVE_TODO, this.props.message); } } handleLineClick = () => { const areActionsOpen = this.store.getAreActionsOpen(); const isCheckedOff = this.store.getCheckOffTodo(); callAction(toDoActions.CHECK_OFF_TODO, !isCheckedOff, this.store.getName()); callAction(toDoActions.SET_ARE_ACTIONS_OPEN, !areActionsOpen, this.store.getName()); callAction(toDoActions.SET_CLOSE_CHECK_ICON, true, this.store.getName()); } handleBarsClick = () => { const areActionsOpen = this.store.getAreActionsOpen(); if (!areActionsOpen) { callAction(toDoActions.SET_ARE_ACTIONS_OPEN, !areActionsOpen, this.store.getName()); } else { callAction(toDoActions.SET_CLOSE_CHECK_ICON, true, this.store.getName()); this.handleLineClick(); } } renderDeleteIcon() { const areActionsOpen = this.store.getAreActionsOpen(); /* If actions are open or the user has not checked off todo show the X */ if (areActionsOpen || this.store.readData('closeCheckIcon') ) { return ( ); } else { return null; } } handleUndoClick = () => { callAction(toDoActions.CHECK_OFF_TODO, false, this.store.getName()); callAction(toDoActions.SET_CLOSE_CHECK_ICON, false, this.store.getName()); } renderMenuOrCheckIcon() { const iconClass = classNames('todo__check fa',{'fa fa-bars': !this.store.getAreActionsOpen(), 'fa fa-check': this.store.getAreActionsOpen()}); if (!this.store.getCloseMenuOrCheckIcon()) { return ( ); } else { return ( ) } } render() { return (

this.todoNode = node} >

this.svgLineNode = node} style={{width: this.store.getCheckOffTodo() ? '75%' : '0%'}} />

{this.props.message}

{this.renderMenuOrCheckIcon()} {this.renderDeleteIcon()}

); } } class SectionsWrapper extends React.Component { render() { return (

Lists

); } } class Section extends React.Component { handleSectionChange = (e) => { callAction(phoneActions.SET_CATEGORY, e.currentTarget.dataset.title); } render() { const activeTitle = this.props.title === phoneStore.getCategory(); let greenCircle = null; if (activeTitle) { greenCircle =

} return (

{greenCircle}

{this.props.title}

); } } class Addtodo extends React.Component { render() { const addTodoIconClass = classNames('add-todo__icon fa',{ 'fa-plus': !phoneStore.getShowAddTodoForm(), 'fa-plus add-todo__icon--close': phoneStore.getShowAddTodoForm() }); return (

callAction(phoneActions.TOGGLE_ADD_TODO_FORM)} />

); } } const addTodoFormActions = createActions( 'ADD_TOAST', 'RESET_STORE', 'REMOVE_TOAST', 'SET_TODO_TEXT', 'SET_ACTIVE_LIST' ); class AddTodoFormStore extends Store { constructor(name) { super(name); this.handle(addTodoFormActions.SET_TODO_TEXT, this._setTodoText); this.handle(addTodoFormActions.SET_ACTIVE_LIST, this._setActiveList); this.handle(addTodoFormActions.RESET_STORE, this._resetStore); this.handle(addTodoFormActions.ADD_TOAST, this._addToast); this.handle(addTodoFormActions.REMOVE_TOAST, this._removeToast); } _addToast() { this.writeData('showToast', true); } _setTodoText(text) { this.writeData('todoText', text); } _setActiveList(list) { this.writeData('activeList', list); } _removeToast() { this.writeData('showToast', false); } _resetStore() { this.writeData('todoText', ''); this.writeData('activeList', null); } getShowToast() { return this.readData('showToast'); } getTodoText() { return this.readData('todoText', ''); } getActiveList() { return this.readData('activeList', null); } } const addTodoFormStore = new AddTodoFormStore('addTodoFormStore'); class AddTodoForm extends React.Component { handleOnChange = (e) => { callAction(addTodoFormActions.SET_TODO_TEXT, e.target.value); } handleAddClick = () => { const text = addTodoFormStore.getTodoText(); callAction(todoWrapperActions.ADD_TODO, text); callAction(addTodoFormActions.ADD_TOAST) setTimeout(() => callAction(addTodoFormActions.REMOVE_TOAST), 1500) setTimeout(() => callAction(addTodoFormActions.RESET_STORE), 2000) } renderAddButton() { const addButtonClass = classNames('add-todo-form-list__button', { 'add-todo-form-list__button--hide': !addTodoFormStore.getActiveList() || addTodoFormStore.getTodoText().length === 0, 'add-todo-form-list__button--show': addTodoFormStore.getActiveList() || addTodoFormStore.getTodoText().length > 0 }) return ( ) } renderLists() { const listClass = classNames('add-todo-form-list-wrapper', { 'add-todo-form-list-wrapper--show': addTodoFormStore.getTodoText().length > 0, 'add-todo-form-list-wrapper--hidden': addTodoFormStore.getTodoText().length === 0 }) return (

Add to this list:

{ ['personal', 'work', 'fun', 'school'].map((item) => { const iconClass = classNames('add-todo-form-list__list-item', { 'add-todo-form-list__list-item--active': item === addTodoFormStore.getActiveList() }); return (

{ callAction(addTodoFormActions.SET_ACTIVE_LIST, item) callAction(phoneActions.SET_CATEGORY, addTodoFormStore.getActiveList()); }} > {item}

) }) }

); } render() { const isOpen = this.props.open; const wrapperClass = classNames('add-todo-form', { 'add-todo-form--open': isOpen, 'add-todo-form--closed': !isOpen }); const todoHeaderClass = classNames('add-todo-form__header', { 'add-todo-form__header--show': isOpen, 'add-todo-form__header--hide': !isOpen }); return (

What do you want to do?

{this.renderLists()} {this.renderAddButton()}

); } } class Toast extends React.Component { render() { const toastClass = classNames('toast', { 'toast--hidden': !this.props.showToast, 'toast--show': this.props.showToast }) return(

Success!

You created a todo.

) } } class SideBar extends React.Component { handleSideBarClick = () => { callAction(phoneActions.TOGGLE_SIDEBAR); } render() { const sideBarClass = classNames('sidebar', { 'sidebar--show': phoneStore.getIsSideBarOpen(), 'sidebar--hide': !phoneStore.getIsSideBarOpen() }) return (

); } } ReactDOM.render(, document.getElementById('app'));

React TODO List

React Simple Todo List

BkOTz9erm

Cory_To-Do List

HkVj6XAVQ

Simple React ToDo App

React todo

WIP

HyXde1647

React To-Do-List with Bootstrap

HyBqnwGj7

B1XV9lIJV

SkbRth3MS