SHARE
TWEET

Untitled

a guest Jan 29th, 2020 71 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { CONTAINER } from './common.js';
  2.  
  3. // Internal for the module
  4. const todoView = (todo, container) => {
  5.   const $div = $(container);
  6.   $div.append(`
  7.   <div>
  8.     <span>${todo.name} - ${moment(todo.due).format('MMMM Do YYYY')}</span>
  9.     <input data-check-id="${todo.id}" type="checkbox" ${todo.isDone ? 'checked' : ''}/>
  10.     <button data-id="${todo.id}">X</button>
  11.   </div>
  12.   `);
  13. };
  14.  
  15. export const populateTodos = (container) => {
  16.   const $div = $(container);
  17.   $div.empty();
  18.  
  19.   const url = 'http://localhost:3000/todos';
  20.  
  21.   fetch(url)
  22.     .then(res => res.json())
  23.     .then(res => {
  24.       res.forEach((todo) => todoView(todo, container))
  25.     })
  26.     .catch((err) => alert(err.message));
  27. };
  28.  
  29. export const todoDelete = (ev) => {
  30.   const todoId = +$(ev.target).attr('data-id');
  31.  
  32.   const url = `http://localhost:3000/todos/${todoId}`
  33.  
  34.   fetch(url, {
  35.     method: 'DELETE',
  36.   })
  37.     .then(res => res.json())
  38.     .then(_ => populateTodos(CONTAINER))
  39.     .catch((err) => alert(err.message));
  40. };
  41.  
  42. export const todoToggle = (ev) => {
  43.   const todoId = +$(ev.target).attr('data-check-id');
  44.  
  45.   const isChecked = ev.target.checked;
  46.  
  47.   console.log(isChecked)
  48.  
  49.   const url = `http://localhost:3000/todos/${todoId}`
  50.  
  51.   fetch(url, {
  52.     method: 'PUT',
  53.     body: JSON.stringify({
  54.       isDone: isChecked
  55.     }),
  56.     headers: {
  57.       'Content-Type': 'application/json'
  58.     }
  59.   })
  60.     .then(res => res.json())
  61.     .then(_ => populateTodos(CONTAINER))
  62.     .catch(err => console.log(err.message))
  63. };
  64.  
  65. export const todoAdd = (ev) => {
  66.   const $text = $('#todo-text')
  67.   const $date = $('#todo-date')
  68.  
  69.   fetch('http://localhost:3000/todos',
  70.     {
  71.       method: 'POST',
  72.       body: JSON.stringify({
  73.         name: $text.val(),
  74.         due: $date.val()
  75.       }),
  76.       headers: {
  77.         'Content-Type': 'application/json'
  78.       }
  79.     })
  80.     .then(res => res.json())
  81.     .then(_ => populateTodos(CONTAINER))
  82.     .catch((err) => alert(err.message));
  83.  
  84.   $text.val('');
  85.   $date.val('');
  86.  
  87. };
  88.  
  89. // export { todoView }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top