Pulse7
9/6/2017 - 5:46 PM

Manipulating fake data using json-server

import {getUsers, deleteUser} from './api/userApi';

getUsers().then(result=>{
  let usersBody = "";
  console.log(result.forEach(user=>{
    usersBody+=`<tr>
    <td><a href="#" data-id="${user.id}" class="deleteUser">Delete</a></td>
    <td>${user.id}</td>
    <td>${user.firstName}</td>
    <td>${user.lastName}</td>
    <td>${user.email}</td>
    </tr>`
  }));
  global.document.getElementById('users').innerHTML = usersBody;

  const deleteLinks = global.document.getElementsByClassName('deleteUser');

  Array.from(deleteLinks, link=>{
    link.onclick = function(event){
      const element = event.target;
      event.preventDefault();
      deleteUser(element.attributes["data-id"].value);
      const row = element.parentNode.parentNode;
      row.parentNode.removeChild(row);
    };
  });
})
import 'whatwg-fetch'; //polyfill
import getBaseUrl from './baseUrl';

const baseUrl = getBaseUrl();

export function getUsers(){
  return get('users');
}

export function deleteUser(id){
  return del(`users/${id}`);
}

function get(url){
  return fetch(baseUrl+url).then(onSuccess,onError);
}

function del(url){
  const request = new Request(baseUrl + url,{
    method:"DELETE"
  });
  return fetch(request).then(onSuccess,onError);
}

function onSuccess(response){
  return response.json();
}

function onError(error){
  console.log(error); //eslint-disable-line no-console
}