Jesse Heaslip funador

## react-style-jquery-api.js
const api = (() => {

  const url = `${window.location.origin}/api`

  const addTodo = todo =>
    axios.post(url, todo)
      .then(res => res.data)

  const deleteTodo = id =>
    axios.delete(`${url}/${id}`)

## react-style-jquery-handlers.js
const handlers = (() => {

  const _toast = message => {
    Materialize.toast(message, 1500, 'rounded')
  }

  const _updateApi = (update, id) => {
    api.updateTodo(update, id)
      .then(updatedTodo => {
        const originalTodo = store.findById(id)

## react-style-jquery-listeners.js
const attachListeners = () => {
  $('#add-todo').submit(handlers.addHandler)
  $('.collection').on('click', '.delete', handlers.deleteHandler)
  $('.collection').on('click', '.save', handlers.updateTextHandler)
  $('.collection').on('submit', 'form', handlers.updateTextHandler)
  $('.collection').on('click', '.edit', handlers.editTextHandler)
  $('.collection').on('click', '.done', handlers.updateDoneHandler)
}

## react-style-jquery-app.js
$(() => {
  render.dom()
  attachListeners()

  api.getTodos()
    .then(todos => {
      store.addTodosOnLoad(todos)
      render.todos()
    })
})

## react-style-jquery-index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset='UTF-8'>
  <title>State Management with jQuery</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css'>
  <link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'>
  <link rel='stylesheet' href='style.css'>
</head>
<body>

## react-style-jquery-controller.js
const Todo = require('./model')

exports.addTodo = (req, res) => {
  Todo
    .create(req.body)
    .then(todo => {
      res.json(todo)
    })
}

## react-style-jquery-router.js
const router = require('express').Router()
const controllers = require('./controller')

router.get('/', controllers.getTodos)
router.post('/', controllers.addTodo)
router.delete('/:id', controllers.deleteTodo)
router.put('/:id', controllers.updateTodo)

module.exports = router

## react-style-jquery-model.js
const mongoose = require('mongoose')
mongoose.Promise = global.Promise

const TodoSchema = new mongoose.Schema({
  text: {
    type: String,
    required: 'please provide some text for your todo'
  },
  done: {
    type: String,

## react-style-jquery-server.js
require('dotenv').config()
const express = require('express')
const mongoose = require('mongoose')
const path = require('path')
const app = express()

const todoRouter = require('./todo/router')

// set public folder
app.use(express.static('public'))

## Spinner.js
<div>hello</div>
	const api = (() => {

	const url = `${window.location.origin}/api`

	const addTodo = todo =>
	axios.post(url, todo)
	.then(res => res.data)

	const deleteTodo = id =>
	axios.delete(`${url}/${id}`)
	const handlers = (() => {

	const _toast = message => {
	Materialize.toast(message, 1500, 'rounded')
	}

	const _updateApi = (update, id) => {
	api.updateTodo(update, id)
	.then(updatedTodo => {
	const originalTodo = store.findById(id)
	const attachListeners = () => {
	$('#add-todo').submit(handlers.addHandler)
	$('.collection').on('click', '.delete', handlers.deleteHandler)
	$('.collection').on('click', '.save', handlers.updateTextHandler)
	$('.collection').on('submit', 'form', handlers.updateTextHandler)
	$('.collection').on('click', '.edit', handlers.editTextHandler)
	$('.collection').on('click', '.done', handlers.updateDoneHandler)
	}
	$(() => {
	render.dom()
	attachListeners()

	api.getTodos()
	.then(todos => {
	store.addTodosOnLoad(todos)
	render.todos()
	})
	})
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset='UTF-8'>
	<title>State Management with jQuery</title>
	<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css'>
	<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'>
	<link rel='stylesheet' href='style.css'>
	</head>
	<body>
	const Todo = require('./model')

	exports.addTodo = (req, res) => {
	Todo
	.create(req.body)
	.then(todo => {
	res.json(todo)
	})
	}
	const router = require('express').Router()
	const controllers = require('./controller')

	router.get('/', controllers.getTodos)
	router.post('/', controllers.addTodo)
	router.delete('/:id', controllers.deleteTodo)
	router.put('/:id', controllers.updateTodo)

	module.exports = router
	const mongoose = require('mongoose')
	mongoose.Promise = global.Promise

	const TodoSchema = new mongoose.Schema({
	text: {
	type: String,
	required: 'please provide some text for your todo'
	},
	done: {
	type: String,
	require('dotenv').config()
	const express = require('express')
	const mongoose = require('mongoose')
	const path = require('path')
	const app = express()

	const todoRouter = require('./todo/router')

	// set public folder
	app.use(express.static('public'))