[Vuejs]-Vuejs, components and cache

by

0👍

✅

If i understand it correctly, you just want one JSON object with categories AND data?
In that case, i think you should create an object ("zn_cache"), in which you add categories and articles

//If you want to keep both functions, just set vuejs data variables (categories and articles) and affect them the data you fetched from the api
this.categories = data.categories
this.articles = data.articles

Then you can create a global object with both (check the syntax I’m not 100% sure)

let dashboard = { 'categories' : this.categories, 'articles' : this.articles}

Then you can store this bad boy

0👍

@antoinehenrio

works like a charm 😉

here is the dashboard now

const zendeskConfig = {
  categoriesEndpoint: 'https://carreblanc.zendesk.com/api/v2/help_center/fr/categories.json',
  articlesEndpoint: 'https://carreblanc.zendesk.com/api/v2/help_center/fr/articles.json'
};

import Categories from '/skin/frontend/carreblanc/revamp/js/zendesk/hc/components/dashboard/categories.js'
import Recents from '/skin/frontend/carreblanc/revamp/js/zendesk/hc/components/dashboard/recent-activity.js'

export default {
  components: {
    Categories,
    Recents
  },
  data() {
    return {
      categories: [],
      articles: [],
    }
  },
  methods: {
    getData() {
      Promise.all([
        fetch(zendeskConfig.categoriesEndpoint).then(res => res.ok && res.json() || Promise.reject(res)),
        fetch(zendeskConfig.articlesEndpoint).then(res => res.ok && res.json() || Promise.reject(res))
      ]).then(([resCategories, resArticles]) => {
        this.categories = resCategories.categories
        this.articles = resArticles.articles
        let cacheData = { dashboard: { 'categories' : this.categories, 'articles' : this.articles} }
        sessionStorage.setItem('zhc_db_cache', JSON.stringify(cacheData))
      })
    }
  },
  created() {
    this.getData()
  },
  template: `
    <div class="row">
      <div class="col col-12"> 
        <Categories :categories=this.categories />
      </div>
      <div class="col col-12"> 
        <Recents :articles=this.articles />
      </div>
    </div>
    `
}

and the result :

enter image description here

I have to reconfigure the other views, but it should be easy now

Thanks again !

Leave a comment