<commit_before>//document.ready
$(() => {
  bindClickHandlers()
})

const bindClickHandlers = () => {
  //get wardrobe_item idex
  $('.all_wardrobe_items').on('click', (e) => {
    e.preventDefault()
    history.pushState(null, null, "wardrobe_item")
    fetch('/wardrobe_items.json', {
        credentials: "include"
      })
      .then(res => res.json())
      .then(wardrobe_items => {
        $('#app-container').html(' ')
        wardrobe_items.forEach(wardrobe_item => {
          let newWardrobe_item = new Wardrobe_item(wardrobe_item)
          let wardrobe_itemHtml = newWardrobe_item.formatIndex()
          $('#app-container').append(wardrobe_itemHtml)
        })
      })
  })
  //show single wardrobe_item
  $(document).on('click', ".show_link", function(e) {
    e.preventDefault()
    $('#app-container').html(' ')
    let id = $(this).attr('data-id');
    fetch(`/wardrobe_items/${id}/capsules/${id}.json`, {
        credentials: "include"
      })
      .then(res => res.json())
      .then(wardrobe_item => {
        console.log(wardrobe_item)
        let newWardrobe_item = new Wardrobe_item(wardrobe_item[0])
        let wardrobe_itemHtml = newWardrobe_item.formatShow()
        $('#app-container').append(wardrobe_itemHtml)
      })
  })
  // create resource
  $('#new_wardrobe_item').on('submit', function(e) {
    e.preventDefault()
    $('#app-container').html(' ')
    $.ajax({
      url: '/wardrobe_items.json',
      method: 'POST',
      data: $(this).serialize(),
      success: function(data) {
        //console.log(data.id, data.item, data.description)
        const newWardrobeItem = new Wardrobe_item(data)
        //console.log(newWardrobeItem)
        $('#app-container').append(newWardrobeItem.formatShow())
      }
    })
  })

//show next and previous wardrobe item
  $(document).on('click', '.js-prev', function(e) {
    let id = $(this).attr('data-id'); //use jQuery to grab id of post
    console.log(id)
      fetch(`/wardrobe_items/${id - 1}.json`, {
        credentials: "include"})
        .then(res => res.json())
        .then(item => console.log(item)) //TEST WITH SECOND ITEM!!!!
        // .then(res => res.json())
        // .then(wardrobe_item => {
        //   console.log(wardrobe_item)
        //   let newWardrobe_item = new Wardrobe_item(wardrobe_item)
        //   let wardrobe_itemHtml = newWardrobe_item.formatShow()
        //   $('#app-container').append(wardrobe_itemHtml)
        // })
    })


  $(document).on('click', '.js-next', function(e) {
    let id = $(this).attr('data-id');
      console.log(id)
  })
}

//constructor function
function Wardrobe_item(wardrobe_item) {
  this.id = wardrobe_item.id
  this.item = wardrobe_item.item
  this.description = wardrobe_item.description
  this.wardrobe_item_capsules = wardrobe_item.wardrobe_item_capsules
  this.capsules = wardrobe_item.capsules
}

//every instance of Wardrobe_item can call the .formatIndex function.
//cannot use arrow function with prototype(get window object)
//format the rest of html

//index view formatter
Wardrobe_item.prototype.formatIndex = function() {
  let wardrobe_itemHtml = `
    <a href="/wardrobe_items/${this.id}" data-id="${this.id}" class="show_link"><h2>${this.item}</h2></a>
    <h3> -${this.description}</h3>
  ` //fix links, add other display items<commit_msg>Added display and Wardrobe_item.prototype.show functionality to previous button.<commit_after>//document.ready
$(() => {
  bindClickHandlers()
})

const bindClickHandlers = () => {
  //get wardrobe_item idex
  $('.all_wardrobe_items').on('click', (e) => {
    e.preventDefault()
    history.pushState(null, null, "wardrobe_item")
    fetch('/wardrobe_items.json', {
        credentials: "include"
      })
      .then(res => res.json())
      .then(wardrobe_items => {
        $('#app-container').html(' ')
        wardrobe_items.forEach(wardrobe_item => {
          let newWardrobe_item = new Wardrobe_item(wardrobe_item)
          let wardrobe_itemHtml = newWardrobe_item.formatIndex()
          $('#app-container').append(wardrobe_itemHtml)
        })
      })
  })
  //show single wardrobe_item
  $(document).on('click', ".show_link", function(e) {
    e.preventDefault()
    $('#app-container').html(' ')
    let id = $(this).attr('data-id');
    fetch(`/wardrobe_items/${id}/capsules/${id}.json`, {
        credentials: "include"
      })
      .then(res => res.json())
      .then(wardrobe_item => {
        console.log(wardrobe_item)
        let newWardrobe_item = new Wardrobe_item(wardrobe_item[0])
        let wardrobe_itemHtml = newWardrobe_item.formatShow()
        $('#app-container').append(wardrobe_itemHtml)
      })
  })
  // create resource
  $('#new_wardrobe_item').on('submit', function(e) {
    e.preventDefault()
    $('#app-container').html(' ')
    $.ajax({
      url: '/wardrobe_items.json',
      method: 'POST',
      data: $(this).serialize(),
      success: function(data) {
        //console.log(data.id, data.item, data.description)
        const newWardrobeItem = new Wardrobe_item(data)
        //console.log(newWardrobeItem)
        $('#app-container').append(newWardrobeItem.formatShow())
      }
    })
  })

//show next and previous wardrobe item
  $(document).on('click', '.js-prev', function(e) {
    let id = $(this).attr('data-id'); //use jQuery to grab id of post
    console.log(id)
      fetch(`/wardrobe_items/${id - 1}.json`, {
        credentials: "include"})
        .then(res => res.json())
        //.then(item => console.log(item)) //TEST WITH SECOND ITEM!!!!
        .then(wardrobe_item => {
          console.log(wardrobe_item)
          let newWardrobe_item = new Wardrobe_item(wardrobe_item)
          let wardrobe_itemHtml = newWardrobe_item.formatShow()
          $('#app-container').append(wardrobe_itemHtml)
        })
    })


  $(document).on('click', '.js-next', function(e) {
    let id = $(this).attr('data-id');
      console.log(id)
  })
}

//constructor function
function Wardrobe_item(wardrobe_item) {
  this.id = wardrobe_item.id
  this.item = wardrobe_item.item
  this.description = wardrobe_item.description
  this.wardrobe_item_capsules = wardrobe_item.wardrobe_item_capsules
  this.capsules = wardrobe_item.capsules
}

//every instance of Wardrobe_item can call the .formatIndex function.
//cannot use arrow function with prototype(get window object)
//format the rest of html

//index view formatter
Wardrobe_item.prototype.formatIndex = function() {
  let wardrobe_itemHtml = `
    <a href="/wardrobe_items/${this.id}" data-id="${this.id}" class="show_link"><h2>${this.item}</h2></a>
    <h3> -${this.description}</h3>
  ` //fix links, add other display items
{'fraction_non_alphanumeric': 0.1651389932381668, 'fraction_numerical': 0.0018031555221637867, 'mean_word_length': 3.026618269812462, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 38, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '398526', 'n_tokens_mistral': 2132, 'n_tokens_neox': 2131, 'n_words': 376}