# Cheat Sheet

## Function -> Arrow Function conversion

function getComments(song) {
  return fetch(`http://localhost:3000/comments?songId=${song.id}`)
    .then(res => res.json())
}

- Remove function keyword
- Replace with const
- The function name becomes the const name
- Add `=` sign (assignment operator) between const name and parameters list
- After parameters list (but before the curly braces) add an arrow

const getComments = (song) => {
  return fetch(`http://localhost:3000/comments?songId=${song.id}`)
    .then(res => res.json())
}

## Converting Arrow Function to Regular function

const updateSong = (songId, songData) => {
    return fetch(`http://localhost:3000/songs/${songId}`, {
      method: 'PATCH',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(songData)
    })
      .then(res => res.json())
  }

- Replace const keyword with function keyword
- Remove `=` sign (assignment operator) and all space between function name and parameters list
- Remove the `=>` between parameters list and curly braces

function updateSong(songId, songData) {
    return fetch(`http://localhost:3000/songs/${songId}`, {
      method: 'PATCH',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(songData)
    })
      .then(res => res.json())
  }

## Arrow functions for Callbacks

function getComments(song) {
  return fetch(`http://localhost:3000/comments?songId=${song.id}`)
    .then(res => res.json())
}

Better than

function getComments(song) {
  return fetch(`http://localhost:3000/comments?songId=${song.id}`)
    .then(function(res) { return res.json()})
}

## Multi Line parameters in Arrow function (using Destructuring Assignment)

const renderComment = ({
  id, 
  comment,
  publishedAt,
  author
}) => {
  const target = document.querySelector('#comments');
  const p = document.createElement('p');
  p.className = "flex justify-between";
  p.innerHTML = `
  <input class="w-5/6" />
  <button><i class="fas fa-trash-alt"></i></button>
  `
  const input = p.querySelector('input');
  const deleteBtn = p.querySelector('button');
  input.value = comment;
  // add event listeners for updating or deleting a comment
  input.addEventListener('keyup', (e) => {
    updateComment(id, { comment: e.target.value });
  })
  deleteBtn.addEventListener('click', (e) => {
    deleteComment(id)
      .then(() => p.remove())
  })
  target.append(p);
}

Alternatively:

const renderComment = (record) => {
  const {
    id, 
    comment,
    publishedAt,
    author
  } = record;
  const target = document.querySelector('#comments');
  const p = document.createElement('p');
  p.className = "flex justify-between";
  p.innerHTML = `
  <input class="w-5/6" />
  <button><i class="fas fa-trash-alt"></i></button>
  `
  const input = p.querySelector('input');
  const deleteBtn = p.querySelector('button');
  input.value = comment;
  // add event listeners for updating or deleting a comment
  input.addEventListener('keyup', (e) => {
    updateComment(id, { comment: e.target.value });
  })
  deleteBtn.addEventListener('click', (e) => {
    deleteComment(id)
      .then(() => p.remove())
  })
  target.append(p);
}

useState hook

const [tasks, setTasks] = useState([])

- useState([]) returns an array with two elements in it
- tasks will refer to the first element
- setTasks will refer to the second element