<commit_before><template>
    <div>
        <comment v-for="comment in comments"
                 :key="comment.id"
                 :comment="comment"
                 :data_confirm="data_confirm"
                 @deleted="removeComment(comment)">
        </comment>

        <button v-if="endpoint" @click="retrieveComments" class="btn btn-outline-primary btn-block">
            <i v-if="isLoading" class="fa fa-spinner fa-spin fa-fw"></i>
            {{ loading_comments }}
        </button>
    </div>
</template>

<script>
export default {
  props: [
      'post_id',
      'loading_comments',
      'data_confirm',
  ],

  data() {
      return {
          comments: [],
          isLoading: false,
          endpoint: '/api/v1/posts/'+ this.post_id + '/comments/'
      }
  },

  mounted() {
      this.retrieveComments()
  },

  methods: {
    retrieveComments() {
        this.isLoading = true

        axios.get(this.endpoint).then(response => {
            this.comments.push(...response.data.data)
            this.isLoading = false
            this.endpoint = response.data.links.next
        });
    },

    removeComment(comment) {
        this.comments = this.comments.filter(item => {
            return item.id !== comment.id
        })
    }
  }
}
</script><commit_msg>Adding the comment-form in the comment-list component<commit_after><template>
    <div>
        <comment-form
            v-if="auth"
            :post_id="post_id"
            :placeholder="placeholder"
            :button="button"
            @added="addComment"
        ></comment-form>

        <comment v-for="comment in comments"
                 :key="comment.id"
                 :comment="comment"
                 :data_confirm="data_confirm"
                 @deleted="removeComment(comment)">
        </comment>

        <button v-if="endpoint" @click="retrieveComments" class="btn btn-outline-primary btn-block">
            <i v-if="isLoading" class="fa fa-spinner fa-spin fa-fw"></i>
            {{ loading_comments }}
        </button>
    </div>
</template>

<script>
export default {
  props: [
      'post_id',
      'loading_comments',
      'data_confirm',
      'placeholder',
      'button',
      'auth'
  ],

  data() {
      return {
          comments: [],
          isLoading: false,
          endpoint: '/api/v1/posts/'+ this.post_id + '/comments/'
      }
  },

  mounted() {
      this.retrieveComments()
  },

  methods: {
    retrieveComments() {
        this.isLoading = true

        axios.get(this.endpoint).then(response => {
            this.comments.push(...response.data.data)
            this.isLoading = false
            this.endpoint = response.data.links.next
        });
    },

    removeComment(comment) {
        this.comments = this.comments.filter(item => {
            return item.id !== comment.id
        })
    },

    addComment(comment) {
        this.comments.unshift(comment)
    }
  }
}
</script>
{'fraction_non_alphanumeric': 0.1452817379497624, 'fraction_numerical': 0.0006788866259334691, 'mean_word_length': 1.7671361502347418, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 33, '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': '1362460', 'n_tokens_mistral': 875, 'n_tokens_neox': 854, 'n_words': 141}