<template>
  <div id="memecontainer">
    <h1>Hello</h1>

    <ul v-if="categories && categories.length">
    <li v-for="(category, index) of categories">
     <p><strong>{{category['name']}}</strong></p>
       <ul v-if="memes && memes.length">
       <li v-for="meme of memes[index]">
         <p><strong>{{meme['name']}}</strong></p>
      </li>
      </ul>
   </li>
   </ul>

 <hr>

   <ul v-if="files && files.length">
   <li v-for="file of files">
     <p><strong>{{file}}</strong></p>
   </li>
 </ul>
</div>
</template>

<script>
import Gitlab from 'gitlab'

export default {
  components: {
  },
  data () {
    return {
      categories: [],
      memes: [],
      memeContent: [],
      files: [],
      errors: [],
      ids: []
    }
  },
  created () {
    const api = new Gitlab({
      url: 'https://meme.mememgmt.tk/',
      token: 'xxxxxxxxxxxxxxxxxxxx'
    })

    api.Projects.all()
    .then((projects) => {
      this.categories = projects
      for (var i = 0; i < this.categories.length; i++) {
        this.ids.push(this.categories[i].id)
      }

      for (var j = 0; j < this.ids.length; j++) {
        var id = this.ids[j]

        api.Branches.all(id)
        .then((branches) => {
          this.memes.push(branches)
          console.log(branches)
        })
       .catch(e => {
        this.errors.push(e)
        })
      }
    })
    .catch(e => {
      this.errors.push(e)
    })
  }
}
</script>