diff --git a/pages/_category.vue b/pages/_category.vue index cdf9e64..f7d4c41 100644 --- a/pages/_category.vue +++ b/pages/_category.vue @@ -28,28 +28,18 @@ export default { return this.$store.state.Sidebar.cardsShown; }, category() { - const category = this.$store.getters['data/findResources'](this.categoryRouteTitle) + const category = this.$store.getters['data/sortByTitle'](this.categoryRouteTitle) const pagePath = this.$router.history.current.path const query = this.$route.query.card + // console.log(category.resources) for (const resource of category.resources) { - resource.cleanTitle = resource.title.replace(/ /g, '').toLowerCase() - resource.path = `${pagePath}?card=${resource.cleanTitle}` resource.active = (resource.cleanTitle === query) ? 'card--active' : '' } - category.resources.sort(this.compareTitles) + // category.resources.sort(this.compareTitles) return category }, }, methods: { - compareTitles(x, y) { - if (x.cleanTitle > y.cleanTitle) { - return 1 - } else if (x.cleanTitle < y.cleanTitle) { - return -1 - } else { - return 0 - } - }, onToggle(index) { if (this.activeCard === index) { this.activeCard = null; diff --git a/store/data.js b/store/data.js index d58aa6f..6efd8aa 100644 --- a/store/data.js +++ b/store/data.js @@ -30,7 +30,17 @@ if (!Array.prototype.flat) { const includesElOf = (list1, list2) => list1.some(element => list2.includes(element)) export const state = () => ({ - resources, + resources: resources.map(category => ({ + ...category, + resources: category.resources.map(resource => { + const cleanTitle = resource.title.replace(/ /g, '').toLowerCase() + return { + ...resource, + cleanTitle, + path: `${category.slug}?card=${cleanTitle}`, + } + }) + })), // List of all tags, duplicates removed tags: [...new Set( resources @@ -43,10 +53,28 @@ export const getters = { tags: state => state.tags, resources: state => state.resources, findResources: state => title => { - return state.resources.find(resource => resource.title.toLowerCase() === title.toLowerCase()) + return Object.assign(state.resources.find(resource => resource.title.toLowerCase() === title.toLowerCase())) }, findByTags: state => tags => { const flat = state.resources.map(category => category.resources).flat() return flat.filter(resource => resource.tags && includesElOf(resource.tags, tags)) + }, + sortByTitle: (_, getters) => title => { + const category = getters.findResources(title) + const copy = [...category.resources] + return { + ...category, + resources: copy.sort(compareTitles) + } + } +} + +const compareTitles = (x, y) => { + if (x.cleanTitle > y.cleanTitle) { + return 1 + } else if (x.cleanTitle < y.cleanTitle) { + return -1 + } else { + return 0 } } \ No newline at end of file